CODEWITHSUNDEEP
javascriptphpjqueryhtml
Victor
Victor

Reputation: 103

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

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?

Upvotes: 2

Views: 91

Answers (3)

Fasani
Fasani

Reputation: 5749

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.

Upvotes: 0

Racil Hilan
Racil Hilan

Reputation: 25341

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) { ... }

Upvotes: 3

Dahico
Dahico

Reputation: 66

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

Upvotes: 1

Related Questions