Question

I have the following code…

<h3>Guests</h3>
<form class="form-inline">
    <fieldset>                                  
        <label class="control-label" for="input01">First Name:</label>
            <input type="text" class="input-small" id="input01">                            
        <label class="control-label" for="input01">&nbsp;&nbsp;Middle Name:</label>
            <input type="text" class="input-small" id="input01">
        <label class="control-label" for="input01">&nbsp;&nbsp;Last Name:</label>
            <input type="text" class="input-small" id="input01">
        <label class="control-label" for="input01">&nbsp;&nbsp;Birthday:</label>
            <input type="text" class="input-small" id="input01">>                   
    </fieldset>
</form>

I would like to be able to add a button that says “Add more”, and let that add a new row of elements, eventually saving the form to a database. If I add a button that adds a row (this needs to add a record to the database. for records that are changed, I want to update the record in the database).

So the question, multi-parted is:

1. When they click on the “add more” button, I assume this is the best
   time to add a record to the database. And then when I save the
   form, I loop through and update all the records in the form. Or are
   there other ideas?
2. The main point: is there an example somewhere that someone can suggest as to how to loop through and perform the update?

Answer 1

I agree that saving the values to the database at the same time is not a good idea and think once again what are you trying here. When someone clicks “ADD MORE” you will have new rows then you add those rows value in the database But what about the initial ones…

may be this will help

    <label class="control-label" for="input01">First Name:</label>
        <input type="text" class="input-small" id="input01" name="firstname[]">                            
    <label class="control-label" for="input01">&nbsp;&nbsp;Middle Name:</label>
        <input type="text" class="input-small" id="input01" name="middlename[]">
    <label class="control-label" for="input01">&nbsp;&nbsp;Last Name:</label>
        <input type="text" class="input-small" id="input01" name="lastname[]">
    <label class="control-label" for="input01">&nbsp;&nbsp;Birthday:</label>
        <input type="text" class="input-small" id="input01" name=birthday[]>                   

now save the fields you want to appear when the button is clicked in a js var

var extras = $(‘fieldset’).clone();

then

$(“.yourAddButton”).click(function(){
$(“form”).append(extras);
});

at last dont forget to have the submit button to submit the form .