Clear default values using onsubmit

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.

Answer 2

Note: This is currently only supported in Google Chrome and Safari. I do not expect this to be a satisfactory answer to your problem, but I think it should be noted how this problem can be tackled in HTML 5.

---

HTML 5 introduced the placeholder attribute, which does not get submitted unless it was replaced:

<form>
  <input name="q" placeholder="Search Bookmarks and History">
  <input type="submit" value="Search">
</form>

Further reading:

• DiveintoHTML5.org: Live Example... And checking if the placeholder tag is supported
• DiveintoHTML5.org: Placeholder text

Answer 3

1) Instead of checking for changes on the client side you can check for the changes on the client side.

In the Page_Init function you will have values stored in the viewstate & the values in the text fields or whichever controls you are using.

You can compare the values and if they are not equal then set the Text to blank.

2) May I ask, what functionality are you trying to achieve ?

Answer 4

U can achieve it by using this in your submit function

function clearDefaults()
{
    if(document.getElementById('cs-Price-2').value=="Min. Price")
      {
              document.getElementById('cs-Price-2').value='';
      }

}