Question

我试图弄清楚如何将表单提交中的ajax响应输出到特定的div。表单是动态生成的按钮，其中来自mysql的数据作为值，并且对于生成的每个按钮，还有为此结果创建的div。

false

这是我的示例表单。 $ count正在递增id＆＃34; form＆＃34;在一个while循环中。

Example form id's:  
id="form1"
id="form2"
id="form3"
id="form4"

div id's:
<div class="res" id="result1">Display form1 data</div>
<div class="res" id="result2">Display form2 data</div>
<div class="res" id="result3">Display form3 data</div>
<div class="res" id="result4">Display form4 data</div>

我可以让它工作但如果我只是使用＆＃34; .res＆＃34;它会通过点击提交按钮来填充所有div的成功响应。对于这个类，这就是为什么我需要使用来自$ count的递增数字的唯一id。我不确定如何实现这一点。

echo '<form name="v" action="test.php" value="' . $row['data'] . '" method="post" id="form' . $count . '"><input name="v" type="hidden" value="' . $row['data'] . '"><input type="submit" class="btn" value="Submit"></form>';

有人可以帮帮我吗？感谢。

Answer 1

ID必须是唯一的，所以请执行

$(document).on("submit", "form", function(event) {
  event.preventDefault();
  var id = this.id; // form1, form2 etc
  ....

或

$(document).on("submit", "form[name='v']", function(event) {
  event.preventDefault();
  var id = this.id; // form1, form2 etc
  ....

然后

  $("#"+id.replace("form","result")).html(data); // result1, result2 etc

或者在表单上使用数据属性：

echo "<form data-id='result".$count."' ....>

并且

$(document).on("submit", "form[name='v']", function(event) {
  event.preventDefault();
  var id = $(this).data("id"); // result1, result2 etc
  ....

然后

  $("#"+id).html(data); // result1, result2 etc

Answer 2

您可以使用包含目标div的数据属性扩展表单标记。

echo '<form name="v" action="test.php" value="' . $row['data'] . '" method="post" id="form' . $count . '" data-target="result' . $count . '">...';

以及稍后在你的ajax成功函数中，做这样的事情

$(document).ready(function(){
    $(document).on("submit", "form[data-target]", function(event)
    {
        var $target = $('#' + $(this).data('target'));
        event.preventDefault();        
        $.ajax({
            url: $(this).attr("action"),
            type: $(this).attr("method"),
            dataType: "text",
            data: new FormData(this),
            processData: false,
            contentType: false,
        success: function(data, status) {
            $target.html(data);
        },
        error: function() {
            alert('An error occurred.');
        }
        });        
    });
});

Answer 3

您可以使用.each()提供计数器变量的事实：

$("form").each(function (i) {
    $(this).on("submit", function () {
    // ...

    // in the ajax success callback:
    $(".res").eq(i).html(data);

使用ajax填充动态创建的div

3 个答案: