SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Deleting initial value text from a form text field on click.

    Hello everyone,
    I have a simple text field in a form tag.
    I have initial value text.

    Basically the initial Value tells the user what the field is for.

    Eg: Password.

    Now when the user click in the field, the initial val text is deleted by an on click event.
    Code:
    <input name="userName" type="text" id="uNameField" onclick="this.value='';" value="Enter username" maxlength="19" />
    The problem is, lets assumed the user typed a user name in the field but forgot to add a character and decides to add that character, the value they entered previously gets deleted. This can be frustrating. But I am only using it for two fields not an entire form.

    Is there a way to make the initial value delete on the first click in the text field but then whatever the user typed remains until the form is either submitted or the browser is refreshed or clear?


    I'm lost here.

    Any ideas will be appreciated.


    IC

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    You might want to do this the other way around.

    Have no default value, and if the user has Javascript enabled, then have the script add in the value "Set your username" just once. onblur, when the focus is set on the input, and the value's gone, and let this only happen once per page load.

    That way those of us who don't have JS don't need to keep deleting your value before typing in what we want, and those with JS only need to set focus there with a click and the input remains empty for the rest of the time the page is there.

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Iconic_creator,

    Is it something like this you want to do?

    <input type="text" name="myInput" value="Enter password" onfocus="if(this.value == 'Enter password'){this.value = '';}" />

    I hope that helps

    Regards,


    David
    David McLeary
    Emerging Innovations
    Website Development, Training and Consultancy

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    @Stomme poes I don't know if this still applies, but at some time some user agents had problems with empty form controls.

    http://www.w3.org/TR/WCAG10-HTML-TECHS/#forms-specific

    I guess it's not too hard to double click the default text and delete if you don't have JavaScript enabled.

    With that in mind, here is a nice script courtesy of Jeremy Keith (from DOM Scripting) that allows for the behavior requested by the OP and more (this can be placed in the head section, or in a separate .js file):

    Code:
    function resetFields(whichform) { 
      for (var i=0; i<whichform.elements.length; i++) { 
        var element = whichform.elements[i]; 
        if (element.type == "submit") continue; 
        if (!element.defaultValue) continue; 
        element.onfocus = function() { 
          if (this.value == this.defaultValue) { 
          this.value = ""; 
          } 
        } 
        element.onblur = function() { 
          if (this.value == "") { 
          this.value = this.defaultValue; 
          } 
        } 
      } 
    } 
    
    window.onload = prepareForms;
    function prepareForms() { 
      for (var i=0; i<document.forms.length; i++) { 
        var thisform = document.forms[i]; 
        resetFields(thisform); 
      }  
    }
    This solution is nice in that no JS needs to be placed in the form HTML at all (or on the entire page, for that matter, if you link to an external .js file).

    All you need in the HTML is to make sure that a value is set:

    Code:
    <input name="userName" type="text" id="uNameField" value="Enter username" maxlength="19" />

  5. #5
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    @Stomme poes I don't know if this still applies, but at some time some user agents had problems with empty form controls.

    http://www.w3.org/TR/WCAG10-HTML-TECHS/#forms-specific

    I guess it's not too hard to double click the default text and delete if you don't have JavaScript enabled.

    With that in mind, here is a nice script courtesy of Jeremy Keith (from DOM Scripting) that allows for the behavior requested by the OP and more (this can be placed in the head section, or in a separate .js file):

    Code:
    function resetFields(whichform) { 
      for (var i=0; i<whichform.elements.length; i++) { 
        var element = whichform.elements[i]; 
        if (element.type == "submit") continue; 
        if (!element.defaultValue) continue; 
        element.onfocus = function() { 
          if (this.value == this.defaultValue) { 
          this.value = ""; 
          } 
        } 
        element.onblur = function() { 
          if (this.value == "") { 
          this.value = this.defaultValue; 
          } 
        } 
      } 
    } 
    
    window.onload = prepareForms;
    function prepareForms() { 
      for (var i=0; i<document.forms.length; i++) { 
        var thisform = document.forms[i]; 
        resetFields(thisform); 
      }  
    }
    This solution is nice in that no JS needs to be placed in the form HTML at all (or on the entire page, for that matter, if you link to an external .js file).

    All you need in the HTML is to make sure that a value is set:

    Code:
    <input name="userName" type="text" id="uNameField" value="Enter username" maxlength="19" />
    Whats up Ralph,
    I really appreciate the time and effort you have taken to help me get this going. I have everything working right now.

    I was provided a script by a guy called Murray at the Adobe - Dreamweaver Forum.

    But your code appeared to separate the JS from the HTML.

    Here's the JS code provided by Murray.

    Code:
    onfocus="if(this.value==this.defaultValue)this.value=''" onblur="if(this.value=='')this.value=this.defaultValue"
    Here is the full code attached to the form field.

    Code:
    <label for="userPassword">Password</label>
    <input type="text" name="userPassword" id="passwordField" onfocus="if(this.value==this.defaultValue)this.value=''" onblur="if(this.value=='')this.value=this.defaultValue" value="Enter Password" maxlength="19" />

    However, I will tried the method you provided also.

    Is whichform the name of my form? I am a novice to JS, should this be replace by the ID of my form or the form name?


    Thanks again.

    IC

  6. #6
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dmcleary View Post
    Hi Iconic_creator,

    Is it something like this you want to do?

    <input type="text" name="myInput" value="Enter password" onfocus="if(this.value == 'Enter password'){this.value = '';}" />

    I hope that helps

    Regards,


    David

    This works perfectly.

    Code:
    onfocus="if(this.value==this.defaultValue)this.value=''" onblur="if(this.value=='')this.value=this.defaultValue"
    The code you provided have to be deleted manually not on click and the default text does not re appear when you click outside the fields.

    Thanks very much!

    IC

  7. #7
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by ralph
    I don't know if this still applies, but at some time some user agents had problems with empty form controls.
    Possibly, but for accessibility and usability reasons I almost never put values in inputs. Instead I have value="" in the code (which should only be required for radios and checkboxes (with real non-zero values) but I started adding them in everything for my colleague's back-end scripts).

    I wouldn't want someone who accidentally skipped something to be submitting some value that isn't true, and not everyone has ease in deleting text before writing in text.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    @Stomme poes Strangely, the use of the default values is said to be for the sake of accessibility. As least once upon a time, I've read that browsers had trouble recognizing empty form fields, making keyboard navigation difficult, as you could not tab to empty fields.


    Quote Originally Posted by Iconic_creator
    your code appeared to separate the JS from the HTML.
    Indeed, that's its virtue.

    Is whichform the name of my form? ...should this be replace by the ID of my form or the form name?
    No; no change to your form needs to be made at all. The script just runs through any form on the page.

  9. #9
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    As least once upon a time, I've read that browsers had trouble recognizing empty form fields, making keyboard navigation difficult, as you could not tab to empty fields.
    That's certainly possible, I haven't tabbed through forms in many older browsers. Nothing older than IE5.5 or Opera 9x at least.

  10. #10
    SitePoint Member
    Join Date
    Jan 2010
    Location
    Portugal
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello, i have taken out this code from this thread and it does what it's supposed to and it even does more, and that more is not what i wanted

    Code:
    function resetFields(whichform) { 
      for (var i=0; i<whichform.elements.length; i++) { 
        var element = whichform.elements[i]; 
        if (element.type == "submit") continue; 
        if (!element.defaultValue) continue; 
        element.onfocus = function() { 
          if (this.value == this.defaultValue) { 
          this.value = ""; 
          } 
        } 
        element.onblur = function() { 
          if (this.value == "") { 
          this.value = this.defaultValue; 
          } 
        } 
      } 
    } 
    
    window.onload = prepareForms;
    function prepareForms() { 
      for (var i=0; i<document.forms.length; i++) { 
        var thisform = document.forms[i]; 
        resetFields(thisform); 
      }  
    }
    well, what happens is that when i submit the form to send it unchecks the chekboxes, and not being myself javascript savvy i'm a little lost on how to keep the checkboxes selected when sending.

    The checkboxes default value is unchecked, so i would suppose that when people check them they would stay that way, but no, in fact it clears them and no data is passed.

    If anybody can help me with this i will really appreciate it,

    Thanks in advance!

  11. #11
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    @Stomme poes I don't know if this still applies, but at some time some user agents had problems with empty form controls.
    Sorry Ralph, I dunno where my brain was... but this is one of those things I remember, that WCAG2 has dropped this requirement (along with some other things).

    http://www.rnib.org.uk/PROFESSIONALS...ding_text.aspx

    psykick what are you using the JS for? If it's as simple as what iconic was asking for (that UserName or something sits be default in the text input) I wouldn't use all that at all, just a simple js:
    Code:
        <script type="text/javascript">
          var searchLabel = document.forms["formSearch"]["search"];
          searchLabel.value = "typ uw trefwoorden in";
          searchLabel.onfocus = function() {
            searchLabel.select(); //highlights on focus
            //or this.value=''; removes value on focus
          }
        </script>
    where the input has an id of "search" in the form with the id of "formSearch".

    otherwise, with the current JS you have, I wonder if this line:
    if (element.type == "submit") continue;
    could also have more if's: if (element.type == "checkbox") continue; or something.

    Depends on what exactly you want to happen.

  12. #12
    SitePoint Member
    Join Date
    Jan 2010
    Location
    Portugal
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    otherwise, with the current JS you have, I wonder if this line:
    if (element.type == "submit") continue;
    could also have more if's: if (element.type == "checkbox") continue; or something.

    Depends on what exactly you want to happen.
    i am using it to a clear default values in a contact form of a website.

    That if statement did the trick

    Thank you for helping a js dummy

    i see it was more simple than what i thought. i'm only used to php and was a little scared of js but now i see that it's somewhat similar.

    Thanks again for the fast answer and Gelukkig nieuwjaar

  13. #13
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    i am using it to a clear default values in a contact form of a website.
    is it possible that you don't need/want default values? Are these helping people know what kind of info you are looking for, or are they what people are expected to want to check (so those who want defaults have to change as little as possible)? Or are you re-enactive an
    input type="reset" button? I know, I know, people say they are worthless but I appreciate them when I'm refilling in forms with whole new values.

    Watch out, I'm also a JS dummy, and likely a more elegant or just plain better way is out there.

    Thanks again for the fast answer and Gelukkig nieuwjaar
    Beste wensen.

  14. #14
    SitePoint Member
    Join Date
    Jan 2010
    Location
    Portugal
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that if statement did the trick perfectly. exactly what i needed, and i doubt someone could write that better than you did

    i could just insert the name of the boxes of the contact form above them but i was getting stuborn to have the names of the boxes inside them

    also before you replied i found a way around the problem, that was, having the checkboxes checked by default and ppl would just need to uncheck them, and it also worked, but i like the script change more than having checkboxes checked by default.

    if you want you can have a look at the contact form here
    Code:
    http://eveforjustice.com/contact/
    working perfectly, just the way i wanted it to!

    Thanks again for your help!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •