Блог

Я пытаюсь настроить форму, в которой на основе значения поля выбора 1,2,3,4 будет отображаться на странице следующий код только столько раз, сколько соответствует значению поля выбора.

 <div id='guestDetails'>
            <tr>
            <td>Guest ".$cnt."'s Name</td>
            <td>Guest ".$cnt."'s Address</td>
            <td>Guest ".$cnt."'s Phone</td>
            <td>Guest ".$cnt."'s Email</td>
            </tr>

            </tr>
            <tr>
            <td><input type='text' name='guest".$cnt."Name' /></td>
            <td><input type='text' name='guest".$cnt."Address' /></td>
            <td><input type='text' name='guest".$cnt."Phone' /></td>
            <td><input type='text' name='guest".$cnt."Email' /></td>
            </tr>

                </div>
  

Итак, если значение параметра select равно 2, то эти поля ввода будут отображаться 2 раза. Если значение изменить на 3, то они будут там 3 раза. Не совсем уверен, как это сделать.

Основной подход заключается в:

1) Создайте скрытый «шаблон», который мы будем копировать, и контейнер div, куда мы будем помещать копии:

 <div id='guest_detail_template' style='visibility:hidden;position:absolute'>
    <table>
        <tr>
            <td>Guest 's Name</td>
            <td>Guest 's Address</td>
            <td>Guest 's Phone</td>
            <td>Guest 's Email</td>
        </tr>
        <tr>
            <td><input type='text' name='guestName' /></td>
            <td><input type='text' name='guestAddress' /></td>
            <td><input type='text' name='guestPhone' /></td>
            <td><input type='text' name='guestEmail' /></td>
        </tr>
    </table>
</div>
<div id='guest_details'></div>
  

2) Настройте функцию, которая добавляет копию шаблона в контейнер. Вы используете .clone() метод jQuery selections для создания копии, исправляете стиль, чтобы копия не была скрыта, и используете append в контейнере (после его выбора), чтобы поместить новый элемент в конец.

 function add() {
    var item = $('#guest_detail_template').clone();
    item.attr({'style': ''});
    $('#guest_details').append(item);
}
  

3) Вызывайте функцию столько раз, сколько необходимо, или в любом контексте.

4) Чтобы сделать результирующую форму полезной, вам нужно знать, какое имя сочетается с каким адресом и т.д. Для этого вам понадобятся разные имена для <input> файлов в каждой <div> копии. Вы можете сделать это, используя .find для выбора <input> элементов в новом элементе, а затем вызвав .attr() еще раз, на этот раз с помощью какой-либо вложенной функции, чтобы внести соответствующие изменения в имя, указанное в шаблоне. (Подсказка: передайте значение, которое вы в данный момент вызываете $cnt в качестве параметра add() , и соедините его там, где это уместно.)

Добавьте прослушиватель событий в поле выбора,

 $("#number_of_inputs").change(function() { /* value has changed */ });
  

Вы можете получить выбранный номер в обратном вызове .change с помощью

 Number($(this).val());
  

Затем напишите функцию, которая принимает индекс и генерирует указанную вами разметку, после чего очистите содержащий div и добавьте к нему вызов функции в цикле. Например:

 $("#number_of_inputs").change(function() {
  $("#container").html("");
  for (var i = 0; i < Number($(this).val());   i) {
    $("#container").append(generateForm(i));
  } 
});
  

Во-первых, ваша разметка может быть неправильной. Вы не должны помещать такой DIV между TRS.

Вот подход к копированию ваших входных элементов:

Добавьте идентификатор, скажем guestInputs , к TR, который содержит ваши входные элементы.

Добавьте прослушиватель в select — $("#selectID").change(methodName)

В этом методе получите число, выбранное пользователем с помощью $("#select").val()*1 , и используйте его для выполнения цикла и создания новых полей ввода, как показано ниже.

 var newRow = $("#guestInputs").clone(); // clone the item
newRow.attr("id", "guestInputsNew"); // change the ID to avoid conflict
$("#guestInputs").parent().append(newRow); // append it to the table
  

Обратите внимание, что вы можете захотеть изменить несколько идентификаторов в новой строке, прежде чем присоединять ее к таблице.

Простое добавление HTML в вашем случае не сработает. Переменные PHP должны быть жестко закодированы, иначе они будут отображаться в виде текста. Вам нужно будет либо выполнить некоторый AJAX, либо написать весь HTML для шаблона на стороне сервера, затем немного поработать с JavaScript.

Вы можете сделать вот так. Это не совсем то, что вы делаете, но я надеюсь, вы сможете понять, как это сделать.

HTML:

 <select id="number">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
<div id="display_section">
    <input type="text" name="txt[]" value="" />
<div>
  

Javascript:

 $(document).ready(function() {
    var append_str = '<input type="text" name="txt[]" value="" /><br />';

    $('#number').change(function() {
        var total = parseInt($(this).val());
        $('#display_section').html(function() {
            var temp_str = '';
            for (i = 0; i < total; i  ) {
                temp_str = temp_str   append_str;
            }

            return temp_str;
        });
    });
});
  

ДЕМОНСТРАЦИЯ:
http://jsfiddle.net/ynhat/tA4wH/5 /