JavaScript表单提交不会发送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.

Answer 1

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.