Use jQuery to submit 1 Ajax form on page with several unique forms

Question

I have a Bootstrap page that is dynamically created using PHP, and on the page there are 25+ forms that are used to edit records.

The form submits to the server using jQuery Ajax script which works as expected on the first form, but when the second form is edited and submitted it submits form 1 and 2, and when I go to form 3 it will submit forms 1, 2, and 3 Here is the HTML:

<tr id="375987">
  <td width="20%">audio controls to play wav file</td>
  <td width="80%">
    <div class="form-group">
      <form id="375987">
        <textarea class="form-control" id="rec_txt" name="rec_txt" rows="4">There is text from the Database</textarea>
        <input type="text" id="event_num" name="event_num" value="" />

        <button type="submit" id="correct_stt" class="btn btn-outline-success my-2 my-sm-0" OnClick="update_stt()">Edit</button>
        <input type="hidden" id="rec_id" name="rec_id" value="375987" />
        <input type="hidden" name="act" value="correct_stt" />
      </form>
    </div>
  </td>
  <td>
    <a href="#" class="btn btn-primary a-btn-slide-text" onClick="hiderow('375987')">
      <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
      <span><strong>Hide</strong></span>
    </a>
  </td>
</tr>

<!-- 25+ forms     ..... -->

And here is the Java:

function update_stt() {
  var url = "function_ajax.php"; // the script where you handle the form input.
  $('form[id]').on('submit', function(e) {
    $.ajax({
      type: 'POST',
      url: url,
      data: $(this).serialize(),
      success: function(data) {
        console.log('Submission was successful.');
        console.log(data);
        $(e.target).closest('tr').children('td,th').css('background-color', '#000');
      },
      error: function(data) {
        console.log('An error occurred.');
        console.log(data);
      },
    });
    e.preventDefault();
  });
}

How can I identify only the id of the form that I want submitted, or submit only the form on that row?

A submit button will trigger the <form>s action, so if you also call a function on that button, it maybe gets a little unpredictable. try type="button" instead of type="submit" or do not call an extra function on the button... — Guntram
– Guntram, Commented Mar 22, 2018 at 14:44
Please note: You have too many duplicated id on your html elements. All of those need to be unique if you wish to use them for anything like css defines or js actions (or use .class defines instead). — IncredibleHat
– IncredibleHat, Commented Mar 22, 2018 at 19:51

IncredibleHat · Accepted Answer · 2018-03-22 19:50:32Z

3

You use a submit button which will automatically submit the form, but you also add a click event to it using the onclick attribute, so it will execute the associated function and submit the form. All that is unnecessarily complicated.

Remove the onclick attribute on your button:

<button type="submit" id="correct_stt" class="btn btn-outline-success my-2 my-sm-0">Edit</button>

And change your code to:

$('#375987').on('submit', function(e) {
    var url = "function_ajax.php"; // the script where you handle the form input.
    $.ajax({
      type: 'POST',
      url: url,
      data: $(this).serialize(),
      success: function(data) {
        console.log('Submission was successful.');
        console.log(data);
        $(e.target).closest('tr').children('td,th').css('background-color', '#000');
      },
      error: function(data) {
        console.log('An error occurred.');
        console.log(data);
      },
    });
    e.preventDefault();
});

If you want all your forms to use the same function, then simply replace the selector $('#375987') with $('form'):

$('form').on('submit', function(e) { ... }

If you only want to select some forms, not all, then you can give them the same class and then select them by that class, like <form class="ajaxed">:

$('form.ajaxed').on('submit', function(e) { ... }

edited Mar 22, 2018 at 19:50

IncredibleHat

4,1024 gold badges18 silver badges29 bronze badges

answered Mar 22, 2018 at 14:49

Racil Hilan

25.4k13 gold badges56 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Victor Over a year ago

Sorry, but maybe it wasn't clear in my HTML, but there are 25+ forms, and the id is different for each. If I understand what you have suggested only the form with the id of 375987 would trigger the ajax submit, or am I missing something.

Racil Hilan Over a year ago

Yes, but if you want all your forms to use the same function, then simply replace the selector $('#375987') with whatever selects all the forms. For example $('form'). If you don't want to select all forms, then you can give them the same class and then select them by that class.

Dahico · Accepted Answer · 2018-03-22 14:47:10Z

1

You can give id to forms and use

$('#formid').submit();

in your case

$('#375987').submit();

But that id is used by your tr div too. You should consider using id for form only

answered Mar 22, 2018 at 14:47

Dahico

662 silver badges12 bronze badges

Comments

marc_s · Accepted Answer · 2018-03-22 22:05:27Z

0

It's because each time you click the button and call update_stt() you are attaching again the .on() listener.

This is why you end up with more and more submit requests.

$('form[id]').on('submit', function (e) {

This line of code should only be called once not on every click.

ALSO: you said you build these on the backend so you could pass the ID straight to the function:

update_stt(375987)

Then you can use this:

function update_stt(passedNumber) { ...

Then you can use the id number in the call

Your mixing jQuery and vanilla JS a lot here, might make sense to try a larger refactor.

edited Mar 22, 2018 at 22:05

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Mar 22, 2018 at 15:00

Fasani

5,7691 gold badge25 silver badges24 bronze badges

Collectives™ on Stack Overflow

Use jQuery to submit 1 Ajax form on page with several unique forms

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related