Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #33973 > unrolled thread

Issue with two submit button for one form

Back to article view | Back to comp.lang.javascript

Contents

  Issue with two submit button for one form justaguy <lichunshen84@gmail.com> - 2017-09-11 15:37 -0700
    Re: Issue with two submit button for one form Osmo Saarikumpu <osmo@weppipakki.com> - 2017-09-12 07:47 +0300
    Re: Issue with two submit button for one form JJ <jj4public@vfemail.net> - 2017-09-12 18:23 +0700
      Re: Issue with two submit button for one form justaguy <lichunshen84@gmail.com> - 2017-09-14 15:30 -0700
      Re: Issue with two submit button for one form Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2017-09-19 10:55 +0200

#33973 — Issue with two submit button for one form

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.

[toc] | [next] | [standalone]

#33975

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

[toc] | [prev] | [next] | [standalone]

#33976

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.

[toc] | [prev] | [next] | [standalone]

#33987

On Tuesday, September 12, 2017 at 7:23:26 AM UTC-4, JJ 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. 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.

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.

[toc] | [prev] | [next] | [standalone]

#33994

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;
        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.

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web