Question

我有一个使用jQuery＆＃39; load()函数生成的表单，然后我尝试使用jQuery＆＃39; ajax()函数提交表单。它似乎不起作用，我想这是因为加载的内容。

以下是我正在使用的内容：

我正在使用三个页面执行此操作，

Edit.php
load-qstn-form.php
edit-qstn.php

在edit.php内，这是与问题相关的代码，

元素：

<form class="form-edit-qstn clr mrg-btm-med" method="post" action="./edit-qstn.php"></form>

.load()来自另一个加载的元素：

$(document).on('click', '.trg-edit-qstn', function(event) {
    var that = $(this);
    var itemID = that.data("id");

    $('.form-edit-qstn').load('./load-qstn-form.php?id=' +itemID);
    event.preventDefault();
});

$.ajax功能：

$('.form-edit-qstn').submit(function(event) {
    if(confirm('Are you sure?')) {
        var form = $(this);
        var formid = form.find("input[name=formID]").val();
        var formname = form.find("input[name=formName]").val();
        var button = $('.form-edit-qstn button');

        $.ajax({
            method: form.attr("method"),
            action: form.attr("action"),
            data:   { formID: formid, formName: formname }
        })
        .done(function(data) {
            if(data != 0) {
                button
                    .removeClass('btn-default')
                    .addClass('btn-success')
                    .html('<i class="fa fa-fw fa-check"></i> Success');
            } else {
                button
                    .removeClass('btn-default')
                    .addClass('btn-danger')
                    .html('<i class="fa fa-fw fa-close"></i> Failure');
            };
            setInterval(function() {
                button
                    .removeClass('btn-success btn-danger')
                    .addClass('btn-default')
                    .html('<i class="fa fa-fw fa-pencil"></i> Submit');
            }, 5000);
      })
      .fail(function(data) {
          button
              .removeClass('btn-default')
              .addClass('btn-danger')
              .html('<i class="fa fa-fw fa-close"></i> Failure');
          setInterval(function() {
              button
                  .removeClass('btn-success btn-danger')
                  .addClass('btn-default')
                  .html('<i class="fa fa-fw fa-pencil"></i> Submit');
          }, 5000);
      })
  };
  event.preventDefault();
});

以下是load-qstn-form.php：

<?php
  include("./config.php");

  $itemID = $_GET['id'];

  $getItem = $con->prepare("SELECT itemID,itemName FROM items WHERE itemID=?");
  $getItem->bind_param("i", $itemID);
  $getItem->execute();
  $getItem->store_result();
  if($getItem->num_rows > 0) {
    $getItem->bind_result($itemID,$itemName);
    while($getItem->fetch()) {
?>
<input name="formID" type="hidden" value="<?php echo $itemID; ?>" required />
<table class="fixed full outline">
  <tr class="head">
    <td colspan="3"><p>Edit "<?php echo $itemName; ?>"</p></td>
  </tr>
  <tr>
    <td><p>Edit Question</p></td>
    <td><input name="formName" type="text" value="<?php echo $itemName; ?>" autocomplete="off" required /></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td><button class="btn-default"><i class="fa fa-fw fa-pencil"></i> Submit</button></td>
    <td></td>
  </tr>
</table>
<?php
    };
  } else {
?>
<p class="alert">No Item Found</p>
<?php
  };
  $getItem->close();
?>

以下是edit-qstn.php：

<?php
  include("./config.php");

  $formID = $_POST['formID'];
  $formName = $_POST['formName'];

  $updateQstn = $con->prepare("UPDATE items SET itemName=? WHERE itemID=?");
  $updateQstn->bind_param("si", $formName,$formID);
  if($updateQstn->execute()) {
?>
1
<?php
  } else {
?>
0
<?php
    print_r($updateQstn->error);
  };
  $updateQstn->close();
?>

我认为这个问题来自于正在加载的表单元素，因为这个ajax代码在我没有加载元素的表单上使用它时起作用。

如何将input绑定到document？

注意：某些代码每个标签有4个空格，其他每个标签有2个空格

编辑：当edit-qstn.php正确传递$_POST时，代码似乎不足，但数据库似乎没有更新。

Answer 1

再次查看代码后，您正在等待表单元素上的submit事件;但是，检索到的代码中没有提交按钮。

要保持代码不变，您可以更改侦听器功能：

$('.form-edit-qstn').on('click', '.btn-default', function (e) {

或将按钮类型更改为提交：

type='submit'

<button class="btn-default" type='submit'><i class="fa fa-fw fa-pencil"></i> Submit</button>

Answer 2

所以我最终修复了这个问题......奇怪的是ajax method post没有用，所以我试图改为$.post这似乎有效。

$('.form-edit-qstn').submit(function(event) {
  if(confirm('Are you sure?')) {
    var form = $(this);
    var formid = form.find("input[name=formID]").val();
    var formname = form.find("input[name=formName]").val();
    var button = $('.form-edit-qstn button');

    $.post(
      form.attr("action"),
      { formID: formid, formName: formname }
    )
    .done(function(data) {
      if(data != 0) {
        button
          .removeClass('btn-default')
          .addClass('btn-success')
          .html('<i class="fa fa-fw fa-check"></i> Success');
      } else {
        button
          .removeClass('btn-default')
          .addClass('btn-danger')
          .html('<i class="fa fa-fw fa-close"></i> Failure');
      };
      setInterval(function() {
        button
          .removeClass('btn-success btn-danger')
          .addClass('btn-default')
          .html('<i class="fa fa-fw fa-pencil"></i> Submit');
        formname = "";
      }, 5000);
    })
    .fail(function(data) {
      button
        .removeClass('btn-default')
        .addClass('btn-danger')
        .html('<i class="fa fa-fw fa-close"></i> Failure');
      setInterval(function() {
        button
          .removeClass('btn-success btn-danger')
          .addClass('btn-default')
          .html('<i class="fa fa-fw fa-pencil"></i> Submit');
        formname = "";
      }, 5000);
    })
  };
  event.preventDefault();
});

提交包含已加载表单元素的表单

2 个答案: