How to submit single form via AJAX when you have multiple forms from PHP loop

Question

I am trying to submit a form on keyup, sort of a keylogger effect. Here is my attempt -

php loop form -

<form method="post" id="'.$vid.'" class="note-form">
    <textarea id="'.$vid.'" name="quicknote" value="'.$quick_note.'" placeholder="add a quick note" class="quicknote">'.$quick_note.'</textarea>
    <input type="hidden" name="tac" value="'.$vid.'"/>
</form>

$vid is the unique id for each form that im passing from the DB.

JS file -

// Capture keyup from textarea to submit form

$('.quicknote').bind('keyup', function() { 
    var id = this.id;
    var formID = "#"+id;
    $(formID).delay(200).submit();
});
  
$(formID).submit(function(e) {
    var url = "ready-data/submit-note.php"; 
    $.ajax({
        type: "POST",
        url: url,
        data: $(this).serialize(),
        success: function(data) {
            // Do something
        }
   });
   e.preventDefault();
});

I use the same ID for the form and the inputs but the form isnt submitting. I can submit if I use the form class note-form but it submits all forms. I cant make formID a global variable to pass to the ajax function also. What is the correct way to do this?

Swati · Accepted Answer · 2021-02-11 05:48:03Z

Your form id and textarea id are same that's why its causing problem . Instead you can use $(this).closest('form') this will get closest form from textarea then you can submit only that form.

Demo Code :

$('.quicknote').bind('keyup', function() {
  var selector = $(this).closest('form') //get closest form
  $(selector).delay(200).submit(); //submit that.
});

$("form").submit(function(e) {
  console.log("data to send --> " + $(this).serialize())
  var url = "ready-data/submit-note.php";
  $.ajax({
    type: "POST",
    url: url,
    data: $(this).serialize(),
    success: function(data) {
      // Do something
    }
  });
  e.preventDefault();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" class="note-form">
  <textarea id="1" name="quicknote" value="somethings..." placeholder="add a quick note" class="quicknote">somethings..</textarea>
  <input type="hidden" name="tac" value="1" />
</form>
<form method="post" class="note-form">
  <textarea id="2" name="quicknote" value="somethings" placeholder="add a quick note" class="quicknote">somethings...</textarea>
  <input type="hidden" name="tac" value="2" />
</form>

Collectives™ on Stack Overflow

How to submit single form via AJAX when you have multiple forms from PHP loop

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related