Php jQuery提交了错误的html表单_Php_Jquery_Html_Forms

Php jQuery提交了错误的html表单

php jquery html forms

Php jQuery提交了错误的html表单,php,jquery,html,forms,Php,Jquery,Html,Forms,我有一个php脚本，可以从数据库中获取项目并允许用户投票，我给每个获取的项目一个（html表单），其中一个（输入文本字段）和一个（提交按钮）在单击时提交输入的分数，我在同一个页面中有一个jQuery脚本，它通过该表单将分数插入数据库，而不刷新页面，除了脚本有一个之外，一切似乎都很正常这个脚本只允许循环中的第一个（html表单）提交，而这个第一个（html表单）影响循环中不跟随它的项目，如何使每个表单都归属于它的项目除此之外，我还希望脚本为提交分数的用户返回一个通知，通知他们数据插入是否成功，

我有一个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>




" />
问题#1
提交表单时，应始终使用.submit（）
方法，而不是使用提交按钮onclick（）
，原因有两个。1）使用输入时，可以点击enter键，绕过整个方法提交表单。2）.submit（）
使用表单，允许您获取该表单的子项
考虑到这一点，我将向通过ajax提交的表单添加一个类名，如：
<form class="ajax-form" action="setItemScore.php?itemPass=<?php echo $_itemid.'&pagePass='.$_pageid; ?>" method="POST">
...
</form>

第2期
在AJAX请求中，您使用以下行：
url:“setItemScore.php？itemPass=”，

这总是将$\u itemid
设置为上述foreach（）
循环中的最后一次迭代，而不是表单中的操作
如果您使用问题1中提到的方法，那么您可以简单地使用forms action属性：
url:$（this.prop（'action'）

然而，$（这）
是表单。2件事：-确保您的Id是唯一的-默认情况下按钮html是“type=submit”，因此放置“type=button”我通过表单操作传递的Id是唯一的！！Id在页面中必须是唯一的，如果元素必须多次出现，请使用类。因此，通过class=“FormSubmit”更改Id=“FormSubmit”“改变你的听众的观点很好，但问题仍然存在！你是对的，脚本影响循环中的最后一个，你能给我一个关于fiddle的实例吗？如果你看底部，你应该可以使用表单操作值我使用了属性url:$（this.prop（'action'）而不是我的代码行，但什么都没有发生！您是否根据我提供的整个解决方案调整了代码。仅仅更改那一行并不能解决您的问题。我给表单一个名为ajax表单的类，然后将$（“.FormSubmit”）替换为$（“.ajax表单”）。单击（函数（e）{和$（'.ajax表单'）。提交（函数（e）{，之后我使用了这个代码行url:$（this.prop（'action'）。。
$('.ajax-form').submit(function(e){
...
});