Simple javascript form reset when certain text boxes are clicked

Question

Morning all...thicky, newbie Rich here!

I have a very simple set up, three different search options for finding product information i.e. a cascading drop down list, a product search text box and a radio button list.

Ideally, I do not want the form to get cluttered with information or have to use a 'click here to reset' button.

What I would like is for the form to reset/clear itself when a user either hits the drop down, the text box or the radio button list. Therefore this will ensure the searching does not get cluttered with information that potentially isn't being used.

How would one go about doing this? As per my other questions, please excuse my ignorance.

Answer 1

What you want to do is fairly simple with jquery if you're using it. Without knowing your exact markup I can really only pseudo-code it out for you, but something like this should be a start:

<script language="javascript" type="text/javascript">

$(document).ready(function() {
 $inputs = $("#places, #search, #radio_search");
 $.each($inputs, function() {
  $(this).focus(function() {
   $.each($inputs, function() {
    $(this).val('');
    $(this).attr('checked', false);
   })
  });
 })
});

</script>

You want to inlcude the jquery library and add this to the head tag of the html page you want to do this on. You'll also need to make sure the $inputs = $("#places, #search, #radio_search"); matches the specific ids of the inputs you're trying to change.

Answer 2

Ok dokey, got it to work, lovely stuff.

However, in my drop down list, I wish to retain the orignal value rather than clear it all together, the current working code is as follows.

<script language="javascript" type="text/javascript">

$(document).ready(function() { $inputs = $("#tbxProdAC, #ddlBuyer, #txtbxHowMany, radTopx");
$.each($inputs, function() { $(this).focus(function() { $.each($inputs, function() { $(this).val('');
$(this).attr('checked', false); }) }); }) });

Is there a way I can specify the individual values i.e. tbxProdAC ='', ddlBuyer = Original Value, txtbxHowMany='', radTopx =''?