динамически добавлять наборы элементов формы n раз

Question

Я работаю над приложением, которое позволяет пользователям вводить часы работы ресторана. У меня есть код формы, настроенный так:

<div class="hourswrapper">
            Days:
            <input type="checkbox" name="day1[]" value="1" />M
            <input type="checkbox" name="day1[]" value="2" />Tu
            <input type="checkbox" name="day1[]" value="3" />W
            <input type="checkbox" name="day1[]" value="4" />Th
            <input type="checkbox" name="day1[]" value="5" />F
            <input type="checkbox" name="day1[]" value="6" />Sa
            <input type="checkbox" name="day1[]" value="7" />Su
            <br />
            Opening Time:
            <select name="starthour1">
                <option value="12">12</option>
                <option value="01">1</option>
                <option value="02">2</option>
                <option value="03">3</option>
                <option value="04">4</option>
                <option value="05">5</option>
                <option value="06">6</option>
                <option value="07">7</option>
                <option value="08">8</option>
                <option value="09">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
            </select> : 
            <select name="startminute1">
                <option value="00">00</option>
                <option value="15">15</option>
                <option value="30">30</option>
                <option value="45">45</option>
                <option value="59">59</option>
            </select> 
            <select name="startwhen1">
                <option value="am">am</option>
                <option value="pm">pm</option>
            </select><br />
            Closing Time:
            <select name="endhour1">
                <option value="12">12</option>
                <option value="01">1</option>
                <option value="02">2</option>
                <option value="03">3</option>
                <option value="04">4</option>
                <option value="05">5</option>
                <option value="06">6</option>
                <option value="07">7</option>
                <option value="08">8</option>
                <option value="09">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
            </select> : 
            <select name="endminute1">
                <option value="00">00</option>
                <option value="15">15</option>
                <option value="30">30</option>
                <option value="45">45</option>
                <option value="59">59</option>
            </select> 
            <select name="endwhen1">
                <option value="am">am</option>
                <option value="pm">pm</option>
            </select><br />
            <input type="checkbox" name="24hours[]" value="yes" />Open 24 Hours
        </div>

так что в основном человек выбирает набор часов и отмечает, к каким дням они относятся. Конечно, может быть несколько наборов часов (например, если ресторан открыт 12-2 один день, но 12-5 другой). Я хотел бы иметь кнопку «Добавить больше часов», которая дублирует этот код при нажатии, однако необходимо много раз.

каков наилучший способ сделать это? Как вы динамически добавляете элемент формы без необходимости скрывать его в начале? Как установить разные пронумерованные имена для каждого набора часов, а затем узнать, сколько нужно получить доступ (с помощью поста PHP)? Я предполагаю, что мне понадобится функция JavaScript, которая отслеживает, сколько было добавлено.

В качестве альтернативы, я открыт для предложений о том, как представлять входные данные по-разному / лучше, возможно, таким способом, который не требует динамического создания элементов формы. я хочу ограничить ввод данных пользователем, поэтому мне не нужно беспокоиться о разборе странных записей, поэтому я не хочу просто иметь текстовое поле для ввода на каждый день.

спасибо.

Answer 1

Вероятно, лучше всего использовать JavaScript / JQuery для динамического добавления новых элементов, а затем использовать foreach в вашем PHP-скрипте для обработки всех входных данных?

Надеюсь, это поможет.

Y.J.

Answer 2

Вот небольшой пример дублирования ввода часов, в зависимости от которого установлен флажок.Каждый час div получает свой собственный уникальный идентификатор (см. Часть кода attr('id',hrsDivID) ниже).Подражайте этому, чтобы переименовать ваши входы / выбор.Подробнее см. http://jquery.com/ и http://api.jquery.com/.

<head>
    <script type="text/javascript" src="/shared/javascript/jquery.js"></script>
</head>
<div id="hours" style='display:none'>
    Opening Time:
    <select name="starthour1">
        <option value="12">12</option>
        <option value="01">1</option>
        <option value="02">2</option>
        <option value="03">3</option>
        <option value="04">4</option>
        <option value="05">5</option>
        <option value="06">6</option>
        <option value="07">7</option>
        <option value="08">8</option>
        <option value="09">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
    </select> : 
    <select name="startminute1">
        <option value="00">00</option>
        <option value="15">15</option>
        <option value="30">30</option>
        <option value="45">45</option>
        <option value="59">59</option>
    </select> 
    <select name="startwhen1">
        <option value="am">am</option>
        <option value="pm">pm</option>
    </select><br />
    Closing Time:
    <select name="endhour1">
        <option value="12">12</option>
        <option value="01">1</option>
        <option value="02">2</option>
        <option value="03">3</option>
        <option value="04">4</option>
        <option value="05">5</option>
        <option value="06">6</option>
        <option value="07">7</option>
        <option value="08">8</option>
        <option value="09">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
    </select> : 
    <select name="endminute1">
        <option value="00">00</option>
        <option value="15">15</option>
        <option value="30">30</option>
        <option value="45">45</option>
        <option value="59">59</option>
    </select> 
    <select name="endwhen1">
        <option value="am">am</option>
        <option value="pm">pm</option>
    </select><br />
    <input type="checkbox" name="24hours[]" value="yes" />Open 24 Hours
</div>
Days:
<div id='day1'>
            <input type="checkbox"  name="day1[]" value="1" onClick="addHours('day1');" >M
</div>
<div id='day2'>
            <input type="checkbox" name="day1[]" value="2" onClick="addHours('day2');" />Tu
</div>
<div id='day3'>
            <input type="checkbox" name="day1[]" value="3" onClick="addHours('day3');" />W
</div>
<div id='day4'>
            <input type="checkbox" name="day1[]" value="4" onClick="addHours('day4');" />Th
</div>
<div id='day5'>
            <input type="checkbox" name="day1[]" value="5" onClick="addHours('day5');" />F
</div>
<div id='day6'>
            <input type="checkbox" name="day1[]" value="6"  onClick="addHours('day6');"/>Sa
</div>
<div id='day7'>
            <input type="checkbox" name="day1[]" value="7"  onClick="addHours('day7');"/>Su
</div>
<script>
function addHours(divID){
    var d = document.getElementById(divID);
    var hrsDivID = divID+'_hours_div';
    $('#hours').clone().attr('id',hrsDivID).css('display','').appendTo(d);
    return false;
}
</script>

Answer 3

Оформить заказ http://www.w3schools.com/dom/dom_node.asp

В частности, методы cloneNode и appendChild