Ok dokey, got a bit of jquery up and running, lovely stuff.

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

However, in my drop down list, I wish to retain the orignal value rather than clear it altogether.

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

Ok dokey, got a bit of jquery up and running, lovely stuff.

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

However, in my drop down list, I wish to retain the orignal value rather than clear it altogether.

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

• javascript
• jquery
• list
• drop-down-menu

• 1 please, edit your code, it's really messy :/ – Ondrej Slinták Commented Nov 27, 2009 at 14:30
• Sorry about that onodrowan..I was being dense and should have used the html properly! – MrDean Commented Nov 27, 2009 at 14:44
• i don't get it too, which of those elements is the select box? all those elements you specified seems to be checkboxes. – paolo granada lim Commented Nov 27, 2009 at 14:47
• Hello Paulo. Essentially I have three searches going on in one page. A textbox search (tbxProdAC) a dropdownlist (ddlBuyer) and a textbox/radio button list. What I am trying to achieve is a process whereby if a user selects one of these searches, the content of the others is cleared i.e. essentially removing the need for a general "Reset all" button or equivalent. – MrDean Commented Nov 27, 2009 at 14:51

5 Answers 5

have you tryed:

document.getElementById('formId').reset(); 

try it this way:

$(document).ready(function() { 
    $("#tbxProdAC, #ddlBuyer, #txtbxHowMany, radTopx").focus(function() { 
              document.getElementById('formId').reset(); 
        }); 
}); 

You'll have to go through each one separately to do that.

i.e.

$('#tbxProcAC').val('');
$('#ddlBuyer').val($('#ddlBuyer')[0].defaultValue);
$('#txtbxHowMany').val('');
$('#radTopx').attr('checked',false);

Perhaps the second line there may be of most intrest to you - it shows how to access the original 'default' value.

Comment if you've any questions, good luck!

You can use the data function in JQuery - you can store all the existing values and call them again when you need them

in JQuery can select First Option <option value="0" > </option> first option value is zero and text is empty. now

$('#DropDown').find('option:first').attr('selected', 'selected');

$('#DropDown')[0].selectedIndex = 0;

$('#DropDown') -> select dropdown

find('option:first') -> find first option

attr('selected', 'selected') -> set attribute selected.

Try this simple way

 document.getElementById(‘drpFruits’).options.length=0;