需要在ajax模式形式上插入新值，但无法获取ID

Question

我刚接触AJAX，并在youtube上学习了一些教程，但在某些事情上却遇到了麻烦。

所以，我有这个按钮，它将获得用户想要在表上批准的项目ID：

<button type="submit" name="approve" id="<?php echo $displayapprovaldetails['projectid'];?>" data-toggle="modal" data-target="#approve_data_Modal" class="btn btn-primary btn-sm">Approve</button>

现在，我有此模式表单，该表单将在批准和更新与projectid相关的记录之前先要求备注：

<div class="modal fade" id="approve_data_Modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title font-weight-bold text-primary" id="exampleModalLabel">Approve</h5>
          <button class="close" type="button" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <form method="post" id="approve_form">
        <div class="modal-body">
            <label>Remarks: </label>
            <textarea name="remarks" id="remarks" rows="5" class="form-control"></textarea>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" type="button" data-dismiss="modal">Close</button>
          <button class="btn btn-primary" type="submit" name="approve" id="approve">Confirm</button>
          </form>
        </div>
      </div>
    </div>

我已经看到了插入和更新之间的区别，但是我不知道它还是应该更新它的工作方式。

脚本：

<script>
$(document).ready(function(){
  $('#approve_form').on('submit', function(event){
        event.preventDefault();
        if($('#remarks').val() == "")
        {
          alert("Remark is required.");
        }
        else
        {
          $.ajax({
            url:"include/approve.php",
            method:"post",
            data:$('#approve_form').serialize(),
            success: function(data)
            {
              $('#approve_form')[0].reset();
              $('#approve_data_Modal').modal('hide');
            }
          });
        }
    });
});
</script>

我知道我无法获得projectid并将其发布到另一页，因为我不确定如何将其放在需要更新与其连接的表的脚本上。

[请帮助我完成这项工作。非常感谢。

Answer 1

而不是有一个按钮=

<button type="submit" name="approve" id="<?php echo $displayapprovaldetails['projectid'];?>" data-toggle="modal" data-target="#approve_data_Modal" class="btn btn-primary btn-sm">Approve</button>

使用输入=

<input type='text' id="project_id" value="<?=$displayapprovaldetails['projectid']?>" >

您也可以使用按钮进行提交，但是在向其他文件发送ID时，我建议您这样做

您的HTML：

<div class="modal fade" id="approve_data_Modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title font-weight-bold text-primary" id="exampleModalLabel">Approve</h5>
          <button class="close" type="button" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <form method="post" id="approve_form">
        <div class="modal-body">
            <label>Remarks: </label>
            <textarea name="remarks" id="remarks" rows="5" class="form-control"></textarea>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" type="button" data-dismiss="modal">Close</button>
          <button class="btn btn-primary" type="submit" name="approve" id="approve">Confirm</button>
          </form>
        </div>
      </div>
    </div>

这是您的脚本文件：

    <script>
    $(document).ready(function(){
      $('#approve').on('submit', function(event){
            event.preventDefault();
 var id = $("#project_id").val();
            if($('#remarks').val() == "")
            {
              alert("Remark is required.");
            }
            else
            {
              $.ajax({
                url:"include/approve.php",
                method:"post",
                data:{id:id},
                success: function(data)
                {
                  $('#approve_form')[0].reset();
                  $('#approve_data_Modal').modal('hide');
                }
              });
            }
        });
    });
    </script>