Question

我有一个输出音符的每个循环以及与音符共享关系的upvotes / downvotes，它工作正常但我可以动态重新创建很多这些形式，我可以使用ajax发布的唯一方法一个特定的表单是通过foreach循环Ajax脚本和表单，以便ajax脚本中表单的id是唯一的。

我想从Ajax脚本中删除膨胀，只使用一个请求发布数据，但我无法弄清楚如何在不使用唯一ID的情况下发布特定表单。

@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

我已经尝试了一下这个

的内容

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

但是，只需点击一个按钮即可在页面上发布所有表单，我尝试为表单添加一个独特的onclick事件，但我得到了相同的结果。任何指导将不胜感激

Answer 1

根据您的陈述： - But that just posts all the forms on the page when clicking a single button

我假设您只想发送点击提交按钮的表单。如下所示： -

1.而不是$('form').on('submit', function (e) {使用$('.vote-btn').on('click', function (e) {

2.而不是$(this).serialize(),使用$(this).parent('form').serialize(),

所以代码必须是： -

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

Answer 2

我认为你的问题是你在一个页面中有多个表单，并且你想同时发送所有表单，但你真的只发送一个;您点击的提交按钮之一。

您的代码没问题但jquery on submit function仅在您单击一个表单中的提交按钮时触发。并且jquery 仅适用于该表单，它不会同时发送所有表单。

尝试只创建一个表单并将{{$formRand}}添加到输入中，如下例所示：

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

使用foreach通过Ajax发布动态表单

2 个答案: