Question

这是我在这里发表的第一篇文章，请你温柔。

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

这是我认为可行的代码：

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');
   }
}

现在，数据比较正在进行中。如果我已经更改了表单中的任何内容，我会检测到＆＃34;已检测到更改＆＃34;在控制台中注意。如果我没有，我会得到＆＃34;没有检测到任何变化。＆＃34;

然而，＆＃34; document.getElementById（＆＃39; saveBut＆＃39;）。click（）;＆＃34;没有运行，控制台显示没有错误。＆＃39; saveBut＆＃39; input包含在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"
});

但两种方法都没有奏效，我仍然得到了相同的结果＃34;检测到变化＆＃34;在我的控制台日志中，但没有错误。我确定我遗漏了一些非常基本的东西，但我无法弄清楚它可能是什么。

有没有办法让我的saverec.php代码以这种方式运行，或者我是否需要放弃这个混乱并提出另一种方式？

编辑：

我正在添加saverec.php文件中的代码。仅供参考，此代码没有任何问题，因为当用户点击“保存”按钮时，它运行正常。输入

<?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>";

Answer 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>

Answer 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代码。此外，这个应用程序确实不是问题。

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

2 个答案: