堆栈内存溢出
  繁体   English   中英

动态添加n次表单元素集

[英]dynamically adding sets of form elements n times

 原文  2010-07-01 17:19:16  1   3    php/ javascript/ forms/ select

问题描述

我正在开发一个允许用户输入餐厅营业时间的应用程序。 我有这样的形式代码设置： 

<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函数来跟踪添加了多少个。

或者，我愿意就如何以不同/更好的方式呈现小时数输入提出建议，也许这不需要动态创建表单元素。 我确实想限制用户的输入，所以我不必担心解析奇怪的条目，这就是为什么我不想每天只有一个文本输入框。

谢谢。

3 个解决方案

解决方案1
 0  2010-07-01 19:56:48

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

特别是cloneNode和appendChild方法

解决方案2
 0  2010-07-01 20:38:05

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

希望这可以帮助。

J

解决方案3
 0  2010-07-01 20:45:08

这是一个简短的示例，它根据选中的复选框来复制小时数输入。 每个小时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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 根据用户选择动态添加表单元素 在表单中动态添加未知数量的多个选择元素 使用jQuery动态添加表单元素并使用PHP提交数据库 动态添加多个元素到Web表单-下拉菜单 对表单元素集的多个 AJAX 请求 每N次将类添加到foreach循环中 动态添加元素并处理事件 以zend形式动态显示元素 动态地在PHP中命名表单元素 如何动态创建表单元素
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM