同一个表单的两个提交按钮（具有不同的操作）

Question

I have a html form which requires two submit buttons. Each button when clicked needs to catch the event (form submission) then process form data and move forward or backward in GUI depending in which one of the two buttons was pressed.

I haven't found a way to catch in Javascript which button was pressed in submit event handler. When using click event handler no form is attached to this action. Any advice?

Answer 1

Instead of click event, I prefer using submit event of forms, which includes a submitter property indicating which button was clicked. (Bonus: form get validated before submit fired).

Answer 2

The event object has a property on it called target which is a reference to the DOM node that triggered the event. It should contain the button that was clicked.

Answer 3

Use 2 different names for the 2 buttons and capture the click event. The name would let you identify and work upon the specified button pressed.

Answer 4

As shown in https://jsfiddle.net/0fuq5dhf/1/ :

var form = document.getElementById("frmData");
form.addEventListener("click", function(event) {
    var formData = $( '#' + event.currentTarget.id ).serialize();
  if(event.target.id == "submit1") {
    //Process for first submit button
    console.log(formData);
  } else {
    //process for the 2nd submit button
    console.log(formData);
  }

});

you can get the target to determine which button is clicked and serialize the form data to process based on button clicked.