Переключить поле в зависимости от значения

Question

$(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 полей, чтобы клиент мог заполнить имена. Код выше не работает правильно. Что мне не хватает?

javascript jquery

-3

Engineer007 18 Дек 2015 в 17:44

Answer 1

Первая и самая главная ошибка, которую вы делаете, - это дублирование 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>

0

Praveen Kumar Purushothaman 18 Дек 2015 в 14:50

Answer 2

У вас не должно быть нескольких идентификаторов с одинаковым значением.

Это неправильный способ сделать это, вы должны генерировать 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);

});

Вот скрипка

0

void 18 Дек 2015 в 14:53

Answer 3

Каждый атрибут 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 и заканчивая конечной точкой в конце. петли. На последнем шаге он добавляет поля в контейнер, если бы это была форма, тогда эта форма просто передавалась бы с этими значениями.

0

SidOfc 18 Дек 2015 в 15:13

Переключить поле в зависимости от значения

3 ответа

Похожие вопросы

Новые вопросы

javascript