JQuery sets a collection of text fields to an empty value

Question

How do I figure out the values ​​of the text fields here below the code I developed, but it doesn't seem to work.

var txtName = $("input#txtName"),txtPrice = $("input#txtPrice"); 

First method

 $(txtName,txtPrice).val(""); 

• This is really wrong, because the price text box will now become the context for searching inside, I suppose.

Second method

 $([txtName,txtPrice]).val(""); 

• I do not understand why I should do this, since they are already jQuery objects (but it works).

I put them in variables since they are used later in the script.

Answer 1

Here are some ways to do this:

 txtName.add(txtPrice).val(""); // OR $("input#txtName,input#txtPrice").val(""); 

(There is a $ sign in your txtPrice value).

The first method does not work, because it is a way to use the jQuery selector. When you use jQuery, this first parameter will be a selector, and the second will be the container in which the selector works. Basically this is almost the same thing as this;

 $(txtPrice).find(txtName).val(""); 

Since txtPrice does not have txtName , no value will be emptied.

The second method works because you pass your parameters as an array to the jQuery selector. It takes it and performs a .val() action for each element of the array. This path is legal, but since your variables are already jQuery objects, there is no need to use this.

Answer 2

 $('input[type=text]').val(''); 

or

 $('input[type=text]').each(function(){ $(this).val(''); }); 

Answer 3

Given your variables here:

 var txtName = $("input#txtName"),txtPrice = $("input#txtPrice"); 

You can directly access such jQuery methods:

 txtName.val(""); txtPrice.val(""); 

Because they are already jQuery objects. There is no need to try wrapping them again in the $() jQuery function.

As far as I can see, the only way the jQuery function accepts an array is when the elements of the array are DOM elements, not jQuery objects, (If it works with jQuery objects that don't seem to be considered in doco, and when I tried it, this did not work for me.) Therefore, given that you know that each of your jQuery objects has only one element (because you are selected by identifier), you can try the following:

 $([txtName[0],txtPrice[0]]).val(""); 

But it's still going to create a new jQuery object that contains both elements, so it seems a bit redundant when you can just do it the way I first mentioned.

(Also note that in your “input # txtName” selector, the “input” part is redundant because you select by id, and the identifier (or should be) is unique on the page.)

EDIT: if you have a really long list of variables and want to save text input in another way, follow these steps:

 $.each([txtName,txtPrice,txtTest1,txtTest2,txtTest3],function(i,v) { v.val(""); }); 

Answer 4

Surprisingly, this worked, $([txtName,txtPrice]).each(function(){this.val("")});