sorry if this seems like a silly question but I'm really stuck.
I'm using a form with php to allow users to send mail from my website and everything works fine except when you want to add more than one 'item', 'amount' and 'boxeach' to the form.
The script I use does duplicate the items but keeps them with the same name, which means that my php will only read and send one of them in the email. Is there any way to change that so all of those three elements are put in the email, with one appearing under the other?
This is the script I use to duplicate (used with a button):
<script>$(function() {
$('#copy').click(function(){
var content = $('#content').html();
var newdiv = $("<div>");
newdiv.html(content);
$('#content').after(newdiv);
});
});</script>
Here is my full html code:
<head>
<title>WHOLESALE ORDER</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>$(function() {
$('#copy').click(function(){
var content = $('#content').html();
var newdiv = $("<div>");
newdiv.html(content);
$('#content').after(newdiv);
});
});</script>
label,a
{
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
}
</style>
<script language="JavaScript" src="scripts/gen_validatorv31.js" type="text/javascript"></script>
</head>
<body>
<h2>WHOLESALE ORDER <strong><script type="text/javascript">
var date = new Date();
var month = new Array(7);
month[0] = "01";
month[1] = "02";
month[2] = "03";
month[3] = "04";
month[4] = "05";
month[5] = "06";
month[6] = "07";
month[7] = "08";
month[8] = "09";
month[9] = "10";
month[10] = "11";
month[11] = "12";
var year = date.getYear();
if (year < 2000) { year+=1900; }
document.write(date.getDate() + "/" + month[date.getMonth()] + "/" + year);
</script></strong></h2>
<form method="POST" name="contactform" action="contact-form-handler.php">
<p>
<table><tr><td>
<label for='name'>Name:</label> <br>
<input type="text" name="name">
</td>
<td>
<label for='email'>Email:</label> <br>
<input type="text" name="email">
</td></tr></table>
</p>
<p>
<table><tr><td>
<label for='address'>Delivery Address:</label> <br>
<input type="text" name="address">
</td>
<td>
<label for='telephone'>Telephone:</label> <br>
<input type="tel" name="telephone">
</td></tr></table>
</p>
<p>
<div id="content"><table><tr><td><label for='amount'><input type="text" name="amount"></label>
<label for='items'><select name="items">
<option value="APPLE BAG">APPLE BAG</option>
<option value="APPLE BRAMLEY">APPLE BRAMLEY</option></select></label>
<label for='boxeach'><select name="boxeach">
<option value="BOX">BOX</option>
<option value="EACH">EACH</option>
</select></label>
</td></tr></table></div>
</p>
<p>
<input type="button" id="copy" value="Add another item +"/>
</p>
<input type="submit" value="Submit"><br>
</form>
<script language="JavaScript">
var frmvalidator = new Validator("contactform");
frmvalidator.addValidation("name","req","Please provide your name");
frmvalidator.addValidation("email","req","Please provide your email");
frmvalidator.addValidation("email","email","Please enter a valid email address");
</script>
Here is my full php code:
<?php
$errors = '';
$myemail = '[email protected]';//
if(empty($_POST['name']) ||
empty($_POST['email']) ||
empty($_POST['items']) ||
empty($_POST['boxeach']) ||
empty($_POST['amount']))
{
$errors .= "\n Error: all fields are required";
}
$name = $_POST['name'];
$email_address = $_POST['email'];
$amount = $_POST['amount'];
$items = $_POST['items'];
$boxeach = $_POST['boxeach'];
if (!preg_match(
"/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i",
$email_address))
{
$errors .= "\n Error: Invalid email address";
}
if( empty($errors))
{
$to = $myemail;
$email_subject = "WHOLESALE ORDER $name";
$email_body = "You have received a new message. ".
" Here are the details:\n $name \n $email_address \n \n \n $amount $items $boxeach";
$headers = "From: $myemail\n";
$headers .= "Reply-To: $email_address";
mail($to,$email_subject,$email_body,$headers);
//redirect to the 'thank you' page
header('Location: contact-form-thank-you.html');
}
?>
When you click $("#copy) you create a div with information,that rewrites the privous one.
What you can do is to make a hidden input which will be outside of the #content div since you are rewriting it's html.
And on click when you create a div also append the information to your hidden input:
Then in php you will get $_POST["name_string"] which will be like "name1,name2,name3,". You can use explode function in php to create and array from this string: