Как включить пользовательский ввод в HTML-строку некоторого родительского элемента DOM? - PullRequest
Новая
       44

Как включить пользовательский ввод в HTML-строку некоторого родительского элемента DOM?

0 голосов
/ 24 июня 2019

Я хочу сохранить содержимое контейнера div в истории окон, запустив следующую строку: 

window.history.pushState($('#myDivId').html(), "title", 'some url');

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

Проблема:

У пользователя есть форма для заполнения, с одним вводом. Пользователь вводит свое имя (скажем, Джон) и нажимает на кнопку отправить. Функция onSubmit запущена, и здесь я получаю html-содержимое родительского div и сохраняю его в объекте history. Проблема в том, что пользовательский ввод (Джон) в этом примере не фиксируется.

Следующий снимок экрана показывает вывод моего скрипта ниже:

enter image description here

Фрагмент кода 

function onSubmit() {
   var str = $('#myDivId').html();
   alert("this goes to windows history: " + str);
   // window.history.pushState($('#myDivId').html(), "title", 'some url');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form onsubmit="onSubmit()">
   <div id="myDivId">
      First name: <input id="firstNameId" type="text" name="FirstName" value=""><br>
      <input type="submit" value="submit">
   </div>
</form>

Как включить пользовательский ввод в str до его добавления в историю?

Обновление:

Это упрощенный пример, в реальном сценарии у меня есть несколько полей ввода в контейнере. Поэтому я ищу способ захвата всех входных значений через контейнер.

Ответы [ 3 ]

3 голосов
/ 24 июня 2019

Атрибут value представляет значение поля по умолчанию , а не текущее значение.

Нет атрибута HTML, отражающего это.

Если вы хотите сохранить его, вам нужно сохранить его явно.

Я бы подошел к этому, используя serializeArray() (и преобразовав его в JSON для сохранения в истории), а затем зацикливая его, чтобы восстановить данные в форме.

1 голос
/ 24 июня 2019

Здесь я использую delegate event, чтобы установить свойство value как атрибут value 

function onSubmit() {
   var str = $('#myDivId').html();
   alert("this goes to windows history: " + str);
   // window.history.pushState($('#myDivId').html(), "title", 'some url');
}

$(document).on('input', '.attr-input', function() {
  $(this).attr('value', this.value)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form onsubmit="onSubmit()">
   <div id="myDivId">
      First name: <input id="firstNameId" class="attr-input" type="text" name="FirstName" value=""><br>
      <input type="submit" value="submit">
   </div>
</form>
0 голосов
/ 24 июня 2019

Мне не понятно, о чем вы спрашиваете. Я предоставил решение в соответствии с моим пониманием. 

function onSubmit() {
  $("#firstNameId").attr('value', $("#firstNameId").val())
   var str = $('#myDivId').html();
   alert("this goes to windows history: " + str);
   // window.history.pushState($('#myDivId').html(), "title", 'some url');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form onsubmit="onSubmit()">
   <div id="myDivId">
      First name: <input id="firstNameId" type="text" name="FirstName" value=""><br>
      <input type="submit" value="submit">
   </div>
</form>
...