Question

This should be easy, but I am missing something.

I have the following form:

<div id="rsvp">
<form class="form-inline">    
    <fieldset>
        <label class="control-label" for="input01" id="rsvp_label">John Smith</label>
        <label class="control-label">Attending?:</label>          
        <label class="radio"><input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Yes</label>
        <label class="radio"><input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">No</label>            
        <label class="control-label small" for="select01" id="meal">&nbsp;&nbsp;Meal Selection:</label>
        <select id="selectMeal" class="input-small">
            <option>Chicken</option>
            <option>Beef</option>
        </select>
        <button type="submit" class="btn btn-primary" id="btnrsvp">Save / Confirm Changes</button>                      
    </fieldset>
</form>
</div>

I am successfully pulling out records in the database that match my query, and I have 1 -> n records. I’d like to clone this form for each record. So I can loop through the records, but am having trouble figuring out how to go about actually cloning the fieldset and then incrementing the ids so that I can attach a form action to each one. Or perhaps there’s a better way to do this… ?

Answer 1

If the whole form uses class instead of ID for elements you can clone and re-use at will without needing to parse ID’s. Track the record ID with a data attribute or a hidden input in each form.

If you have event handlers on any of the form field elements that are dependent on other fields in the form, you would simply look them up within the context of the individual form

Event handler example ( select ID changed to class):

 <select class="input-small selectMeal">
    <option>Chicken</option>
     <option>Beef</option>
 </select>

JS

$('.selectMeal').change(){
   var rsvp_name= $(this).closest('.form-inline').find('.rsvp_label').text();
   if( rsvp_name=='John Smith')  doSomething();
})