Добавление нового ввода с функцией щелчка удаляет предыдущий контент ввода - PullRequest
Новая
       7

Добавление нового ввода с функцией щелчка удаляет предыдущий контент ввода

0 голосов
/ 27 апреля 2018

У меня есть кнопка «Добавить гостя» (Добавить вход), когда пользователь нажимает на нее, под ней появляется новый вход. Моя проблема в том, что если пользователь заполняет ввод и нажимает кнопку «Добавить гостя», то, что он ввел в первый ввод, удаляется.

Есть ли способ сохранить имеющуюся у меня функциональность, но сохранить то, что находится во входах, при этом добавляя новые? 

$('#addGuest').click(function() {
  var count = $('.guestName').length;
  document.getElementById('guestWrap').innerHTML += '<div class="formField guestName" id="guestName' + (count + 1) + '"><label class="label">What is your guest\'s name?</label><input type="text" class="input" name="guest' + (count + 1) + '" id="guest' + (count + 1) + '"></div>';
  $('.guestName').fadeIn(400);
});
.formField {
	margin-bottom: 40px;
}
.label {
	font-family: 'Quicksand', sans-serif;
	font-size: 1.2rem;
	line-height: 1.5em;
	margin: 20px 0;
	display: block;
}
.input {
	font-family: 'Open Sans', sans-serif;
	font-size: .9rem;
	display: block;
	width: 60%;
	padding: 15px 10px;
	text-align: center;
	margin: 0 auto;
	outline: none;
	-webkit-transition: 1s;transition: 1s;
}
#guestWrap {
	height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="guestWrap">
  <div class="formField guestName" id="guestName">
    <label class="label">What is your guest's name?</label>
    <input type="text" class="input" name="guest1" id="guest1">
  </div>
</div>
<div id="addGuest">
  <span class="guestIncrease">Add another guest</span>
</div>

1 Ответ

0 голосов
/ 27 апреля 2018

Когда вы присваиваете innerHTML элемента, текущие элементы уничтожаются; контейнер очищается, и сохраняется только исходная строка HTML. Таким образом, текущие value любых элементов внутри контейнера будут потеряны. Вместо этого используйте insertAdjacentHTML, что не разыменовывает существующие элементы: 

$('#addGuest').click(function() {
  var count = $('.guestName').length;
  document.getElementById('guestWrap').insertAdjacentHTML('beforeend', '<div class="formField guestName" id="guestName' + (count + 1) + '"><label class="label">What is your guest\'s name?</label><input type="text" class="input" name="guest' + (count + 1) + '" id="guest' + (count + 1) + '"></div>');
  $('.guestName').fadeIn(400);
});
.formField {
	margin-bottom: 40px;
}
.label {
	font-family: 'Quicksand', sans-serif;
	font-size: 1.2rem;
	line-height: 1.5em;
	margin: 20px 0;
	display: block;
}
.input {
	font-family: 'Open Sans', sans-serif;
	font-size: .9rem;
	display: block;
	width: 60%;
	padding: 15px 10px;
	text-align: center;
	margin: 0 auto;
	outline: none;
	-webkit-transition: 1s;transition: 1s;
}
#guestWrap {
	height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="guestWrap">
  <div class="formField guestName" id="guestName">
    <label class="label">What is your guest's name?</label>
    <input type="text" class="input" name="guest1" id="guest1">
  </div>
</div>
<div id="addGuest">
  <span class="guestIncrease">Add another guest</span>
</div>
...