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

结帐http://www.w3schools.com/dom/dom_node.asp

特别是cloneNode和appendChild方法

Answer 2

可能最好使用JavaScript / JQuery动态添加新元素，然后在PHP脚本中使用foreach来处理所有输入？

希望这有帮助。

Y.J。

Answer 3

这是一个快速的小例子，根据选中的复选框复制小时输入。每小时div获得其自己的唯一ID（请参阅下面代码的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>

动态添加表单元素集n次

3 个答案: