Как клонировать форму, которая включает отображение текстового поля, зависит от раскрывающегося списка
У меня проблема с функцией j-запроса для отображения текстового поля в зависимости от раскрывающегося списка, если пользователь выбирает single: отображать «имя и фамилию один раз», если выбрать двойной: отобразить «имя и фамилия дважды», он работает для первой строки, но не работает с клонированными строками, любой совет, пожалуйста ?? FIDDLE
<html xmlns = "http://www.w3.org/1999/xhtml">
<head runat = "server">
<title></title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script type = "text/javascript">
$(document).ready(function() {
var genroomid = 2; // change 0 to the number you want to start with
$(".add-row").click(function() {
var $clone = $("ul.personal-details").first().clone();
var $input = $clone.find('#roomid');
$input.val(genroomid).attr('genroomid', +genroomid) // change fileid with any string you want
$clone.append("<button type='button' class='remove-row'>-</button>");
$clone.insertBefore(".add-row");
genroomid++; // increase id by 1
});
$(".form-style-9").on("click", ".remove-row", function() {
$(this).parent().remove();
genroomid--;
});
var blkofcod1 = "<select class='stretch' name='prefix[]'><option value='Mr'>Mr</option><option value='Ms'>Ms</option><option value='Child'>Child</option><option value='Infant'>Infant</option></select>";
var blkofcod2 = "<input name='fname[]' type='text' class='stretch' placeholder='First Name' size='15' maxlength='30' required > <input name='lname[]' type='text' class='stretch' placeholder='Last Name' size='15' maxlength='30' required >";
var blkofcod3 = "<input name='nationality[]' type='text' placeholder='Nationality' class='stretch' size='15' maxlength='30' required >";
$('#roomtype').change(function() {
var value = $(this).val();
var toAppend = '';
switch (value) {
case 'None':
toAppend = $("#container").html(toAppend);
return;
break;
case 'Single':
toAppend = blkofcod1 + blkofcod2 + blkofcod3;
$("#container").html(toAppend);
return;
break;
case 'Double':
toAppend = blkofcod1 + blkofcod2 + blkofcod3 + "<br>" + blkofcod1 + blkofcod2 + blkofcod3;
$("#container").html(toAppend);
return;
break;
default:
toAppend = $("#container").html(toAppend);
return;
}
});
});
</script>
</head>
<body>
<form id = "form1">
<span class = "form-style-9">
<ul class = "personal-details">
<div>
<select id = "roomtype" class = "stretch" name = "roomtype[]" required = "required">
<option value = "None"> None </option>
<option value = "Single"> Single </option>
<option value = "Double"> Double </option>
</select>
<div id = "container"></div>
</div>
</ul>
<button type = "button" class = "add-row">+ New Client</button>
</span>
</form>
</body>
</html>
привет, Роко, я сделал и ничего не случилось, и теперь я пью теплый кофе
любая идея ?? пожалуйста, нужна помощь
Я мобильный: | кто-то скоро ответит вам
Ответы 2
<!DOCTYPE html>
<html>
<head>
<title></title>
<script
src = "https://code.jquery.com/jquery-3.3.1.js"
integrity = "sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60 = "
crossorigin = "anonymous"></script>
</head>
<body>
<form>
<div>
<select class = "dropdown">
<option value = "1" >One</option>
<option value = "2" >Two</option>
<option value = "3" >Three</option>
<option value = "4" >Four</option>
<option value = "5" >Five</option>
</select>
</div>
<div class = "field-wrap">
<div class = "row">
<input type = "text" name = "firstname[]" placeholder = "First Name">
<input type = "text" name = "lastname[]" placeholder = "Last Name">
</div>
</div>
</form>
<script type = "text/javascript">
$(function(){
$('.dropdown').change(function(){
let dval = $(this).val();
let fHTML = "";
for (let i = 0; i < dval; i++)
fHTML += '<div class = "row"><input type = "text" name = "firstname[]" placeholder = "First Name"><input type = "text" name = "lastname[]" placeholder = "Last Name"></div>'
$('.field-wrap').html(fHTML);
});
})
</script>
</body>
</html>
Пожалуйста, добавьте описание того, как ваш пример улучшает код OP :)
Кроме того, вы должны помнить, что value или .val() INPUT или SELECT возвращает String, а не Number - как вы навязываете выше. Используйте parseInt(dval, 10)
спасибо @Roko, спасибо @ Haris, но я где клон в сообщении кода u, моя проблема с кодом клона
Я просто пишу пример своей проблемы, потому что на исходной странице много трески, вы можете проверить это здесь
Я не понимаю что ты говоришь
проверьте эту ссылку, и вы поймете (jsfiddle.net/5x1Lfedj/7)
С малейшей корректировкой вашего кода. Следующее работает из моего понимания вашего вопроса:
Объяснение:
$('#roomtype').change(function () {}) стал $(document).on('change', '#roomtype', function() {})
Ответ использует делегированные обработчики событий в jQuery. Этот пункт из документации jQuery объясняется далее.
Event handlers are bound only to the currently selected elements; they must exist at the time your code makes the call to .on()
В вашем коде при инициализации страницы существует только первое поле выбора, и поэтому любые другие поля выбора, добавленные позже (при нажатии кнопки «+ Новый клиент»), не связаны существующим обработчиком изменений.
Реализация делегированного обработчика событий в ответе привязывает событие к document. Это может быть любой другой элемент DOM, если он существует на момент регистрации обработчика событий.
By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers. This element could be the container element of a view in a Model-View-Controller design, for example, or document if the event handler wants to monitor all bubbling events in the document. The document element is available in the head of the document before loading any other HTML, so it is safe to attach events there without waiting for the document to be ready.
Подробнее здесь: http://api.jquery.com/on/
Во-вторых, другое изменение, необходимое для работы кода, - это то, как #container находится в вашем коде. Использование $('#container') searches from the root of the DOM and in this case will almost always find the first element. Changing $ ('# container') to $ (this) .siblings ('# container') finds the closest # container` в измененное поле выбора.
Рабочий пример: http://jsfiddle.net/5x1Lfedj/15/
$(document).ready(function() {
var genroomid = 2; // change 0 to the number you want to start with
$(".add-row").click(function() {
var $clone = $("ul.personal-details").first().clone();
var $input = $clone.find('#roomid');
$input.val(genroomid).attr('genroomid', +genroomid) // change fileid with any string you want
$clone.append("<button type='button' class='remove-row'>-</button>");
$clone.insertBefore(".add-row");
genroomid++; // increase id by 1
});
$(".form-style-9").on("click", ".remove-row", function() {
$(this).parent().remove();
genroomid--;
});
var blkofcod1 = "<select class='stretch' name='prefix[]'><option value='Mr'>Mr</option><option value='Ms'>Ms</option><option value='Child'>Child</option><option value='Infant'>Infant</option></select>";
var blkofcod2 = "<input name='fname[]' type='text' class='stretch' placeholder='First Name' size='15' maxlength='30' required > <input name='lname[]' type='text' class='stretch' placeholder='Last Name' size='15' maxlength='30' required >";
var blkofcod3 = "<input name='nationality[]' type='text' placeholder='Nationality' class='stretch' size='15' maxlength='30' required >";
$(document).on('change', '#roomtype', function() {
var value = $(this).val();
var toAppend = '';
var $container = $(this).siblings('#container')
switch (value) {
case 'None':
toAppend = $container.html(toAppend);
return;
break;
case 'Single':
toAppend = blkofcod1 + blkofcod2 + blkofcod3;
$container.html(toAppend);
return;
break;
case 'Double':
toAppend = blkofcod1 + blkofcod2 + blkofcod3 + "<br>" + blkofcod1 + blkofcod2 + blkofcod3;
$container.html(toAppend);
return;
break;
default:
toAppend = $container.html(toAppend);
return;
}
});
});
У меня проблема с функцией j-запроса для отображения текстового поля в зависимости от раскрывающегося списка, если пользователь выбирает одиночный: отображать «имя и фамилию один раз», если выбрать двойной: отображать «имя и фамилию дважды», он работает для первая строка, но не работает с клонированными строками, пожалуйста, какой-нибудь совет ??
@TamerAbdallah посетите рабочий пример в ответе или попробуйте вставленный код, чтобы узнать, решает ли это проблему.
какая была проплема?
@TamerAbdallah Я обновил ответ, чтобы объяснить, в чем проблема. Я надеюсь, что это помогает.
@ Kadeer действительно большое спасибо, я получил это сейчас, и ты действительно хороший помощник и заслуживаешь всяческого уважения, еще раз спасибо :)
UL внутри SPAN? Переименуйте SPAN в DIV - Если ничего не происходит - вы заслужили новый теплый кофе