CODEWITHSUNDEEP
jqueryjquery-selectors
user1928896
user1928896

Reputation: 673

Getting the form fields without jquery selectors

For example:

<form id ="f1">
    <input type="text" id="quantity" />
</form>

There is obviously some overhead associated with jquery selectors. So, once I got the form using a selector, I don't want to use another selector to get its field as it is coded below:

var $form = $('#f1');
var $field = $('#f1 #quantity');

Is there an alternative to get field-quantity without using selectors? Is there something like:

var $qty = $form.quantity;

Upvotes: 1

Views: 2236

Answers (3)

user3681587
user3681587

Reputation: 566

You can use "find()" to select the element you want inside the form:

<form>
    <input type="text" id="quantity">
</form>

$(document).ready(function(){
   var $f = $("form");
   var $inp = $f.find("#quantity").val("hi");
});

Here is the jsfiddle: http://jsfiddle.net/vcpfygpt/2/

The form is selected and cached in the variable $f. The method 'find()' is used to find the input element with the #quantity id and we use the val() method set a value to the input.

Upvotes: 0

Gohn67
Gohn67

Reputation: 10638

You can do something like this (Also here is a fiddle to test on: http://jsfiddle.net/zcvv1xwq/3/):

Example HTML:

<form id="test-form">
    <input name="test1" value="1" />
    <input name="test2" value="2" />
    <textarea name="test3">3</textarea>
    <select name="test4">
        <option value=""></option>        
        <option value="4" selected="selected">4</option>
        <option value="Other">Other</option>        
    </select>    
    <input name="test5" type="checkbox" value="5" checked="checked" /> Checkbox 5    
</form>

Example with jQuery (Basically the same as the javascript version):

// Get the form element by its ID using jQuery selector.
form = $('#test-form')[0];

// Now we can access the inputs of the form by the `name` HTML attribute.
// For example the first input is named `test1`. Then we can access its value using the `value` attribute
console.log(form.test1.value);

// We can do the same for the second input
console.log(form.test2.value);

// Here is an example using a Textarea.
console.log(form.test3.value);

// Example with select
console.log(form.test4.value);

// Example with checkbox
if (form.test5.checked) {
    console.log(form.test5.value);
}

// Example of looping through elements in form
for (var i = 0; i < form.length; ++i) {
    console.log(form[i]);
}

Example javascript:

// Get the form element by its ID
form = document.getElementById('test-form');

// Now we can access the inputs of the form by the `name` HTML attribute.
// For example the first input is named `test1`. Then we can access its value using the `value` attribute
console.log(form.test1.value);

// We can do the same for the second input
console.log(form.test2.value);

// Here is an example using a Textarea.
console.log(form.test3.value);

// Example with select
console.log(form.test4.value);

// Example with checkbox
if (form.test5.checked) {
    console.log(form.test5.value);
}

// Example of looping through elements in form
for (var i = 0; i < form.length; ++i) {
    console.log(form[i]);
}

Upvotes: 3

j08691
j08691

Reputation: 207901

Use .find():

var $field = $form.find('input ')

However, since your input has an ID (and we all know IDs must be unique) you can select the input via simply:

var $field = $('#quantity');

Upvotes: 0

Related Questions