jquery ajax submit 2 diffrent or many form

Question

i'm new in jquery ajax and i need some help.

This is my basic html.

    <form id="replayForm1">
        msg_id:
        <input type="text" name="msg_id">
        <br>
        msg_replay
        <input type="text" name="msg_replay">
        <button onClick="getmsg(1)">Click Me</button>
    </form>
    <form id="replayForm2">
        msg_id:
        <input type="text" name="msg_id">
        <br>
        msg_replay
        <input type="text" name="msg_replay">
        <button onClick="getmsg(2)">Click Me</button>
    </form>

This is my jquery:

<script>
    function getmsg(formID) {
        var formName = '#replayForm' + formID;
        $(formName).submit(function (e) { 
            e.preventDefault();
            var msg_id = $('input[name=msg_id]').val();
            var msg_replay = $('input[name=msg_replay]').val();
            alert(msg_id + msg_replay);
        });
    }
 </script>

My problem is, when i fill the second form i get empty value. First form don't have problem it return value and don't have problem. How to deal this problem? i try make this form unique to easy submit form just using 1 function.

Welcome to Stack Overflow! Stack Overflow is not a discussion forum, it is a Question and Answer site where you can ask a **specific** programming question that **can be answered** rather than discussed. Please read [How do I ask a good question?](https://stackoverflow.com/help/how-to-ask) and [What topics can I ask about here?](https://stackoverflow.com/help/on-topic) and then edit your question to conform with the site guidelines. Off-topic questions such as this one are routinely closed, but if edited to ask an *answerable* question, can be re-opened again. Thanks. — NightOwl888, Mar 04 '18 at 03:46

Lawrence Cherone · Accepted Answer · 2018-03-04T05:04:45.990

2

jQuery will look for the first instance which it finds of the inputs, so use the formName to match the correct ones.

You should also remove the previous event or you will get multiple alerts after the second click on the same button.

function getmsg(formID) {
  var formName = '#replayForm' + formID;
  $(formName).off('submit').on('submit', function (e) { 
    e.preventDefault();
    var msg_id = $(formName + ' input[name=msg_id]').val();
    var msg_replay = $(formName + ' input[name=msg_replay]').val();
    alert(msg_id + msg_replay);
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="replayForm1">
  msg_id:
  <input type="text" name="msg_id">
  <br>
  msg_replay
  <input type="text" name="msg_replay">
  <button onClick="getmsg(1)">Click Me</button>
</form>
<form id="replayForm2">
  msg_id:
  <input type="text" name="msg_id">
  <br>
  msg_replay
  <input type="text" name="msg_replay">
  <button onClick="getmsg(2)">Click Me</button>
</form>

edited Mar 04 '18 at 05:04

answered Mar 04 '18 at 03:47

Lawrence Cherone

46,049
7
62
106

what is the different between `.off` or **without** `.off`, its still work if i don't put `.off` – Jairon Landa Mar 04 '18 at 04:45
1

Click the submit **more than once** you will see it assigns multiple event handlers to it, so what happens is you have multiple alerts after 2 clicks. – Lawrence Cherone Mar 04 '18 at 05:03
See below for that effect ;p – Lawrence Cherone Mar 04 '18 at 05:13
Hi, I'm back and I have a question, it is possible to make it without using a `function / onClick`? – Jairon Landa Jul 21 '18 at 04:14
@JaironLanda Sure, a function and adding an inline onClick is probably the worst way to do it. You need to open another question though. – Lawrence Cherone Jul 21 '18 at 06:08
Hi @LawrenceCherone, I think I found the answer. Link:[https://stackoverflow.com/questions/19182199/to-submit-a-form-among-multiple-forms-using-jquery-ajax] – Jairon Landa Jul 23 '18 at 01:39

score 1 · Answer 2 · answered Mar 04 '18 at 03:54

In both the case the name is same. Change the name & pass those values to getmsg function

function getmsg(formID, inputName, msgReplyName) {
  var formName = '#replayForm' + formID;
  $(formName).submit(function(e) {
    e.preventDefault();
    var msg_id = $('input[name=' + inputName + ']').val();
    var msg_replay = $('input[name=' + msgReplyName + ']').val();
    alert(msg_id + ' ' + msg_replay);
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="replayForm1">
  msg_id:
  <input type="text" name="msg_id">
  <br> msg_replay
  <input type="text" name="msg_replay">
  <button onClick="getmsg(1,'msg_id','msg_replay')">Click Me</button>
</form>
<form id="replayForm2">
  msg_id:
  <input type="text" name="msg_id_2">
  <br> msg_replay
  <input type="text" name="msg_replay_2">
  <button onClick="getmsg(2,'msg_id_2','msg_replay_2')">Click Me</button>
</form>

If your going to change it, `getmsg(this)` would be better. – Lawrence Cherone Mar 04 '18 at 03:55 — Lawrence Cherone, Mar 04 '18 at 03:55

jquery ajax submit 2 diffrent or many form

2 Answers2