检查表单更改后无法单击输入答案

【问题标题】：Unable to click input after checking for form changes检查表单更改后无法单击输入
【发布时间】：2017-11-09 21:55:31
【问题描述】：

这是我在这里的第一篇文章，所以请温柔一点。

当用户导航离开他们所在的页面时，我试图在表单上执行自动保存。主要是当用户一直在使用记录时，然后继续导航到新记录而不先保存他们的工作。到目前为止，我已经能够成功检测到表单内容是否已更改，但我对如何执行保存一无所知。

这是我认为可行的代码：

var $formContents = $(document.getElementById("allData"));
origForm = $formContents.serialize();

window.onunload = function() {
   var $formContents = $(document.getElementById("allData"));
   nowForm = $formContents.serialize();

   if (nowForm !== origForm) {
      console.log('Changes detected.');
      document.getElementById('saveBut').click();
   }
   else {
      console.log('No changes detected');
   }
}

现在，数据比较正在工作。如果我更改了表单中的任何内容，我会在控制台中看到“检测到的更改”注释。如果没有，我会收到“未检测到更改”。

但是，“document.getElementById('saveBut').click();”没有运行，并且控制台没有显示错误。 'saveBut' 输入包含在 post-method 表单中，它会触发 php 代码将表单数据保存到我的 SQL 服务器。

FWIW，这是输入的 html：

<form method="post" id="save">
   <input type="submit" form="allData" value="Save Changes" id="saveBut" name="saveBut"/>
</form>

<form method="post" id="allData">
   <input type="hidden" name="formData[]" value="<?php echo $row['ID']; ?>">
   <div class="info">
      Sermon Date: <input type="date" name="formData[]" value="<?php echo $row['sermon_date']; ?>">
      Sermon Location: <input type="text" name="formData[]" value="<?php echo $row['sermon_location']; ?>">
      Call to Worship: <input type="text" name="formData[]" value="<?php echo $row['call_to_worship']; ?>">
      Hymn of Response: <input type= "text" name="formData[]" value="<?php echo $row['hymn_of_response']; ?>">
   </div>

   <br><hr style="width:90%"><br>

   <div class="top">
      Pericope:
      <input type="text" size="40" name="formData[]" value="<?php echo htmlspecialchars($row['pericope'], ENT_QUOTES); ?>">
//and on and on...
</form>

我也试过通过替换直接调用php代码

document.getElementById('saveBut').click();

与：

$.get('saverec.php', function(data) {
   eval(data);
});

然后我尝试了：

$.ajax({
   type: "GET",
   url: "saverec.php"
});

但两者都不起作用，我仍然在控制台日志中得到相同的结果，即“检测到更改”，但没有错误。我确定我错过了一些非常基本的东西，但我不知道那可能是什么。

有没有办法让我的 saverec.php 代码以这种方式运行，还是我需要放弃这种混乱并想出不同的方式？

编辑：

我正在从我的 saverec.php 文件中添加代码。仅供参考，这段代码没有任何问题，因为当用户点击“saveBut”输入时它运行良好。

<?php

$location = "i.p.add.ress";
$username = "my_username";
$password = "my_password";
$dbname = "my_database_name";
$tableName = "my_table_name";
$conn = new mysqli($location, $username, $password, $dbname);

if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$allData = $_POST['formData'];
$currentID = $allData[0];

//write the form data to the new record
class updateRecord {
    public function __construct ($colName, $data, $currentID) {
        $this->colName = $colName;
        $this->data = $data;
        $this->currentID = $currentID;
    }

    public function writeDataText() {
        global $conn;
        $ID = strval($this->currentID);
        $tableName = "sermon_prep_database";
        $sql = "UPDATE " . $tableName . " SET " . $this->colName . "='" . mysqli_real_escape_string($conn, $this->data) . "' WHERE ID=" . $this->currentID;
        mysqli_query($conn, $sql);
    }
}

