jQuery提交错误的html表单答案

【问题标题】：jQuery submits the wrong html formjQuery提交错误的html表单
【发布时间】：2015-04-20 22:58:10
【问题描述】：

我有一个 php 脚本，它从数据库中获取项目并允许用户为它们投票，我给每个获取的项目一个（html 表单），其中一个（输入文本字段）和一个（提交按钮）提交单击时输入分数，并且我在同一页面中有一个 jQuery 脚本，该脚本通过该表单将分数插入数据库而不刷新页面，除了脚本有一个之外，一切似乎都工作得很好。

这个脚本只允许提交循环中的第一个（html 表单），而这个第一个（html 表单）会影响循环中不跟随它的项目，如何使每个表单都归因于它的项目？

除此之外，我还希望脚本为提交分数的用户返回通知，以通知他们数据是成功插入还是失败，以及当成功时，我希望用户提交的分数在提交

感谢任何帮助，这是我的代码：

<body>

  <div id="items-wrapper">
    <?php //function where i fetch items/records from database $items=g et_items_function($page_id); if(!$items){ echo 'There are no items in this page yet!'; }else{ ?>
    <div id="item">
      <?php //looping the fetched items/records foreach($items as $item){ $_itemid=$ item[ 'item_id']; $_name=$ item[ 'item_name']; $item_file='path/to/items/name-' .$_name. '-id-'.$_itemid. '.jpg'; ?>
      <ul id="responds">
        <!--i want to append data here-->
      </ul>

      <img src="<?php echo $item_file; ?>" />

      <form action="setItemScore.php?itemPass=<?php echo $_itemid.'&pagePass='.$_pageid; ?>" method="POST">
        <input type="text" name="content_txt" id="contentText" placeholder="Enter score" />
        <button id="FormSubmit">Add Score</button>

        <img src="images/loading.gif" id="LoadingImage" style="display:none" />
      </form>
      <?php } ?>
    </div>
    <?php } ?>
  </div>

  <script type="text/javascript">
    $(document).ready(function() {

      //Ajax request to setItemScore.php
      $("#FormSubmit").click(function(e) {
        e.preventDefault();
        if ($("#contentText").val() === '') {
          alert("Please enter some text!");
          return false;
        }

        $("#FormSubmit").hide();
        $("#LoadingImage").show();

        var myData = 'score_value=' + $("#contentText").val();
        jQuery.ajax({
          type: "POST",
          url: "setItemScore.php?itemPass=<?php echo $_itemid.'&pagePass='.$_pageid; ?>",
          dataType: "text",
          data: myData,
          success: function(response) {
            $("#responds").append(response);
            $("#contentText").val('');
            $("#FormSubmit").show();
            $("#LoadingImage").hide();

          },
          error: function(xhr, ajaxOptions, thrownError) {
            $("#FormSubmit").show();
            $("#LoadingImage").hide();
            alert(thrownError);
          }
        });
      });

    });
  </script>

</body>

【问题讨论】：

两件事：-确保您的 ID 是唯一的-默认情况下，按钮 html 是“type=submit”，所以输入“type=button”
我通过表单操作传递的 id 肯定是独一无二的！！
Id 在页面中必须是唯一的，如果一个元素必须出现多次，则使用该类。所以将 id="FormSubmit" 更改为 class="FormSubmit" 并更改您的侦听器
好点，但问题仍然存在！

标签： php jquery html forms

【解决方案1】：

问题 #1

在提交表单时，您应该始终使用.submit() 方法而不是提交按钮onclick()，原因有两个。 1) 使用inputs 时，您可以点击回车并绕过整个方法提交表单。 2) .submit() 使用允许您获取该表单的子项的表单。

考虑到这一点，我会在您知道通过 ajax 提交的表单中添加一个类名，例如：

<form class="ajax-form" action="setItemScore.php?itemPass=<?php echo $_itemid.'&pagePass='.$_pageid; ?>" method="POST">
...
</form>

那么你可以使用 .onclick() 来代替：

$('.ajax-form').submit(function(e){
...
});

问题 #2

在您的 AJAX 请求中，您使用的是以下行：

url: "setItemScore.php?itemPass=<?php echo $_itemid.'&pagePass='.$_pageid; ?>",

这总是将$_itemid 设置为您上面的foreach() 循环的最后一次迭代，而不是表单中的action。

如果您使用上述问题 #1 中提到的方法，那么您可以简单地使用 forms 操作属性：

url: $(this).prop('action')

而$(this) 是表单。

【讨论】：

你说得对，脚本影响循环中的最后一个，你能给我一个关于小提琴的活生生的例子吗？
如果您查看底部，您应该能够使用表单操作值
我使用了属性 url: $(this).prop('action') 而不是我的代码行，但什么也没发生！
您是否根据我提供的整个解决方案调整了您的代码。仅更改该行不会解决您的问题
我给表单一个名为 ajax-form 的类，然后将 $(".FormSubmit").click(function (e) { 替换为 $('.ajax-form').submit(function (e){, 之后我使用了这个代码行 url: $(this).prop('action')..