SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2008
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Issues with placeholder value

    How can I write javascript that states, if an input field = this text, then empty the input before submitting?

    Thank you for you help

    By the way I thought that is what this was saying, but it still submits the placeholder as a value?:

    $('[placeholder]').parents('form').submit(function() {
    $(this).find('[placeholder]').each(function() {
    var input = $(this);
    if (input.val() == input.attr('placeholder')) {
    input.val(' ');
    }
    })
    });
    Last edited by ralph.m; Jul 19, 2013 at 16:59.

  2. #2
    SitePoint Enthusiast
    Join Date
    Jan 2008
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    turns out placeholder above does work just not for IE9 or less? Any ideas?

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,121
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by yorsite View Post
    turns out placeholder above does work just not for IE9 or less? Any ideas?
    Yes, for IE9 and below you need to do something different. I use placeholder for those browsers that can handle it, and then have a JS fallback for those that don't recognize it.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  4. #4
    SitePoint Enthusiast
    Join Date
    Jan 2008
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Gotcha Ralph, so I am using Modernizer and it is inputting the placeholders just fine, however it is also using them as values, which is a big problem.

    This is the code for modernizer, but it doesn't seem to take away the value of the placeholders upon submit. Any ideas?

    Code:
    $(document).ready(function(){
    
    if(!Modernizr.input.placeholder){
    
    	$('[placeholder]').focus(function() {
    	  var input = $(this);
    	  if (input.val() == input.attr('placeholder')) {
    		input.val('');
    		input.removeClass('placeholder');
    	  }
    	}).blur(function() {
    	  var input = $(this); 
    	  if (input.val() == '' || input.val() == input.attr('placeholder')) {
    		input.addClass('placeholder');
    		input.val(input.attr('placeholder'));
    	  }
    	}).blur();
    	$('[placeholder]').parents('form').submit(function() {
    	  $(this).find('[placeholder]').each(function() {
    		var input = $(this);
    		if (input.val() === input.attr('placeholder')) {
    		  input.val(' ');
    		}
    	  })
    	}); 
    
    }
    
    });

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,121
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by yorsite View Post
    it doesn't seem to take away the value of the placeholders upon submit. Any ideas?
    Hm, maybe this is a question for @Pullo , who's good with jQuery. Presumably the placeholder text will only be sent if the user doesn't type anything. You could make some fields required, I guess, to prevent default text being being sent.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,900
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    Hi,
    I don't mind taking a look.
    Could you post a link to a page where we can see the form in action?


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
  •