Question

I need to clear the default values from input fields using js, but all of my attempts so far have failed to target and clear the fields. I was hoping to use onSubmit to excute a function to clear all default values (if the user has not changed them) before the form is submitted.

<form method='get' class='custom_search widget custom_search_custom_fields__search' onSubmit='clearDefaults' action='http://www.example.com' >
<input name='cs-Price-2' id='cs-Price-2' class='short_form' value='Min. Price' />
<input name='cs-Price-3' id='cs-Price-3' class='short_form'  value='Max Price' />
<input type='submit' name='search' class='formbutton' value=''/>
</form>

How would you accomplish this?

Answer 1

• Read the ids+values of all your fields when the page first loads (using something like jquery to get all “textarea”, “input” and “select” tags for example)
• On submit, compare the now contained values to what you stored on loading the page
• Replace the ones that have not changed with empty values

If it’s still unclear, describe where you’re getting stuck and I’ll describe more in depth.

Edit: Adding some code, using jQuery. It’s only for the textarea-tag and it doesn’t respond to the actual events, but hopefully it explains the idea further:

// Keep default values here
var defaults = {};

// Run something like this on load
$('textarea').each(function(i, e) {
  defaults[$(e).attr('id')] = $(e).text();
});

// Run something like this before submit
$('textarea').each(function(i, e){
  if (defaults[$(e).attr('id')] === $(e).text())
    $(e).text('');
})

Edit: Adding some more code for more detailed help. This should be somewhat complete code (with a quality disclaimer since I’m by no means a jQuery expert) and just requires to be included on your page. Nothing else has to be done, except giving all your input tags unique ids and type=”text” (but they should have that anyway):

$(document).ready(function(){
  // Default values will live here
  var defaults = {};

  // This reads and stores all text input defaults for later use
  $('input[type=text]').each(function(){
    defaults[$(this).attr('id')] = $(this).text();
  });

  // For each of your submit buttons,
  // add an event handler for the submit event
  // that finds all text inputs and clears the ones not changed
  $('input[type=submit]').each(function(){
    $(this).submit(function(){
      $('input[type=text]').each(function(){
        if (defaults[$(this).attr('id')] === $(this).text())
          $(this).text('');
      });
    });
  });
});

If this still doesn’t make any sense, you should read some tutorials about jQuery and/or javascript.