Two issues with function to clone rows in a form
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:
If the user has alre开发者_开发百科ady 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.
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
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();
});
});
精彩评论