SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Cool Why is This Snippet not Replacing the Original Value in the Input Field?

    Hello all,

    Why doesn't the below snippet replace the input value if the value is set to empty?

    Code:
          function input_reset(obj){
            if (obj.length == 0){
              obj.value = obj.defaultValue;
            }
          }
    I have a form element:
    HTML Code:
    <input type="text" name="email" id="go" value="your e-mail" onclick="input_focus(this)" onblur="input_reset(this)" maxlength="60"/>
    I haven't done something right, apparently.

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,886
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    Good morning,

    Quote Originally Posted by etidd View Post
    Why doesn't the below snippet replace the input value if the value is set to empty?
    Because you are passing the function this as an argument.
    this refers to the input element, so if you do console.log(obj); from within the function, you will see:

    HTML Code:
    <input type="text" name="email" id="go" value="your e-mail" onclick="input_focus(this)" onblur="input_reset(this)" maxlength="60">
    You are then checking if the length of the input element is zero, which it never will be.

    What you need to do instead, is to check if the length of the input element's value attribute is zero.
    Change your code to this:

    Code JavaScript:
    function input_reset(obj){
      if (obj.value.length == 0){
        obj.value = obj.defaultValue;
      }
    }

    You might also want to consider getting rid of the inline event handlers, as this mixes behaviour and content.
    I can show you how if you would like.

  3. #3
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I'd like to learn the best techniques. Maybe you can just link me a read, and I can learn it myself.

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,886
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    I forgot, you're using jQuery.
    In that case it gets even easier.

    Remove the inline JS:

    HTML Code:
    <input type="text" name="email" id="go" value="your e-mail" maxlength="60">
    Then in your JS get a reference to the field by id (for example) and attach the necessary handlers:

    Code JavaScript:
    $("#go").focus(function(){
      console.log("focus");
    });
     
    $("#go").blur(function(){
      console.log("blur");
    });

    You can also do it in one go using on:

    Code JavaScript:
    $("#go").on('focus blur', function(e) {
      if (e.type == "focus"){
        console.log("focus");
      } else {
        console.log("blur");
      }
    });

    In this example we are passing in an event object and examining its type to determine what action to take.

    There is no difference between the two methods in this context.
    However, .on() has replaced .live() in jQuery 1.9 and can also be used to attach behaviour to dynamically created events.

    Also, you might find these useful:
    http://www.concrete5.org/documentati...vent-handlers/
    http://jqfundamentals.com/chapter/events

  5. #5
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,338
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    RESOLVED.

    Thank you very much! I'll work out your reply when I get home to try it out.

    Consider this thread closed.
    Steve Husting

  6. #6
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,254
    Mentioned
    113 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by StevenHu View Post
    Thank you very much! I'll work out your reply when I get home to try it out.

    Consider this thread closed.
    Did you mean to post this to this thread? You didn't start this thread, nor post to it prior to this post.....
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style

  7. #7
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up Woah!

    Cool! This works perfectly.

  8. #8
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Wait, but when I tried the reset and focus functions to remove and replace the default value, I don't know how I'll target it without the obj parameter that was originally being used. Do I just make it like this:

    Code:
    	  $("#go").focus(function(){
    		if ($("#go").val() == $("#go").prop('defaultValue')){
    			$("#go").val('');
    		}
    	  });
     
    	  $("#go").blur(function(){
    		if ($("#go").val() == ''){
     		 $("#go").val('defaultValue');
    		}
      	  });
    It works just fine on the focus function, but if it's empty on blur, 'defaultValue' is inserted as a result of the reset function.

  9. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,886
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    Hi etidd,

    within the event handler $(this) refers to the HTML element that triggered the event.

    I would write:

    Code JavaScript:
    $("#go").on('focus blur', function(e) {
      var v = $(this).val()
      if (e.type == "focus"){
        v = (v == "your e-mail")? "" : v;
      } else {
        v = (v == "")? "your e-mail" : v;
      }
      $(this).val(v);
    });

    This uses a ternary operator to assign the value of v.

  10. #10
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Cool! Thanks, Dave.


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
  •