dynamically adding sets of form elements n times

Question

i'm working on an application that lets users enter the opening hours for a restaurant. i have the form code set up like this:

<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>

so basically the person chooses a set of hours and marks which days those apply to. of course there might be multiple sets of hours (ex. if a restaurant is open 12-2 one day but 12-5 another). i'd like to have a "Add More Hours" button that duplicates this same code when pressed, however many times is necessary.

what's the best way to go about this? how do you dynamically add a form element without needing to have it hidden at the beginning? how do i set different numbered names for each set of hours inputs, and later know how many to access (using PHP post)? i assume i'll need a javascript function that keeps track of how many have been added.

alternatively, i am open to suggestions on how to present hours inputs differently/better, perhaps a way that doesn't require dynamic creation of form elements. i do want to restrict the user's inputs so i don't have to worry about parsing weird entries, which is why i don't want to just have an text input box for each day.

thanks.

Answer 1

Checkout http://www.w3schools.com/dom/dom_node.asp

Particularly the cloneNode and appendChild methods

Answer 2

Probably best to use JavaScript/JQuery to dynamically add new elements, then use foreach in your PHP script to process all the inputs?

Hope this helps.

Y.J.

Answer 3

Here's a quick little example of duplicating the hours input based on which checkbox is checked. Each hours div gets its' own unique id (see the attr('id',hrsDivID) part of the code below). Mimic this to rename your inputs/selects. See http://jquery.com/ and http://api.jquery.com/ for more.

<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>