CODEWITHSUNDEEP
phpjqueryhtmltwitter-bootstrap
NinjaCat
NinjaCat

Reputation: 10194

How to add rows and submit form with jquery

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?

Upvotes: 0

Views: 963

Answers (2)

themightysapien
themightysapien

Reputation: 8369

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 .

Upvotes: 2

Ayman Safadi
Ayman Safadi

Reputation: 11552

I would suggest that the clicking on the "add more" button is not the best time to add a record to the database. Imagine someone clicking on the button and not actually fill out the row. It's cool that you want to get all fancy with your form and provide a more interactive user experience, but don't detract from "forms 101": Have a "submit/save" button. Validate before saving into the database. The logic is pretty simple: You'll need the row's ID hidden somewhere (probably a hidden text field). The logic goes something like, "I have received a $_POST. I have checked that the required data is present and OK. Do I have an ID? Yes: Update. No: Insert."

Upvotes: 4

Related Questions