Сохранение информации на странице HTML без использования переменных

Question

Итак, я пытаюсь создать веб-страницу, где пользователь вводит информацию о курсе. На странице есть кнопка добавления, которая добавляет для них другое текстовое поле, если им нужно больше полей.

После нажатия кнопки «Добавить» страница сбрасывается, и вся информация, которая была ранее введена, исчезла. Я мог бы сохранить информацию в массиве, и когда или если кнопка добавления нажата, сохраните информацию в массиве и повторно заполните поля, используя то, что было сохранено в массиве.

Мой вопрос: есть ли способ обновить страницу и сохранить информацию в текстовых полях, не обращая внимания на длинный процесс, упомянутый выше, есть ли какой-то атрибут, который я могу использовать, который не удалит информацию, которая была ранее введенный?

Answer 1

Предполагая этот HTML:

<form id="course-info-form" action="submit-course-info.php" method="post"> 
    Professor name: <input type="text" name="professor"><br> 
    Additional info:<br> 
    <input type="text" name="additional0"><br> 
    <input type="submit" value="Submit"> 
</form> 
<br> 
<button id="add-button">Add Field</button> 

<!-- Use jQuery for DOM manipulation --> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 

С JavaScript/JQuery:

var courseInfoForm = $('#course-info-form'); 
var addButton = $('#add-button'); 

// Keep track of how many fields there are, so each can have a unique "name" attribute 
var additionalFieldsAdded = 1; 

// Whenever "Add Field" is clicked, create another input field 
addButton.on('click', function() { 
    var newInput = $("<input>", { 
     type: "text" 
     name: "additional" + additionalFieldsAdded 
    }); 
    courseInfoForm.append(newInput, "<br>"); 
    additionalFieldsAdded += 1; 
}); 

Я не очень хорошо на PHP. В своем скрипте PHP создайте цикл while, который проверяет, есть ли isset($_POST['additional0']) и дополнительные1, дополнительные2 и т. Д., Пока вы не уверены, что больше не было переданных дополнительных полей. Затем сохраните все эти дополнительные данные в массиве и обработайте его, как вы считаете нужным.

Что касается вашего первоначального вопроса, я рекомендую вместо этого использовать свое решение. Лучше избегать ненужной перезагрузки страницы, если все, что вы делаете, - это просто добавлять новую форму каждый раз.

Я полагаю, вы могли бы захватить информацию, которая была «предварительно представлена», когда нажата кнопка «Добавить поле», а затем в вашем скрипте PHP через все дополнительные поля и создать еще один элемент ввода каждый раз, когда другое поле добавляется и устанавливает атрибут значения каждого «старого» элемента ввода на все, что было «предварительно отправлено».

Таким образом, чтобы ответить на ваш вопрос, вы можете установить значение по умолчанию для поля ввода (на стороне сервера) с: (. В настоящее время не тестировалась)

// add-course-information.php 
<?php 
    $addingField = false; 

    // Check for the optional "?do=addfield" parameter 
    if (isset($_POST['do']) && $_POST['do'] == 'addfield') { 
     $addingField = true; 
     $fields = array(); 
     $nextField = 'additional' . count($fields); 

     // Get each piece of POSTed field data 
     while (isset($_POST[$nextField]) && $_POST[$nextField] != '') { 
      array_push($fields, $_POST[$nextField]); 
      $nextField = 'additional' . count($fields); 
     } 
    } 
?> 

<!-- Silly HTML! --> 

<?php 
    // If adding a field, recreate and repopulate all previous fields 
    if ($addingField) { 
     for ($i = 0; i < count($fields); i++) { ?> 
      <input type="text" name="additional<?= $i ?>" value="<?= $fields[$i] ?>"> 
<?php } ?> 
     <input type="text" name="additional<?php echo count($fields) + 1 ?>"> 
<?php } 
    // Otherwise, show the default additional field 
    else { ?> 
     <input type="text" name="additional0"> 
<?php } ?> 

<!-- More awesome HTML! --> 

That мощь работы ...

что, что страница должна делать (если она работает) является:

1. по умолчанию дает пользователю его первоначальную настройку, с всего лишь 1 дополнительное поле ввода, «дополнительная0».
2. Когда пользователь нажимает «Добавить поле», ?do=addfield должен быть отправлен в add-course-information.php (вы можете записать эту часть), и когда эта страница получит параметр do = addfield, тогда он знает, что нужно пропустить все предоставленные дополнительные поля и хранить их каждый в массиве, а затем вывести все отправленные данные обратно в динамическую генерацию <input> элементов цикла.

Но я думаю, что это было бы намного сложнее и излишне увеличивало обработку, которую должен выполнять ваш сервер. Его можно было бы даже злоупотреблять, если кто-то должен был забивать кнопку «Добавить поле» сотни тысяч раз в минуту, в результате чего ваши петли будут повторяться миллионы раз ... (Если вы не наложили ограничение на максимальное количество полей, что было бы легко.)

Однако вы можете также использовать вычислительную мощность клиента, если она доступна.

Answer 2

Вы можете использовать ajax, я думаю ... он работает в фоновом режиме, перезагрузка страницы не выполняется.

Answer 3

Если вы кодируете HTML5, вы можете использовать localStorage с резервным копированием файлов cookie. Кроме того, если информация должна быть удалена после окончания сеанса, вы можете вместо этого использовать sessionStorage.