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

Groups > comp.lang.javascript > #33994

Re: Issue with two submit button for one form

Show key headers only | View raw

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.

Back to comp.lang.javascript | Previous | Next — Previous in thread | Find similar | Unroll thread

Thread

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

csiph-web