CODEWITHSUNDEEP
javascriptjqueryajaxforms
stepho
stepho

Reputation: 93

Posting via Ajax with dynamic forms using foreach

I have a for each loop that outputs notes along with upvotes/downvotes that share a relationship with the notes, it works fine but I can have a lot of these forms being dynamically recreated, The only way I can use ajax to post a specific form is by foreach looping the Ajax script along with the form, so that the id's of the form in the ajax script are unique.

I'd like to remove the bloat from the Ajax script and just use a single request to post the data, but I can't figure out how to post a specific form without using unique ID's.

@foreach ($getNotesAll as $getnotes)

<p class="notes">{{$getnotes->body}}</p>

<?php $formRand = rand(); ?>

<form class="vote-form" id="upvote-form{{$formRand}}" method="post" 
action="/notes/vote">

<button type="submit" form="upvote-form{{$formRand}}" id="vote-up{{$formRand}}" 
class="vote-btn upvote"></button>

  <input type="hidden" name="type" value="1">
  <input type="hidden" name="voteid" value="{{$_SESSION['user_id']}}">
  <input type="hidden" name="noteUniqueID" value="{{$getnotes->noteUnique}}">
  <input type="hidden" name="noteid" value="{{$getnotes->user_id}}">

  {{csrf_field()}}
  </form>



  <form class="vote-form" id="downvote-form{{$formRand}}" method="post" 
  action="/notes/vote">

  <button type="submit" form="downvote-form{{$formRand}}" id="vote-
  down{{$formRand}}" class="vote-btn"></button> 

  <input type="hidden" name="type" value="0">
  <input type="hidden" name="voteid" value="{{$_SESSION['user_id']}}">
  <input type="hidden" name="noteid" value="{{$getnotes->user_id}}">
  <input type="hidden" name="noteUniqueID" value="{{$getnotes->noteUnique}}">
  {{csrf_field()}}
  </form> 



 <?php

  echo "<script>
   $( '#downvote-form". $formRand . "' ).on( 'submit', function(e) {
    e.preventDefault(); 
     $.ajax({
       type: 'POST',
       url: '/notes/vote',
       data: $(this).serialize(),
       success: function( msg ) {

      }
   });
 });


  $( '#upvote-form".$formRand."' ).on( 'submit', function(e) {
    e.preventDefault(); 
    $.ajax({
       type: 'POST',
       url: '/notes/vote',
       data: $(this).serialize(),
       success: function( msg ) {";

     }
   });
  });";  ?>



 @endforeach

I've tried something along the lines of this 

$(function () {
$('form').on('submit', function (e) {
    $.ajax({
        type: 'post',
        url: '/notes/vote',
        data: $(this).serialize(),
        success: function () {
            location.reload();
        }
    });
    e.preventDefault();
  });
 });

But that just posts all the forms on the page when clicking a single button, I've tried adding a unique onclick event for the forms but I've had the same result. Any guidance would be appreciated

Upvotes: 1

Views: 452

Answers (2)

Death-is-the-real-truth
Death-is-the-real-truth

Reputation: 72269

Based on your statement:- But that just posts all the forms on the page when clicking a single button

I assume that you want to send only that form whose submit button clicked.So do like below:-

1.Instead of $('form').on('submit', function (e) { Use $('.vote-btn').on('click', function (e) {

2.Instead of $(this).serialize(), Use $(this).parent('form').serialize(),

So code need to be:-

$(function () {
    $('.vote-btn').on('click', function (e) {
        e.preventDefault();
        $.ajax({
            type: 'post',
            url: '/notes/vote',
            data: $(this).parent('form').serialize(),
            success: function () {
                location.reload();
            }
        });
    });
});

Upvotes: 1

NetVicious
NetVicious

Reputation: 4045

I think your problem it's you have several forms in one page, and you want to send all of them at the same time, but you're really sending only one; the one of the submit button you're clicking on.

Your code it's fine but the jquery on submit function fires only when you click the submit button in one form. And that jquery only works with that form, it doesn't sends all the forms at the same time.

Try creating only one form and adding the {{$formRand}} to the inputs like this example:

<input type="hidden" name="type{{$formRand}}" value="1">

Upvotes: 0

Related Questions