the situation I'm struggling with is that there are more forms on the page that looks like this (the hiddenId is different in each form):

<form method="post">
<input type="hidden" name="hiddenId" value="111222">
<input type="submit" value="Proceed">
</form>

<form method="post">
<input type="hidden" name="hiddenId" value="111333">
<input type="submit" value="Proceed">
</form>

How do I submit with javascript (I don't mind using jQuery) a specific form that includes hiddenId of a wished value? Thank you for your help!

the situation I'm struggling with is that there are more forms on the page that looks like this (the hiddenId is different in each form):

<form method="post">
<input type="hidden" name="hiddenId" value="111222">
<input type="submit" value="Proceed">
</form>

<form method="post">
<input type="hidden" name="hiddenId" value="111333">
<input type="submit" value="Proceed">
</form>

How do I submit with javascript (I don't mind using jQuery) a specific form that includes hiddenId of a wished value? Thank you for your help!

• javascript
• jquery
• forms

• 1 why can't you give the forms a class or id? – james Commented Jan 12, 2012 at 21:40
• name is deprecated, you should use id. never use the same id for more than one element. – Travis J Commented Jan 12, 2012 at 21:44

5 Answers 5

Something along these lines should get you started:

var inputs = document.getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++) {
    if(inputs[i].type === "hidden" && inputs[i].value === "111333") {
        inputs[i].form.submit();
    } 
}

If you can use jQuery:

$("input[type='hidden'][value='something']").closest("form").submit();

document.forms is an array. document.forms[0] is the first one.

Elements work the same way:

document.forms[0].elements[0].value etc.

You can loop through until you have the value then submit the current form:

document.forms[x].submit()

Access all of the forms using var allForms = document.forms;

loop through them as needed to access inputs

You could use document.querySelector or one of the various JavaScript libraries that emulate it on older browsers to find the hidden input element, then use its form property to access the form and invoke the submit method.

You can add an id to the form and submit button:

<form method="post" id="form1">
<input type="hidden" name="hiddenId" value="111222">
<input type="submit" value="Proceed" id="submit1">
</form>

<form method="post" id="form2">
<input type="hidden" name="hiddenId" value="111333">
<input type="submit" value="Proceed" id="submit2">
</form>

Then use jQuery to submit the form:

$("#submit1").click(function() {
    form1.submit();
}
$("#submit2").click(function() {
    form2.submit();
}