使用 jQuery 的 PHP 表单提交在表中不起作用

Question

我有以下返回用户数据的函数。

function returnChild(){
  global $pdo;
  $stmt = $pdo->prepare("SELECT * FROM children
                         INNER JOIN districts ON children.ch_district = districts.dst_id
                         INNER JOIN states ON districts.dst_state = states.st_id
                         ORDER BY children.ch_id DESC");
  $stmt-> execute();

  $html = '<div class="row">
            <div class="col-md-12 mt-5">
              <h2>List of Children <a href="#" class="action btn btn-dark pull-right" data-toggle="modal" data-target="#pickupDetailsModal">+ Add New</a></h2>
                <div class="mt-4">
                  <table class="table table-striped">
                    <tr>
                      <th>Name</th>
                      <th>Sex</th>
                      <th>Date of Birth</th>
                      <th>Father\'s Name</th>
                      <th>Mother\'s Name</th>
                      <th>State</th>
                      <th>District</th>
                      <th>Action</th>
                    </tr>';
  while($f = $stmt->fetch()){
    $html .= '<tr>
                <td>'.$f['ch_name'].'</td>
                <td>'.ucfirst($f['ch_sex']).'</td>
                <td>'.date('jS M, Y', strtotime($f['ch_dob'])).'</td>
                <td>'.$f['ch_father'].'</td>
                <td>'.$f['ch_mother'].'</td>
                <td>'.$f['st_name'].'</td>
                <td>'.$f['dst_name'].'</td>
                <td>
                  <div class="row">
                    <div class="col-md-3">
                      <span class="text-info pointer" data-toggle="modal" data-target="#childUpdate"><i class="fa fa-edit fa-2x"></i></span>
                    </div>
                    <div class="col-md-3">
                      <form method="post" action="processes/child.php">
                        <input type="hidden" value="delete" name="type" class="type">
                        <input type="hidden" value="'.$f['ch_id'].'" name="id">
                        <button type="submit" class="btnAction no-btn text-danger"><i class="fa fa-trash fa-2x"></i></button>
                      </form>
                    </div>
                  </div>
                </td>
                <tr>
                  // THIS FORM IS NOT WORKING
                  <form method="post" action="processes/child.php">
                    <input type="hidden" value="update" name="type" class="type">
                    <input type="hidden" value="'.$f['ch_id'].'" name="id">
                    <td><input type="text" class="form-control" name="name" value="'.$f['ch_name'].'"></td>
                    <td><input type="text" class="form-control" name="sex" value="'.ucfirst($f['ch_sex']).'"></td>
                    <td><input type="text" class="form-control" name="dob" value="'.date('Y-m-d', strtotime($f['ch_dob'])).'"></td>
                    <td><input type="text" class="form-control" name="father" value="'.$f['ch_father'].'"></td>
                    <td><input type="text" class="form-control" name="mother" value="'.$f['ch_mother'].'"></td>
                    <td><input type="text" class="form-control" name="state" value="'.$f['st_name'].'"></td>
                    <td><input type="text" class="form-control" name="district" value="'.$f['dst_name'].'"></td>
                    <td><button type="submit" class="btnAction btn btn-dark">Update</button></td>
                  </form>
                </tr>
              </tr>';
  }
  $html .= '</table></div></div></div>';
  $html .= returnAJAX();
  return $html;
}

returnAJAX() 函数：

function returnAJAX(){
  $html = '<script>
            $(document).ready(function(){
              $(".btnAction").on("click", function(e){
                e.stopImmediatePropagation();
                var form = $(this).closest("form");
                var type = form.find(".type").val();
                var dataString = form.serialize();
                var url = form.attr("action");
                alert(dataString);
                $.ajax({
                  type: "POST",
                  dataType : "json",
                  url: url,
                  data: dataString,
                  cache: true,
                  beforeSend: function(){
                    $(".message").hide();
                    $(".overlay").show();
                  },
                  success: function(json){
                    $(".message").html(json.status).fadeIn();
                    setTimeout(function(){
                      $(".message").html(json.status).fadeOut();
                    }, 3000);
                    if(json.returnType == "states"){
                      $("#stateContent").html(json.content).fadeIn();
                    }else if(json.returnType == "districts"){
                      $("#districtContent").html(json.content).fadeIn();
                    }else{
                      $("#childContent").html(json.content).fadeIn();
                    }
                    $(".overlay").hide();
                    $("html, body").animate({ scrollTop: $(".message").offset().top }, "slow");
                  }
                });
                return false;
              });
              $(".editContent").on("click", function(e){
                e.stopImmediatePropagation();
                $(".contentHidden").fadeToggle();
                $(".contentVisible").fadeToggle();
              });
            });
          </script>';
  return $html;
}

问题是第二种形式不起作用。当我单击Update 按钮时，alert(dataString) 不会在警报框中返回任何内容。警告框出现了，但它是空的，如下面的屏幕截图所示：

VIEW SCREENSHOT

但是，当我将其从表格标签（td、tr 等）中取出时，它可以完美运行，但在上述格式中则不行。第一种形式工作得很好。第二种形式未在此处检测表单字段。似乎是什么问题？我在这里想念什么？自从 2 小时以来，我一直陷入困境，没有解决方案。

Answer 1

你想在这行代码中做什么？

`  $(".contentHidden").fadeToggle();

我的意思是...字符'`'

在js中可以试试

function actionUpdate(event){
    event.stopImmediatePropagation();
    var form = $(this).closest("form");
    var type = form.find(".type").val();
    ///code of you
    return false;
  }
  function clickEditContent(event){
    event.stopImmediatePropagation();
    $(".contentHidden").fadeToggle();
    $(".contentVisible").fadeToggle();
  }

在html中，你写

<button type="submit" class="btnAction btn btn-dark" onclick="actionUpdate(event)">Update</button>