Multiple JavasScript submits in the same form

Question

When I click on submit1 and then on submit2 everything is going well, but, when I press Enter Key on 1st input text I go to the second part

When I press Enter Key on the 2nd input text -> 1st JavaScript function executes which causes me trouble.

I don't want to disable Enter Key press, but that he executes the good submit input.

Is there a way to deactivate submit1 after he has been executed?

Or know from which input text Enter Key has been pressed?

HTML:

<div id="1">
    <input type="text" placeholder="name"/>
</div>
<div id="2">
    <input type="submit" value="submit" id="submit1"/>
</div>
<div id="3">
    <input type="text" placeholder="firstname"/>
</div>
<div id="4">
    <input type="submit" value="submit" id="submit2"/>
</div>

CSS:

#3, #4
{
    display: none;
}

JavaScript:

$(document).ready(function() {

  $("#submit1").click(function () { 

      /* Verify data with javascript and send it with Ajax */
      /* if everything is ok display: */

      document.querySelector("#2").style.display = "none";
      document.querySelector("#3").style.display = "block";
      document.querySelector("#4").style.display = "block";
  });

  $("#submit2").click(function () { 

       /* Verify data with javascript and send it with Ajax */
  });

});

according to your shared code, the event handler for the second submit is commented out! — , Aug 20 '14 at 16:20
on the `submit1` handler create a flag that says you've been there already. then when you click it again, just return. — bitoiu, Aug 20 '14 at 16:20
I'm new in javascript, could you show me how to do this "flag"? @user3813256 done ;) — gr3g, Aug 20 '14 at 16:24
also, you ca disable the button by setting the "disabled" attribute to true via JS. — , Aug 20 '14 at 16:25
@user1824508, you should setup a fiddle. It's not clear what you want to happen or what the issue is. I don't see how the code you provided does _anything_ when enter is pressed. Actually, here you go: http://jsfiddle.net/koth/Ltaspofy/ ...it doesn't. — Malk, Aug 20 '14 at 17:21

score 2 · Answer 1 · answered Aug 20 '14 at 16:28

Unless I misunderstood the question - you are simply trying to make sure that the correct event handler gets called based on which button is selected by the user. This will work fine as long as the buttons have unique IDs which they do - and you can associate them with the correct event handler (which it seems like you are doing in the shared code).

Also, you can disable any button using the disabled attribute (set it to true).

to disable document.getElementById("submit1").disabled = true;

to enable: document.getElementById("submit1").disabled = false;

Thank you, I didn't know this. This avoids to submit1 when it already has been submitted, but don't submit2 when Enter key pressed on 2nd input text. — gr3g, Aug 20 '14 at 16:44

Kenny Worden · Answer 2 · 2014-08-20T16:41:10.777

1

If you press ENTER on submit1, submit2 will not be selected unless you hit TAB. Are you doing this?

Anyway, you can do this:

$("#submit1").click(function () { 

      /* Verify data with javascript and send it with Ajax */
      /* if everything is ok display: */

      $("#submit2").focus(); // This will automatically focus the user on the second submit button //
});

This will force the user, the next time he hits ENTER, to submit the submit2 button.

But don't use .submit()... you should use the .submit() function instead of .click(), because I believe .click() only checks for mouse clicks?

$("#submit1").submit(function(){ 
      /* Blah blah blah... */

      $("#submit2").focus(); // This will automatically focus the user on the second submit button //
});

$("#submit2").submit(function(){ 
     /* ... */
});

As other users have said, are submit1 and submit2 in the same <form> tag:

Yes, they were. But you shouldn't have 2 fields in the same <form> tag if you want to submit the data separately.

Do this:

HTML

<form>
    <div id="1">
        <input type="text" placeholder="name"/>
    </div>
    <div id="2">
        <input type="submit" value="submit" id="submit1"/>
    </div>
</form>
<form>
    <div id="3">
        <input type="text" placeholder="firstname"/>
    </div>
    <div id="4">
        <input type="submit" value="submit" id="submit2"/>
    </div>
</form>

JQuery

$("#submit1").submit(function(e){ 
      /* Blah blah blah... */
      e.preventDefault(); // Keeps the user on the same page //
});

$("#submit2").submit(function(e){ 
      /* ... */
      e.preventDefault(); // Keeps the user on the same page //
});

edited Aug 20 '14 at 16:41

answered Aug 20 '14 at 16:22

Kenny Worden

4,335
11
35
62

This way, when I submit1, submit2 is focused. I click on 2nd input text... and this one is focused. So when I hit Enter submit1 is pressed – gr3g Aug 20 '14 at 16:32
@user1824508 are submit1 and submit2 in a `
` tag?
– Kenny Worden Aug 20 '14 at 16:34
Yes, they are both in the same `form`. Shouldn't they? – gr3g Aug 20 '14 at 16:34
@user1824508 No, put them in separate forms. – Kenny Worden Aug 20 '14 at 16:35
is there still a use of using `form` when everything happens with javascript and ajax? – gr3g Aug 20 '14 at 17:00
1

@user1824508 If you use a `button`, you don't need a `form`. Otherwise, I believe you do... (?) – Kenny Worden Aug 20 '14 at 17:03
In fact I can't put multiple forms because I need to check if previous data hasn't changed – gr3g Aug 20 '14 at 17:05
@user1824508 I don't follow. You can check for the value of any textbox, anywhere. If you need to lock in the value, disable the appropriate textbox[es]. – Kenny Worden Aug 20 '14 at 17:09
You're right. I'll also modify with multiply forms as you say. Thanks a lot for your answer! – gr3g Aug 20 '14 at 18:52

score 1 · Accepted Answer · edited May 23 '17 at 12:05

From what I can tell your biggest problem here is that you seem to have two submit buttons in a single form tag. I would seriously recommend against this as it can cause issues like the one you are experiencing. Instead I would change both to buttons and add the submit functionality to JavaScript methods as you are kind of doing now.

Obviously though you would want to link the text boxes to a button then and for that I would take a look at this SO question How to trigger HTML button when you press Enter in textbox?

score 1 · Answer 4 · answered Aug 20 '14 at 16:32

1

<input type="submit"> is a special control. It will cause the form to submit if the form has focus and the enter button is pressed. When using this you should make use of event.preventDefault() to cancel that behavior when binding to the click event. I suggest using <button type="button"><button> instead.

answered Aug 20 '14 at 16:32

Malk

11,855
4
33
32

+1; `` will redirect the user to the `action` attribute specified in the `
` tag.
– Kenny Worden Aug 20 '14 at 16:33
@Kenny so I should use button? – gr3g Aug 20 '14 at 16:55
@user1824508 You can use either. My answer shows you how to do it using `event.preventDefault()`. – Kenny Worden Aug 20 '14 at 16:59

score 0 · Answer 5 · answered Aug 20 '14 at 17:30

I let it work like that:
Why should I have troubles with one form? IE < 6?

HTML:

<form>
<div id="1">
    <input type="text" id="text1"/>
</div>
<div id="2">
    <input type="submit" value="submit" id="submit1"/>
</div>
<div id="3">
    <input type="text" id="text2"/>
</div>
<div id="4">
    <input type="submit" value="submit" id="submit2"/>
</div>
</form>

CSS:

#3, #4
{
    display: none;
}

JAVASCRIPT:

$(document).ready(function() {

  $('#text2').keypress(function(e){
      if(e.keyCode==13)
      $('#submit2').click();
    });

  $("#submit1").click(function () { 

      /* Verify data with javascript and send it with Ajax */
      /* if everything is ok display: */

      document.querySelector("#2").style.display = "none";
      document.querySelector("#3").style.display = "block";
      document.querySelector("#4").style.display = "block";
      document.querySelector("#submit1").disabled = true;
  });

  $("#submit2").click(function () { 

       /* Verify data with javascript and send it with Ajax */
  });

});

See my answer. You aren't preventing the form submission still. — Malk, Aug 20 '14 at 17:35

Multiple JavasScript submits in the same form

5 Answers5