Невозможно нажать ввод после проверки изменений формы

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

Теперь сравнение данных работает. Если я что-то изменил в форме, я получаю примечание "Обнаружены изменения" в консоли. Если нет, я получаю "Изменения не обнаружены".

Тем не менее, "document.getElementById('saveBut'). Click();" не работает, и консоль не показывает ошибок. Входные данные "saveBut" содержатся в форме после метода и запускают 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>";

0

javascript html input click onbeforeunload

Источник

user8791189 09 ноя '17 в 21:55

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

Конечно, это означает, что форма будет сохранена, даже если пользователь этого не хочет, но это можно легко исправить с помощью некоторой кнопки отмены, которая переопределяет этот код перед загрузкой. Кроме того, это действительно не проблема с этим приложением.

0

Источник

user8791189 10 ноя '17 в 21:01

Другие вопросы по тегам javascript html input click onbeforeunload

user2264392 09 ноя '17 в 22:44 2017-11-09 22:44 · Accepted Answer · 2017-11-09 22:44

Аякс вызов должен работать, вы пробовали:

$.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>