I am having trouble getting my javascript hyperlink button to post data to my php form email script. I have tried doing it several different ways, but nothing seems to work. Any help is appreciated. Thank you.
My form code:
<form id="form" action="contactform.php" method="POST" enctype="text/plain" >
<fieldset>
<label><strong>Your Name:</strong><input id="name" type="text" name="name"> </label>
<label><strong>Your Phone Number:</strong><input id="phone" type="text" name="phone"></label>
<label><strong>Your E-mail:</strong><input id="email" type="text" name="email"></label>
<label><strong>Your Message:</strong><textarea id="message" name="message"></textarea></label>
<div class="btns"><a href="contacts.html" class="button">Clear</a><a href="#" onclick="document.getElementById('form').submit();" class="button">Send</a></div>
</fieldset>
</form>
Contactform.php:
<?php
var_dump($_POST);
if (isset($_POST['form'])) {
$name = $_POST['name'];
$phone = $_POST['phone'];
$visitor_email = $_POST['email'];
$message = $_POST['message'];
$email_from = 'emailaddress@gmail.com';
$email_subject = "Contact Form Submission";
$email_body = "Name: $name\n" . "Phone: $phone\n" . "Messge: $message";
$to= 'emailaddress@gmail.com';
$headers= "From: $email_from \r\n";
$headers.= "Reply-To: $visitor_email \r\n";
mail($to,$email_subject,$email_body,$headers);
echo "Thank you for your interest. I will contact you shortly.";
}else{
echo "It didn't work.";
}
?>
Also, I have the var_dump at the beginning of the php for debugging purposes only. Not going to be a part of the final code.
Remove enctype="text/plain" from the form tag, PHP doesn't support it.
See: method="post" enctype="text/plain" are not compatible?
While I know this does not answer your question there is no reason to use Javascript for this purpose (in the example above) as the HTML input elements will handle both of these functions automatically.
<input type="reset" value="Clear" />
<input type="submit" value="Send" />
I would only work on doing something like this for validating data and then I'd use the onsubmit action of the form (returning false if validation fails).
Just replace a tag as below.
<a href="Javascript:void(0);"
and also replace document.forms["myForm"].submit();
and add name="myForm" to your form.
Complete Code
<form id="form" action="contactform.php" method="POST" name="myForm">
<fieldset>
<label><strong>Your Name:</strong><input id="name" type="text" name="name"> </label>
<label><strong>Your Phone Number:</strong><input id="phone" type="text" name="phone"></label>
<label><strong>Your E-mail:</strong><input id="email" type="text" name="email"></label>
<label><strong>Your Message:</strong><textarea id="message" name="message"></textarea></label>
<div class="btns">
<a href="contacts.html" class="button">Clear</a>
<a href="Javascript:void(0)" onclick="document.forms['myForm'].submit();" class="button">Send</a></div>
</fieldset>
</form>
This will work:
<a href="#" onclick="document.form.submit();" class="button">Send</a>
You don't need to getElementById, you can simply reference it this way.
I tested this and it works....
<html>
<body>
<form id="form" action="contactform.php" method="POST">
<fieldset>
<label><strong>Your Name:</strong><input name="name" type="text" name="name"> </label>
<label><strong>Your Phone Number:</strong><input name="phone" type="text" name="phone"></label>
<label><strong>Your E-mail:</strong><input name="email" type="text" name="email"></label>
<label><strong>Your Message:</strong><textarea name="message" name="message"></textarea></label>
<div class="btns"><a href="contacts.html" class="button">Clear</a><a href="#" onclick="document.forms[0].submit();" class="button">Send</a></div>
</fieldset>
</form>
</body>
</html>
<?php
var_dump($_REQUEST);
echo "<BR>";
foreach ( $_POST as $key => $value )
{
echo $key . " " . "=" . " " . $value;
echo "<BR>";
}
?>
Some other tips for you to consider are:
- don't use
<strong>. instead use css classes as you did with the hyperlink. example label { font-weight:bold } or <label class='strong'>
- consider using jquery and unobtrusive javascript. example
$("form").first().on("submit",function...
- don't apply the label over the input. simply close the label tag and then use the input, or use
<label for="input1"> to match to an input and enable a checkbox when the text is clicked for example.
- specify a name attribute as that is what is sent to the server on post...the id is for script referencing in the browser