//write all the data to the proper columns
$row = new updateRecord('sermon_date', $allData[1], $currentID);
$row->writeDataText();
$row = new updateRecord('sermon_location', $allData[2], $currentID);
$row->writeDataText();
$row = new updateRecord('call_to_worship', $allData[3], $currentID);
$row->writeDataText();
$row = new updateRecord('hymn_of_response', $allData[4], $currentID);
$row->writeDataText();
$row = new updateRecord('pericope', $allData[5], $currentID);
$row->writeDataText();
$row = new updateRecord('pericope_texts', $allData[6], $currentID);
$row->writeDataText();
$row = new updateRecord('sermon_text', $allData[7], $currentID);
$row->writeDataText();
$row = new updateRecord('fcft', $allData[8], $currentID);
$row->writeDataText();
$row = new updateRecord('gat', $allData[9], $currentID);
$row->writeDataText();
$row = new updateRecord('cpt', $allData[10], $currentID);
$row->writeDataText();
$row = new updateRecord('purpose_bridge', $allData[11], $currentID);
$row->writeDataText();
$row = new updateRecord('fcfs', $allData[12], $currentID);
$row->writeDataText();
$row = new updateRecord('gas', $allData[13], $currentID);
$row->writeDataText();
$row = new updateRecord('cps', $allData[14], $currentID);
$row->writeDataText();
$row = new updateRecord('sermon_title', $allData[15], $currentID);
$row->writeDataText();
$row = new updateRecord('sermon_scripture', $allData[16], $currentID);
$row->writeDataText();
$row = new updateRecord('text_outline', $allData[17], $currentID);
$row->writeDataText();
$row = new updateRecord('research_notes', $allData[18], $currentID);
$row->writeDataText();
$row = new updateRecord('sermon_outline', $allData[19], $currentID);
$row->writeDataText();
$row = new updateRecord('illustrations', $allData[20], $currentID);
$row->writeDataText();
$row = new updateRecord('sermon_manuscript', $allData[21], $currentID);
$row->writeDataText();

echo "<script type='text/javascript'>
    alert ('Changes saved to ID ' + $currentID);
</script>";

【问题讨论】：

保存操作的实际 php 代码在哪里？
好吧，它不会让我在这里粘贴代码。它太长了。但是保存代码工作正常，并且在用户单击输入时正常运行。

标签： javascript html input click onbeforeunload

【解决方案1】：

Ajax 调用应该可以工作，你试过了吗：

$.ajax({
   url: "saverec.php",
   success: function(data){
      console.log('Changes saved.');
   }
 });

你应该只有一个表格来获取数据：

<form method="post" id="save">
   <input type="hidden" name="formData[]" value="<?php echo $row['ID']; ?>">
   <div class="info">
      Sermon Date: <input type="date" name="formData[]" value="<?php echo $row['sermon_date']; ?>">
      Sermon Location: <input type="text" name="formData[]" value="<?php echo $row['sermon_location']; ?>">
      Call to Worship: <input type="text" name="formData[]" value="<?php echo $row['call_to_worship']; ?>">
      Hymn of Response: <input type= "text" name="formData[]" value="<?php echo $row['hymn_of_response']; ?>">
   </div>

   <br><hr style="width:90%"><br>

   <div class="top">
      Pericope:
      <input type="text" size="40" name="formData[]" value="<?php echo htmlspecialchars($row['pericope'], ENT_QUOTES); ?>">
//and on and on...
   <input type="submit" form="allData" value="Save Changes" id="saveBut" name="saveBut"/>
</form>

【讨论】：

嘿，我们越来越近了！成功后，控制台肯定会显示“更改已保存”。然而，没有任何东西被写入 SQL，所以我敢打赌这只是 formData 数组没有被传输到 $_POST 的问题。必须有一种方法可以在没有单击输入的情况下将 formData[] 信息放入 $_POST 中。我会搜索的，但你可能会比我抢到它。
编辑了答案，你需要一张表格
宾果游戏！我将其标记为已接受，因为它几乎让我到达了那里。我发现我需要在 ajax 中的 url:"saverec.php" 之后添加 data:nowform ，以便当前表单数据进入 php 代码的 $_POST 。非常感谢您的帮助！

【解决方案2】：

以防万一有人偶然发现这一点，我想我会添加最终让我在 onbeforeunload 自动保存表单的代码：

//get the initial state of the form and store it into a variable
var $formContents = $(document.getElementById("allData"));
origForm = $formContents.serialize();

window.onbeforeunload = function() {
   //get the current state of the form on BeforeUnload and store it into a variable             
   var $formContents = $(document.getElementById("allData"));
   nowForm = $formContents.serialize();
   //compare the current state of the form with the initial state of the form             
   if (nowForm !== origForm) {
      console.log('Changes detected.');
      //use ajax to post the current form data to saverec.php
      $.ajax({
         type: 'post',
         url: 'saverec.php',
         data: nowForm,
         success: function(data){
            console.log('Changes saved.');
         }
      });
   }
   else {
      console.log('No changes detected');
   }
}

当然，这意味着即使用户不希望保存表单，也会保存该表单，但可以使用某种取消按钮来覆盖此 onbeforeunload 代码，从而轻松解决此问题。此外，这个应用程序真的不是问题。

【讨论】：