What is the jQuery equivalent to document.forms[0].elements[i].value;?

Question

What is the jquery equivalent to: document.forms[0].elements[i].value;?

I don't know how to travel through a form and its elements in jQuery and would like to know how to do it.

• Nick Craver: Can you post an example of your markup, and which values you want to pull out?
• karim79: Read about how to select stuff here: api.jquery.com/category/selectors and about how to traverse here: api.jquery.com/category/traversing.
• Ian: I wrote a basic form validation script in javascript, and I'm trying to transition it over to JQUERY. It's a for loop that searches through all of the elements in the from checking to make sure that all the values have changed form the default (ie. first name last name) to something real. The code snippet I posted is attached to a variable that saves the current input's value and checks it against the list of default values. thisVal = document.forms[0].elements[i].value

Answer 1

The usual translation is the :input selector:

$("form:first :input").each(function() {
 alert($(this).val()); //alerts the value
});

The :first is because your example pulls the first <form>, if there's only one or you want all input elements, just take the :first off. The :input selector works for <input>, <select>, <textarea>...all the elements you typically care about here.

However, if we knew exactly what your goal is, there's probably a very simple way to achieve it. If you can post more info, like the HTML and what values you want to extract (or do something else with).

• Ian: Thanks for the answer. I wrote a basic form validation script in javascript, and I'm trying to transition it over to JQUERY. It's a for loop that searches through all of the elements in the form checking to make sure that all the values have changed from the default (ie. first name last name) to something real. The code snippet I posted is attached to a variable that saves the current input's value and checks it against the list of default values. thisVal = document.forms[0].elements[i].value
• Ian: I also do have 2 forms on my page. My current working version has <form action="..." onsubmit='validate("formName");' ..> to validate that specific form for thisVal = document.forms[formName].elements[i].value

Answer 2

Well, translated literally, it'd be:

$('form:first *:nth-child(i)').val()

But jQuery makes it easy to grab elements by other manners such as ID or CSS selector. It'd be easier to maintain if you did something like:

$('form#id input.name').val()

Answer 3

$("#formid input").each(function(){
 alert($(this).attr("value"))
}) 

• Gert Grenander: This would just grab input fields, not select or textarea.

Answer 4

This will give you all elements under the form. Including non form elements:

$("#[form id]").find()

Then you can use an each function to traverse all the children. Or you can use the input selector to only return the form elements:

$("#[form id] :input")

• Quentin: Form controls usually aren't children of the form
• spinon: @David You're right. They tend to be nested, though not always. I guess I should have used find instead or just list the type of controls that we want to return. I will at least change to use find instead.

Answer 5

I'm not exactly sure what you're trying to accomplish, but you should be able to do something like this:

$('form:first').children(':first').val();

This will get the value of the first child node within the first <form> tag in the DOM.

• Nick Craver: This would return nothing...you're selecting a <form> tag :)
• Nick Craver: This is still incorrect, not my downvote...but I don't think your thinking of the selectors correctly here, this would return the first element, the example is an elements[i], which translates pretty closely to: $('form:first :input').eq(i).val();
• Matthew J Morrison: Yup, @Nick, right again. I guess I was just thinking that he was trying to get the first child. Thanks!