Two issues with function to clone rows in a form

Question

I am using a simple method of cloning rows on a form. You can see the webpage here.

This is the script I am using to do the cloning:

$(document).ready(function() {

            $(".add").click(function() {
                $("form > p:first-child").clone(true).insertBefore("form > p:last-child");
                return false;
            });

            $(".remove").click(function() {
                $(this).parent().remove();
            });

        });

and here is the form html:

    <form method="post" action="bookingengine.php">
        <p>
            <label>Full Name:</label> <input type="text" name="name" id="name">
            <label>Email:</label> <input type="text" name="email" id="email">
            <label>Telephone:</label> <input type="text" name="telephone" id="telephone">
            <span class="remove">Remove</span>
        </p>
        <p>
            <span class="add">Add fields</span><br /><br /><input type="submit" name="submit" id="submit" value="Submit" class="submit-button" />
        </p>

    </form>

There are two issues that I am having with this, which make me wonder whether cloning is the best method:

1. If the user has already entered information into the text boxes, then these are cloned along with the text boxes themselves, and I don't want this to happen. I would like add rows added to be empty.

2. The information is to be submitted to an email address using PHP. Here is the PHP:

$EmailFrom = ""; $EmailTo = ""; $Subject = "Booking on Retreat"; $Name = Trim(stripslashes($_POST['name'])); $Email = Trim(stripslashes($_POST['email'])); $Telephone = Trim(stripslashes($_POST['telephone']));

$validationOK=true; if (!$validationOK) { print ""; exit; }

$Body = "New bookings have been made for the Retreat as follows:"; $Body .= "\n"; $Body .= "\n"; $Body .= "name: "; $Body .= $Name; $Body .= "\n"; $Body .= "\n"; $Body .= "email: "; $Body .= $Email; $Body .= "\n"; $Body .= "\n"; $Body .= "telephone: "; $Body .= $Telephone; $Body .= "\n";

$success = mail($EmailTo, $Subject, $Body, "From: ");

if ($success){ print ""; } else{ print ""; } ?>

What I am seeing is that only the last row in the form is being added to the email, presumably because there are not unique names or IDs for each textbox. So again I am wondering if the clone method is best suited to this task, and if it is, how I can alter my code to include all rows in the email.

Thanks,

Nick

Answer 1

To work with the PHP, you need to convert the inputs into 'arrays', by appending the 2-character sequence '[]' to the end of the input's name (see #3 on http://php.net/faq.html for more detail).

As for cloning the objects with the values, it should be pretty simple to clear out the values in the newest added inputs as a last step of $(".add")'s 'click' handler.

    $(document).ready(function() {

        $(".add").click(function() {
            var x = $("form > p:first-child").clone(true).insertBefore("form > p:last-child");
            x.find('input').each(function() { this.value = ''; });
            return false;
        });

        $(".remove").click(function() {
            $(this).parent().remove();
        });

    });