$(document).ready(function () {
toggleFields();
});
function toggleFields() {
if ($("#people").val() == 1)
$("#personen1").show();
else
$("#personen1").hide();
$("#personen2").hide();
$("#personen3").hide();
$("#personen4").hide();
$("#personen5").hide();
$("#personen6").hide();
$("#personen7").hide();
$("#personen8").hide();
}
<p>Personen:
<input type="number" id="people" name="ppl" min="1" class="uniform-input number" value="1" required="">
</p>
<div id="personen1">
<p>1. Person:
<input id="personen1_person1" type="text" name="person_name" />
</p>
</div>
<div id="personen2">
<p>1. Person:
<input id="personen2_person1" type="text" name="person_name" />
</p>
<p>2. Person:
<input id="personen2_person2" type="text" name="person2_name" />
</p>
</div>
<div id="personen3">
<p>1. Person:
<input id="personen3_person1" type="text" name="person_name" />
</p>
<p>2. Person:
<input id="personen3_person2" type="text" name="person2_name" />
</p>
<p>3. Person:
<input id="personen3_person3" type="text" name="person3_name" />
</p>
</div>
На моей целевой странице введен номер человека. Я хочу использовать входное значение, чтобы добавить поля к моей кассе. Например, если введено 5, я хочу, чтобы на моей странице оформления заказа было 5 полей, чтобы клиент мог заполнить имена. Код выше не работает правильно. Что мне не хватает?
3 ответа
Первая и самая главная ошибка, которую вы делаете, - это дублирование id
, которые должны быть уникальными, иначе могут появиться непреднамеренные эффекты.
Следующее, фрагмент кода не будет работать, потому что вы не включили библиотеку jQuery
, которая важнее всего для выполнения функции $
.
В-третьих, найдите эти ошибки, которые вы сделали:
- Вы не связали событие с вводом.
- Вам необходимо проверить входные данные на наличие идентификатора.
- Вы неправильно закрываете
if
. - Вы можете сжать код многими эффективными способами, используя
class
илиid
в одном селекторе$
.
$(document).ready(function () {
toggleFields();
$("#people").on("keyup change", function () {
toggleFields();
});
});
function toggleFields() {
$("#personen1, #personen2, #personen3, #personen4, #personen5, #personen6, #personen7, #personen8").hide();
if ($("#people").val() < 9)
$("#personen" + $("#people").val()).show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Personen:
<input type="number" id="people" name="ppl" min="1" class="uniform-input number" value="1" required="">
</p>
<div id="personen1">
<p>1. Person:
<input id="person1-1" type="text" name="person_name" />
</p>
</div>
<div id="personen2">
<p>1. Person:
<input id="person2-1" type="text" name="person_name" />
</p>
<p>2. Person:
<input id="person2-2" type="text" name="person2_name" />
</p>
</div>
<div id="personen3">
<p>1. Person:
<input id="person3-1" type="text" name="person_name" />
</p>
<p>2. Person:
<input id="person3-2" type="text" name="person2_name" />
</p>
<p>3. Person:
<input id="person3-3" type="text" name="person3_name" />
</p>
</div>
У вас не должно быть нескольких идентификаторов с одинаковым значением.
Это неправильный способ сделать это, вы должны генерировать HTML, используя только JavaScript:
// Sample code, you can create a function for this as well.
$(function(){
var count = 5; // Change this count with the input field value.
var _html = "";
for(var i=0; i<count; i++){
_html += '<p>'+(i+1)+'. Person:'
+'<input id="person'+(i+1)+'" type="text" name="person'+(i+1)+'_name" />'
+'</p>';
}
$(".container").html(_html);
});
Вот скрипка
Каждый атрибут id
, который вы используете на веб-странице, должен быть уникальным во всем целом документе , также - вы используете какой-то шаблон для загрузки, когда пользователь вводит число, но что, если пользователь хочет добавить 10 человек вместо 3 или 5? Индивидуальное добавление дел в будущем принесет вам много боли.
Я также понимаю, что вы хотите, чтобы пользователи вводили число, а затем возвращали определенное количество полей, исходя из этого предположения, сделав код
$(document).ready(function() {
toggleFields();
});
Не будет работать, поскольку выполняется только один раз, onload страницы и после этого больше не выполняется, поскольку никакие события не связаны.
var insertPeople = function(n) {
var amt = !isNaN(n) ? n : 1;
var fieldStr = '';
//using a for loop to 'build' the fields dynamically
for (var i = 0; i < amt; i++) {
var num = i + 1;
fieldStr += '<p>'+ num +'. person<input type="text" id="person'+ num +'" name="person'+ num +'_name"></p>'
}
//append HTML to container
$('#people-container').html(fieldStr);
}
//Use this to insert fields on page load instantly.
$(insertPeople);
//Use this if you would like a user to control the amount of fields through an input field.
$(function() { //shorthand for $(document).ready
$('#people').on('keyup', function() {
insertPeople($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="number" id="people" value="1" />
<div id="people-container"></div>
Этот код будет зацикливаться в течение n времени, где n - это пользовательский ввод (самостоятельно проверяйте его тип) и создает поля с идентификаторами, начиная с 0 и заканчивая конечной точкой в конце. петли. На последнем шаге он добавляет поля в контейнер, если бы это была форма, тогда эта форма просто передавалась бы с этими значениями.
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.