Issue with two submit button for one form

[justaguy]

HTML FORM looks like below:

<form id="biz" name="biz" action="CGI.script" method="post" onSubmit="console.log('submit button, not save button, clicked'); if (document.getElementById('field1').value=='$'){alert('Liability is required');return false} else if (document.getElementById('field2').value=='$'){alert('Fee is required'); return false};">

form field 1
form field 2
form field n
...
lots of fields...


<input type="submit" id="save-and-continue" name="saveandcontinue" value="Save & Continue" onclick="saveData(this.form);"> &nbsp;&nbsp;
<span id="inform" style="color:red"></span> &nbsp;&nbsp;

<input type="submit" id="saveform" name="saveform" value="Save & Exit">

</form>


Javascript looks like this:
<script>

function saveData() {
// use jQuery to send form save data via ajax call
...
// it works fine
return false
}

</script>


Intention:
As the names suggest, "Save & Continue" is supposed to save the data and the form stays on while "Save & Exit" is supposed to send the form to be processed (and we leave this page).

Use Scenario and Problem Statement:
If I load the page and enter some data and click on the "Save & Exit", fine, it works as expected.
But if I enter/edit data, click on "Save & Continue", and then, after more data entry/editing click on "Save & Exit", it triggers the "Save & Continue" event instead of submitting the form and leave the page.

How can we resolve it?

Thanks.

[Osmo Saarikumpu]

On 12/09/2017 01:37, justaguy wrote:
> As the names suggest, "Save & Continue" is supposed to save the data and the form stays on while "Save & Exit" is supposed to send the form to be processed (and we leave this page).

> <input type="submit" id="save-and-continue" ...

What happens if you change the above to:

<input type="button" id="save-and-continue" ...

?

See:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button

--
Best wishes, Osmo

[JJ]

On Mon, 11 Sep 2017 15:37:09 -0700 (PDT), justaguy wrote:
> But if I enter/edit data, click on "Save & Continue", and then, after more
> data entry/editing click on "Save & Exit", it triggers the "Save &
> Continue" event instead of submitting the form and leave the page.

That's not possible. Both buttons will always submit the form (and leave the
page) as long as you don't get any "xyz is required" alert message. While
`saveData()` function does return `false`, the returned value is never used
by the caller.

[justaguy]

Yeah, I then set up a tracker to see which button was clicked and then proceed or stop. Solved two days ago, almost forgot this thread. Thanks.

[Thomas 'PointedEars' Lahn]

JJ Abrams wrote:

> On Mon, 11 Sep 2017 15:37:09 -0700 (PDT), justaguy wrote:
>> But if I enter/edit data, click on "Save & Continue", and then, after
>> more data entry/editing click on "Save & Exit", it triggers the "Save &
>> Continue" event instead of submitting the form and leave the page.
>
> That's not possible.

Yes, it is.

> Both buttons will always submit the form (and leave the page) as long as
> you don't get any "xyz is required" alert message. While `saveData()`
> function does return `false`, the returned value is never used by the
> caller.

“return” can be used in event-handler attribute values as well, and
returning “false” there cancels the “click” event. Also, events can be
canceled in event listeners by calling their preventDefault() and, if
suitable, stopPropagation() methods.

To be sure, a value can be set on “click” to indicate which submit button
was selected before the form’s “submit” event is fired, and that value can
be used in the “onsubmit” event-handler attribute of the form to cancel the
“submit” event by returning “false”, or in the “submit” event listener by
calling Event::preventDefault(), and perhaps Event::stopPropagation() too,
depending on the selected button. If the form is submitted by keyboard when
a control that is not a submit button has the focus, the first submit button
in the form in document tree order should be the selected one; “tabindex”
apparently makes no difference.

Using event-handler attributes:

<script type="text/javascript">
var me = {
submitId: "submit2",

formSubmit: function (form) {
if (me.buttonId != this.submitId) return false;
return true;
},

submitClick: function (button) {
me.buttonId = button.id;
return (button.id == this.submitId);
}
};
</script>

<form … onsubmit="return me.formSubmit(this)">
<input name="test">
<input type="submit" id="submit1" value="Submit 1"
onclick="return me.submitClick(this)">
<input type="submit" id="submit2" value="Submit 1"
onclick="return me.submitClick(this)">
</form>

--
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

[Thomas 'PointedEars' Lahn]

JJ Abrams wrote:

> On Mon, 11 Sep 2017 15:37:09 -0700 (PDT), justaguy wrote:
>> But if I enter/edit data, click on "Save & Continue", and then, after
>> more data entry/editing click on "Save & Exit", it triggers the "Save &
>> Continue" event instead of submitting the form and leave the page.
>
> That's not possible.

Yes, it is.

> Both buttons will always submit the form (and leave the page) as long as
> you don't get any "xyz is required" alert message. While `saveData()`
> function does return `false`, the returned value is never used by the
> caller.

“return” can be used in event-handler attribute values as well, and
returning “false” there cancels the “click” event. Also, events can be
canceled in event listeners by calling their preventDefault() and, if
suitable, stopPropagation() methods.

To be sure, a value can be set on “click” to indicate which submit button
was selected before the form’s “submit” event is fired, and that value can
be used in the “onsubmit” event-handler attribute of the form to cancel the
“submit” event by returning “false”, or in the “submit” event listener by
calling Event::preventDefault(), and perhaps Event::stopPropagation() too,
depending on the selected button. If the form is submitted by keyboard when
a control that is not a submit button has the focus, the first submit button
in the form in document tree order should be the selected one; “tabindex”
apparently makes no difference.

Using event-handler attributes:

<script type="text/javascript">
var me = {
submitId: "submit2",

formSubmit: function (form) {

if (this.buttonId != this.submitId) return false;

return true;
},

submitClick: function (button) {

this.buttonId = button.id;