JavaScript form submission doesn't send value of input type=submit

Question

I'm using jQuery to, in some cases, automatically submit a form. Here's my code:

$("form [data-autosubmit]").closest("form").submit();

It works, however it doesn't send the name and value of the input type=submit button.

To elaborate, the following code:

<form method="POST">
<input type="text" name="input" value="text they entered">
<input type="submit" name="submit" value="Submit">
</form>

would send the following POSTdata when submitted by the user:

input: text they entered
submit: Submit

However when the form is submitted by JavaScript, only this POSTdata is sent:

input: text they entered

My PHP scripts rely on the presence of a "submit" value in the POSTdata.

I was thinking I could do:

$("form [data-autosubmit]").closest("form").find("input[type=submit]").click();

But it seems to defy logic, when there is a submit event on the form intended for this purpose.

that sounds odd...you're right it should be showing up. i wonder if it's a browser issue. As a quick fix, I would simply just add an <input type="hidden" name="nameitwhatyouwant" value="already_submitted" /> in the form and then look for that instead. — rnirnber
– rnirnber, Commented Mar 8, 2013 at 19:16

Ben D · Accepted Answer · 2013-03-08 19:20:06Z

3

HTML forms were built to support multiple submit inputs (so the same form could have an "Insert" and "Edit" button, for instance). Therefore the form relies on the click to actually register the chosen field in the _POST submission. Basically, HTML allows a form that looks like this:

<form [...]>
  <input type="submit" name="Insert" value="Insert">
  <input type="submit" name="Update" value="Update">
</form>

to be handled like this on the server-side:

if(!empty($_REQUEST['Update'])){
  //Run update logic here..
}
elseif(!empty($_REQUEST['Insert'])){
  //Run insert logic here...
}

If the Javascript submit() function registered both buttons in the POST array it would break applications using this valid markup/logic, so they default to omitting submit inputs.

So your Javascript workaround (triggering a click on the submit button rather than just submit()ing the form) is the correct approach.

edited Mar 8, 2013 at 19:20

answered Mar 8, 2013 at 19:15

Ben D

14.6k3 gold badges47 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1318194 Over a year ago

OK I guess I'll have to use the click() method then. Thanks for your explanation.

Collectives™ on Stack Overflow

JavaScript form submission doesn't send value of input type=submit

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related