Question

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

Answer 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>

然后您可以使用：{/ p>而不是.onclick()

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

问题＃2

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

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

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

如果您使用上面第1期中提到的方法，那么您只需使用表单操作属性：

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

而$(this)是表格。

jQuery提交了错误的html表单

1 个答案: