Workflow Soluiton

 View Only
  • 1.  Adding javascript to clear intial value onclick

    Posted Jan 13, 2011 11:40 AM

    How do you autoclear the "initial value" of a textbox when a user clicks or tabs into the texbox?

    If you have a textbox for "Enter Email Address: " and you put an intial value of "please enter your email address" in the textbox, how do you add javascript to clear this value for the "onfocus=" event (which covers clicks and tabs)?

    Is adding a link to a small JS file with a clear() function and adding code to the aspx template the only way to handle this?

    To ask the inverse:
     

    How do you re-add your status message if the user clicks or tabs out of your field without entering anything? See pseudo-code below

    <script type="text/javascript">
    function yUNoHaveText() {
        var myTextBox = document.getElementById('myTxtBox');
        if(myTextBox.value == "")
            myTextBox.value = "Please enter your email address"
    }
    </script>
     
     
    <input type='text' id='myTxtBox' onblur='yUNoHaveText()' />
     
    edit: i would've wrapped my code in <pre> tags if it were working....


  • 2.  RE: Adding javascript to clear intial value onclick
    Best Answer

    Posted Jan 13, 2011 12:37 PM

    With the text box:

    1. Make the Control ID of the text box "myTxtBox" (no dbl quotes) under Functionality / Behavior

    2. Add a AttributeKeyValuePair custom event to the Custom Events in Functionality / Behavior

    3. Make the event onblur, and add the event handler script as follows (per your example):

    var myTextBox = document.getElementById('myTxtBox');

    if(myTextBox.value == "")
    {
            myTextBox.value = "Please enter your email address";
    }
     

    This should do it.

    You'd do a similar thing with the onfocus event, making the script as follows:

    var myTextBox = document.getElementById('myTxtBox');

    myTextBox.value = "";


  • 3.  RE: Adding javascript to clear intial value onclick

    Posted Jan 13, 2011 01:26 PM

    Thanks reecardo. This is fully functioning now. Are there any known issues with using behavoir such as this? I know for example when you're using the ajax panel that you should use an initialize data component to create your variables before you show the form where they will accept data because it can function in unintended ways otherwise -- does anything like this exist when utilizing JS to set or clear values? 
     

    Would it be possible to use custom validation on the textbox to enforce some regular expression validation to verify the email is in the S+@s+\.\|com|net|org|edu format?



  • 4.  RE: Adding javascript to clear intial value onclick

    Posted Jan 13, 2011 01:35 PM

    I'm unsure about the ajax panels, but javascript has some regular expression support:

     

    http://www.devx.com/tips/Tip/35130

    http://www.codetoad.com/asp_email_reg_exp.asp

    The main issue is getting the "regular expression" to test for correct. And I have yet to see one that is 100% correct.



  • 5.  RE: Adding javascript to clear intial value onclick

    Posted Jan 13, 2011 01:40 PM

    I've had some success with ".+\\@.+\\..+" more so than any of the [a-z][A-Z][0-9] ones. it's not perfect but most end-users don't realize what's happening and comply.

    I don't know that i'd use it on a public facing form but for our internal use it seems to work ok. I've not used this is workflow yet, only in some smaller asp.net mvc projects i've worked on.



  • 6.  RE: Adding javascript to clear intial value onclick

    Posted Jan 13, 2011 05:16 PM

    What's the trick to getting at HTML editor components? It doesn't seem that you can access them by 'getElementById('id_here') -- looking at the source it looks like they are some type of special data type of "UlitmateEditors" or something.

     

    The source code shows that they are accessed there with the format '[UltimateEditors('id_here')]'