How would I go about showing the response from a submitted contact form (on the same page underneath the form) rather than sending the user to a new page after the submission?
I have seen some people creating a div element, and then putting the received response into it. Is that a recommended approach?
Here is what I have so far:
PHP:
<?php
$name =$_GET['name'];
$email =$_GET['name'];
$message =$_GET['name'];
$to = "support#loaidesign.co.uk";
$subject = "";
$message = "";
$headers = "From: $email";
if(mail($to,$subject,$message,$headers))
{
echo "<h2>Thank you for your comment</h2>";
}
else{
echo "<h2>Sorry, there has been an error</2>";
}
?>
and here is the HTML:
<div class="wrapperB">
<div class="content">
<form id="contactForm" action="assets/email.php" method="get">
<label for="name">Your Name</label>
<input name="name" id="name" type="text" required placeholder="Please enter your name">
<label for="email">Email Address</label>
<input name="email" id="email" type="email" required placeholder="Please enter your email address here">
<label for="message">Message</label>
<textarea name="message" id="message" required></textarea>
<button id="submit" type="submit">Send</button>
</form>
</div>
</div>
</div>
This is a working example using the suggested example from the JQuery site and pajaja's answer.
Solution:
Place this in the <head> of your webpage.
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
OR
Download JQuery and include it the same way.
Form:
Your contact form remains un-changed.
<form id="contactForm" action="assets/email.php" Method="POST">
<label for="name">Your Name</label>
<input name="name" type="text" required placeholder="Please enter your name">
<label for="email">Email Address</label>
<input name="email" type="email" required placeholder="Please enter your email address here">
<label for="message">Message</label>
<textarea name="message" required></textarea>
<button type="submit">Send</button>
</form>
Returned Data:
Add your response element where you want in the body.
<div id="contactResponse"></div>
Javascript:
Now place (preferably just before </body>) the javascript code:
<script>
$("#contactForm").submit(function(event)
{
/* stop form from submitting normally */
event.preventDefault();
/* get some values from elements on the page: */
var $form = $( this ),
$submit = $form.find( 'button[type="submit"]' ),
name_value = $form.find( 'input[name="name"]' ).val(),
email_value = $form.find( 'input[name="email"]' ).val(),
message_value = $form.find( 'textarea[name="message"]' ).val(),
url = $form.attr('action');
/* Send the data using post */
var posting = $.post( url, {
name: name_value,
email: email_value,
message: message_value
});
posting.done(function( data )
{
/* Put the results in a div */
$( "#contactResponse" ).html(data);
/* Change the button text. */
$submit.text('Sent, Thank you');
/* Disable the button. */
$submit.attr("disabled", true);
});
});
</script>
Action Script:
Your contact (PHP) file remains the same but change $_GET to $_POST:
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$to = "xxx#xxx.xxx";
$subject = "";
$message = "";
$headers = "From: $email";
if( mail($to,$subject,$message,$headers) )
{
echo "<h2>Thank you for your comment</h2>";
}
else
{
echo "<h2>Sorry, there has been an error</h2>";
}
?>
Result:
This should now send the data from the form on submit and then display the returned data in the #contactResponse element. The button will also set the text to "Sent, Thank you" while also disabling the button.
You will need to use ajax for that. The simplest solution is to get jQuery javascript library an use it's .post function for which you can find documentation and examples here. In your case it will look something like this:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#submit").click(function(){
var name_value = $("#name").val();
var email_value = $("#email").val();
var message_value = $("#message").val();
$.post("assets/email.php", { name: name_value, email: email_value, message: message_value }).done(function(data) {
$("#response").html(data);
});
});
})
</script>
Also your PHP code is wrong:
$name =$_GET['name'];
$email =$_GET['name'];
$message =$_GET['name']
You are getting $_GET['name'] for all 3 variables.
edit:
I added a complete example but it is not tested it's just so you can have an idea how to do what you want. Also since this is using HTTP POST request, you will need to edit your PHP so it gets values $_POST array, not $_GET. Also you will need to add a <div id="response"></div> where you want to display the response.
You can just keep it on the same page. For example, if your form is on contact.php, just echo your code like so:
<form action='' method='post'>
<input type='test' name='name' placeholder='Your name here' required='required' /><br />
<input type='submit' value='submit' name='contact' />
</form>
<?php
if(isset($_POST['contact']) && !empty($_POST['name'])){
echo "You submitted this form with value ".$_POST['name'].".";
}
?>
Of course this will reload that page. If you don't want the page to be reloaded, you need to use ajax.
I did this with the Jquery Form Plugin. There's another here.
My use case was a lot more involved. It included uploading a file along with some user entered fields and basic auth credentials in the header as well. The Form plugin handled them all using the normal $.ajax fields.
Related
I have a contact form on my website that is not posting the success or error message as it should.
The weird thing is I have used this exact same form, php, and ajax script on several other sites and it works great. In fact, it used to work great on the site in question.
The website is https://www.pouncingfoxdesign.com. The contact form is at the bottom. Feel free to fill it out for testing purposes.
Here's the form and script:
<div class="col-md-8 col-sm-9 wow form1 fadeInLeft">
<div class="contact-form clearfix contactForm">
<form id="form" action="php/email.php" class="contactForm"
method="post">
<div class="messages"></div>
<div class="input-field">
<input type="text" class="form-control" name="name"
placeholder="Your Name" required="">
</div>
<div class="input-field">
<input type="email" class="form-control"
name="email" placeholder="Your Email" required="">
</div>
<div class="input-field message">
<textarea name="message" class="form-control"
placeholder="Your Message" required=""></textarea>
</div>
<input type="submit" name="submit" class="btn btn-blue
pull-right" value="SEND MESSAGE" id="msg-submit">
<div class="g-recaptcha fadeInLeft" data-
sitekey=""></div>
</form>
</div> <!-- end .contact-form -->
</div> <!-- .col-md-8 -->
<script> $('#form').on('submit', function(e) {
event.preventDefault(); //Prevents default submit
var form = $(this);
var post_url = form.attr('action');
var post_data = form.serialize(); //Serialized the form data for
process.php
// $('#loader', '#form').html('<img src="img/forms/loading.gif" />
Please Wait...');
$.ajax({
type: 'POST',
url: 'php/email.php', // Your form script
data: post_data,
success: function(msg) {
var old_html = form.html()
$(form)
.html(msg).fadeIn();
setTimeout(function(){
$(form)
.html(old_html).fadeIn();
}, 4000);
},
error: function(xhr, ajaxOptions, err){
var old_html = form.html()
$(form).fadeOut(500)
.html("<h3>There was an error. Please try again.
</h3>").fadeIn();
setTimeout(function(){
$(form).fadeOut(500)
.html(old_html).fadeIn();
}, 3000);
}
});
});
</script>
And here's the PHP:
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$success = "
<div class=\"row-fluid\">
<div class=\"span12\">
<h1>Submission successful</h1>
<h3>Thank you for contacting us!</h3>
</div>
</div>";
$to = "email#email.com";
$subject = "$name\n filled Pouncing Fox Desing Form";
$txt = "From: $name\n E-Mail: $email\n Comments:\n $message";
$headers = "From: Pouncing Fox Design" . "\r\n" ;
if(isset($_POST['g-recaptcha-response'])){
$captcha=$_POST['g-recaptcha-response'];
}
if(!$captcha){
echo '<h2>Please check the the captcha form.</h2>';
exit;
}
$secretKey = "";
$ip = $_SERVER['REMOTE_ADDR'];
$response=file_get_contents
("https://www.google.com/recaptcha/api/siteverify?
secret=".$secretKey."&response=".$captcha."&remoteip=".$ip);
$responseKeys = json_decode($response,true);
if (mail($to, $subject, $txt, $headers)) {
echo "$success"
} else {
echo 'Form submission failed. Please try again...'; // failure
}
?>
What I want it to do is replace the form with the success message for a few seconds and then go back to the form. What it does instead is just go to the email.php file with the success message being all that's on the screen.
If you want to check out https://www.mooreengaging.com, the same script and php file is used for that site. It works great and you can see my intended results. Again, feel free to fill out the form for testing purposes.
I have tried to use other ajax scripts and have tried to rework it several different times, but no matter what when clicking submit it just loads the php file. It's like it is bypassing the ajax script altogether.
Thanks!
EDIT:
I have received the emails from you guys testing and they look right. So it is working, just not posting the success message as I'd like.
Ok, I figured it out. I added <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> to the top of the page under the header.
I thought it was best to put jquery at the bottom?
Did it fail because I was trying to run that script before it loaded jquery?
Change
$('#form').on('submit', function(e)
To
$('#form').on('submit', function(event)
Because you use
event.preventDefault();
I have set up a page that is still in construction and i'm building a webform for users to contact me.
When i fill the webform and hit the "send" button, message gets send succesfully and i receieve it on my mail...but when i hit the "send" button, i get re-directed off page, saying it was sent successfully.
How can i prompt user that the message was sent successfully, without getting redirected of page, and get the message in same window?
This is my HTML code
<form action="assets/php/contactUs.php" id="contact" class="form" role="form" method="post">
<div class="row">
<div class="col-xs-6 col-md-6 form-group">
<input class="form-control" id="name" name="name" placeholder="Name" type="text" required />
</div>
<div class="col-xs-6 col-md-6 form-group">
<input class="form-control" id="email" name="email" placeholder="Email" type="email" required />
</div>
</div>
<textarea class="form-control" id="message" name="message" placeholder="Message" rows="5"></textarea>
<div class="row">
<div class="col-xs-12 col-md-12">
<button class="btn btn btn-lg">Send Message</button>
</div>
</div>
</form>
And this is my contactUs.php code
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$message = <<<EMAIL
$message
From: $name
My email is: $email
EMAIL;
$to = "mymail#mymail.com";
$subject = "New Customer Enquiry";
mail($to, $subject, $message, "From: " . $email);
echo "Thank you, your message has been successfully sent!";
?>
AJAX
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('.btn-lg').click(function(){
$.post( "assets/php/contactUs.php", $( "#contact" ).serialize(), function(msg){
alert(msg);
} );
});
});
</script>
This is a result of successfully sent message.
Please guys help me out! Thanks!
REDIRECT OPTION
$firstpageurl = 'http://example.com';
echo "Your message has been successfully sent!";
$header('Location: '.$firstpageurl);
Use Ajax as below.Change the submit type button to a normal button by removing the type attribute.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('.btn-lg').click(function(event){
$.post( "config.php", $( "#contact" ).serialize(), function(msg){
alert(msg);
} );
event.preventDefault();
});
});
</script>
The action part of your form tag is "assets/php/contactUs.php"
<form action="assets/php/contactUs.php" id="contact" class="form" role="form" method="post">
That means that posting this form will bring you to that page. You can either code that page to send the email and redirect them back like this...
header('Location: '.$firstpageurl);
or put the php code into this first page and remove the entire action property. If you put the php on this page, you need to wrap your code in an if so that people can load the page before posting the form.
if (isset($_POST['email'])){
echo "Sent email";
[email send code here]
}
as for putting the message saying it's sent...that will only work with the second method. To do it without a full page load at all do it with ajax.
You want to use JQuery for that.
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$("#contact").submit(function(){
var form_data=$("form").serialize();
$.post( "assets/php/contactUs.php",form_data, function( data ) {
alert(data);
});
event.preventDefault();
});
</script>
You can do it without using Javascript. Do the following:
Set the form to post to itself (e.g. if your form was on index.php, set action="index.php"
When the page loads, check $_POST to see if the form values were sent.
If the $_POST values are empty, display the form
If the $_POST values are set, do what you need to do with those values, then output your results into the page.
Here's a really simple example demonstrating what I mean.
<?php
$submitted = false;
if (isset($_POST["myinput"]) && $_POST["myinput"] != '') {
$submitted = true;
}
?>
<?php
if ($submitted == false) {
?>
<form action="index.php" method="post">
<input name="myinput"><input type="submit">
</form>
<?php } else { ?>
<h1>Form Submitted</h1>
<?php } ?>
I'm pretty strong with PHP, but javascript is totally new to me.
I need to add various ajax functionality to my projects, for example for form validation etc.
I've done some searching, watched some tutorials, and come up with a basic working example as follows:
index.php:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ajax form test</title>
<style>
form input, form textarea {
display:block;
margin:1em;
}
form label {
display:inline;
}
form button {
padding:1em;
}
</style>
</head>
<body>
<h2>CONTACT FORM</h2>
<div id="form_content">
<form method="post" action="server.php" class="ajax">
<label for="name" value="name">name:</label>
<input type="text" name="name" placeholder="name" />
<label for="email" value="email">email:</label>
<input type="email" name="email" placeholder="email" />
<label for="message" value="message">message:</label>
<textarea name="message" placeholder="message"></textarea>
<input type="submit" value="send">
</form>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="main.js"></script>
</body>
</html>
main.js:
$('form.ajax').on('submit', function() {
console.log('trigger');
var that = $(this),
url = that.attr('action'),
type = that.attr('method'),
data = {};
that.find('[name]').each(function(index, value) {
var that = $(this),
name = that.attr('name'),
value = that.val();
data[name] = value;
});
$.ajax ({
url: url,
type: type,
data: data,
success: function(response) {
console.log(response);
$('#form_content').load('server.php', data);
}
});
return false;
});
and finally, server.php:
<?php
if (isset($_POST) AND $_POST['name'] !='' AND $_POST['email'] !='' AND $_POST['message'] !='')
{
?>
<h4>Your data was submitted as follows</h4>
<br />name: <?=$_POST['name']?>
<br />email: <?=$_POST['email']?>
<br />message: <?=$_POST['message']?>
<?php
} else {
?>
<h3>please fill in all form data correctly:</h3>
<form method="post" action="server.php" class="ajax">
<label for="name" value="name">name:</label>
<input type="text" name="name" placeholder="name" />
<label for="email" value="email">email:</label>
<input type="email" name="email" placeholder="email" />
<label for="message" value="message">message:</label>
<textarea name="message" placeholder="message"></textarea>
<input type="submit" value="send">
</form>
<?php
}
This all works fine, in that if I enter all form data and click submit, the ajax magic happens and I get a confirmation of the data. Also if not all data is loaded, the form is re-presented on the page. The problem is that in such a case, continuing to fill out the form data and then submit it loads the server.php page instead of repeating the ajax call until the form data is valid..
I'm sure there's a better way to do this as it's my first attempt, but I haven't been able to find any solution by searching either here or on google, but that's probably mostly because I don't really know what to search for. how can I make the behaviour in the first instance repeatable until the form is submitted correctly ?
This happens because you are removing your form element during your load() call and overwrite it with a new version of the form. Therefore all attached event handlers will vanish along with it.
You will need to use a delegate on an element that does not change:
$('#form_content').on('submit', 'form.ajax', function() {...});
Explanation:
In the above example, you attach the event listener to the #form_content element. However, it only listens to events that bubble up from the form.ajax submit event. Now, if you replace the form with a new version, the existing handler is attached higher up in the chain (on an element that doesn't get replaced) and continues to listen to events from lower elements, no matter if they change or not... therefore it will continue to work.
Your primary problem is that you are validating the form on the PHP side, when you should really validate it on the client side - THEN, instead of returning an appropriate response and continuing processing on the client side, you are finishing processing on the PHP side. Steve's answer (above) applies to what you are seeing.
As to the approach you have taken, it might be better to not use a <form> construction at all, because with AJAX you often don't need to. In my opinion, <form> is an archaic structure, not often needed in the age of AJAX. Notice how you had to add return false following the AJAX block to abort the default form functionality -- to stop it from sending the user over to server.php? That should tell you something.
Here is another way to structure it:
HTML:
<body>
<h2>CONTACT FORM</h2>
<div id="form_content">
<label for="name" value="name">name:</label>
<input type="text" name="name" placeholder="name" />
<label for="email" value="email">email:</label>
<input type="email" name="email" placeholder="email" />
<label for="message" value="message">message:</label>
<textarea name="message" placeholder="message"></textarea>
<input type="button" id="mybutt" value="send">
</div>
<div id="responseDiv"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="main.js"></script>
</body>
JAVASCRIPT/JQUERY:
$(document).ready(function() {
//Next line's construction only necessary if button is injected HTML
//$(document).on('click', '#mybutt', function() {
//Otherwise, use this one:
$('#mybutt').click(function() {
console.log('trigger');
var valid = "yes";
var that = $(this),
url = "server.php",
type = "POST",
data = {};
that.find('[name]').each(function(index, value) {
var that = $(this),
name = that.attr('name'),
value = that.val();
if (value=="") valid = "no";
data[name] = value;
});
if (valid == "yes") {
$.ajax ({
url: url,
type: type,
data: data,
success: function(response) {
console.log(response);
$('#responseDiv').html(response);
/* OPTIONALLY, depending on what you make the PHP side echo out, something like:
if (response == "allgood") {
window.location.href = "http://www.google.com";
}else{
//this is how you would handle server-side validation
alert('Please complete all fields');
}
*/
}
}); //END AJAX
}else{
alert('Please complete all fields');
}
}); //END button.click
}); //END document.ready
PHP Side: server.php
<?php
if (isset($_POST) AND $_POST['name'] !='' AND $_POST['email'] !='' AND $_POST['message'] !='') {
$r = '';
$r .= "<h4>Your data was submitted as follows</h4>";
$r .= "<br />name: " . $_POST['name'];
$r .= "<br />name: " . $_POST['email'];
$r .= "<br />name: " . $_POST['message'];
} else {
$r = "Please complete all form fields";
}
echo $r;
Right now, whenever I click the submit button on the contact form on my website, it brings me to the page www.mysite.com/php/function/email.php, rather than running the email.php in the background like I want it to.
The website is supposed to allow you to submit the contact form, then the button will fade away and fade in a "Your message has been sent!", then fade back the button.
HTML:
<form name="contact form" id='contact_form' method="post" action="php/function/email.php">
<div class="row half">
<div class="6u">
<input name="name" placeholder="Name" type="text" class="text" />
</div>
<div class="6u">
<input name="email" placeholder="Email" type="email" class="text" />
</div>
</div>
<div class="row half">
<div class="12u">
<textarea name="message" placeholder="Message"></textarea>
</div>
</div>
<div class="row half">
<div class="12u">
<input id="submit" name="submit" type="submit" value="Send Message" class="button button-icon icon icon-envelope" />
</div>
</div>
<p id="success" style="display:none">Your message has been sent! I'll get back to you soon!</p>
<p id="error" style="display:none">Please fill in all the fields and try again!</p>
JS:
$(document).ready(function(){
$('#send_message').click(function(e){
//Stop form submission & check the validation
e.preventDefault();
// Variable declaration
var name = $('#name').val();
var email = $('#email').val();
var subject = $('#subject').val();
var message = $('#message').val();
// Disable submit button just after the form processed 1st time successfully.
$('#send_message').attr({'disabled' : 'true', 'value' : 'Sending...' });
/* Post Ajax function of jQuery to get all the data from the submission of the form as soon as the form sends the values to email.php*/
$.post("email.php", $("#contact_form").serialize(),function(result){
//Check the result set from email.php file.
if(result == 'sent'){
//If the email is sent successfully, remove the submit button
$('#submit').remove();
//Display the success message
$('#success').fadeIn(500);
}else{
//Display the error message
$('#error').fadeIn(500);
// Enable the submit button again
$('#submit').removeAttr('disabled').attr('value', 'Send The Message');
}
});
}
});
};
PHP:
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$from = 'From: Example';
$to = 'example#gmail.com';
$subject = 'Example Contact Form';
$body = "
From: $name
Email: $email
---------------
Message: \n
$message";
if ($_POST['submit']) {
if (mail ($to, $subject, $body, $from)) {
echo 'sent';
} else {
echo 'failed';
}
}
?>
The .click() event of a <input type="submit"> isn't actually what causes the redirection. It instead becomes a .submit() event at the <form>.
You can either e.stopPropagation() so it doesn't reach the <form>.
//Stop form submission & check the validation
e.stopPropagation();
Or preventDefault() of the <form>'s .submit().
$('#contact_form').submit(function (e) {
e.preventDefault();
});
Note: You should also consider moving your code into a .submit() handler as most browsers support other ways of submitting a <form> than actually clicking the <input type="submit">.
The problem is that you're looking for click events on #send_message but your submit button has an id of submit. So that click event never happens.
I have already posted on the ajax section on this very board and was advised to ask some php gurus for help.
The main problem I have is that I cannot manage the variables which are set in a contact form are successfully emailed to me. So there must be an error in the php file itself, although it is just a very simple testfile.
The important part of my JS looks like this:
$("#submitQuote").live('click',function(){
var shirt_style = "shirt_style="+$(".dropdown[title=shirt_style] .dropdownValue").text();
var shirt_type = "&shirt_type="+$(".dropdown[title=shirt_type] .dropdownValue").text();
var cuffs = "&cuffs="+$(".dropdown[title=cuffs] .dropdownValue").text();
var chestpoket = "&chestpoket="+$(".dropdown[title=chestpoket] .dropdownValue").text();
var collar = "&collar="+$(".dropdown[title=collar] .dropdownValue").text();
var collar_buttons = "&collar_buttons="+$(".dropdown[title=collar_buttons] .dropdownValue").text();
var fastening = "&fastening="+$(".dropdown[title=fastening] .dropdownValue").text();
var cut = "&cut="+escape($(".dropdown[title=cut] .dropdownValue").text());
var Name = "&Name="+escape($("input[name=Name]").val());
var Email = "&Email="+escape($("input[name=Email]").val());
var Phonenumber = "&Phonenumber="+escape($("input[name=Phonenumber]").val());
var Address = "&Address="+escape($("input[name=Address]").val());
var Zipcode = "&Zipcode="+escape($("input[name=Zipcode]").val());
var City_country = "&City_country="+escape($("input[name=City_country]").val());
var Copy = "&Copy="+$(".checkbox[title=Copy]").hasClass("checkboxChecked");
var form_values1 = shirt_style+shirt_type+cuffs+chestpoket+collar+collar_buttons+fastening+cut;
var form_values2 = form_values1+Name+Email+Phonenumber+Address+Zipcode+City_country+Copy;
$.ajax({
type: "POST",
url: "http://www. .com/ajax/quote.php",
data: form_values2,
success: function() {
$('html,body').animate({scrollTop:290},1000);
$("#quoteStepContainer").html('');
$("#quoteStepContainer").html('<img src="http://www. ...com/img/sent.jpg" width="625" height="160" alt="Thanks" id="thanksImage" />');
$("#thanksImage").fadeIn(1000);
$("#quoteStepContainer").delay(1000).animate({"height": "190px"},1500);
}
});
return false;
});
the importnatn part of the html looks like this:
<form name="quoteForm" method="post" action="#">
<div id="quoteStep1" class="quoteStep">
<label>Shirt style</label>
<div class="dropdown" title="shirt_style"></div>
<label>Shirt type</label>
<div class="dropdown" title="shirt_type"></div>
<label>Collar</label>
<div class="dropdown" title="collar"></div>
<label>Collar Buttons</label>
<div class="dropdown" title="collar_buttons"></div>
<label>Cuffs</label>
<div class="dropdown" title="cuffs"></div>
<label>Chestpoket</label>
<div class="dropdown" title="chestpoket"></div>
<label>Fastening</label>
<div class="dropdown" title="fastening"></div>
<label>Cut</label>
<div class="dropdown" title="cut"></div>
</div>
<div id="quoteStep2" class="quoteStep">
<p class="stepText">Phew, the last step!</p>
<label>Your name</label>
<input type="text" name="Name" class="required" />
<label>E-mail</label>
<input type="text" name="Email" />
<label>Phone number</label>
<input type="text" name="Phonenumber" />
<label>Address</label>
<input type="text" name="Address" />
<label>Zip-code</label>
<input type="text" name="Zipcode" />
<label>City & Country</label>
<input type="text" name="City_country" />
<label>Want a copy of the form?</label>
<div class="checkbox" title="Copy"></div>
</div>
</form>
the input controls are defined over another js:
jQuery.fn.dropmenu = function (options,width) {
var title = jQuery(this).attr('title');
jQuery(this).css('width',width);
jQuery(this).append('<div class="dropdownValue" title="'+title+'">'+options[0]+'</div>');
jQuery(this).append('<ul class="dropdownList" title="'+title+'">');
for(i=0; i<options.length; i++) {
jQuery(this).parent().find('.dropdownList[title='+title+']').append('<li>'+options[i]+'</li>');
}
jQuery(this).parent().find('.dropdownList').hide();
jQuery(this).parent().find('.dropdownList').css('width',width);
jQuery(this).find('.dropdownList li:first').addClass('first');
jQuery(this).find('.dropdownList li:last').addClass('last');
jQuery('.dropdownValue').toggle(function(){
jQuery(this).parent().find('.dropdownList[title='+title+']').animate({"height": "toggle", "opacity": "toggle"}, 200);
jQuery(this).addClass("dropdownValueClicked");
jQuery('.dropdownList').not('.dropdownList[title='+title+']').hide();
}, function() {
jQuery(this).parent().find('.dropdownList[title='+title+']').animate({"height": "toggle", "opacity": "toggle"}, 200);
jQuery(this).removeClass("dropdownValueClicked");
jQuery('.dropdownList').not('.dropdownList[title='+title+']').hide();
});
jQuery('.dropdownList li').live('mouseenter',function() {
jQuery(this).stop().addClass("hover");
}).live('mouseleave', function() {
jQuery(this).stop().removeClass("hover");
});
jQuery('.dropdownList[title='+title+'] li').live('mousedown',function(){
jQuery('.dropdownValue').removeClass("dropdownValueClicked");
var value = jQuery(this).html();
jQuery(this).parent().animate({"height": "toggle", "opacity": "toggle"}, 200);
jQuery(this).parent().parent().find('.dropdownValue[title='+title+']').html(value);
});
}
and the test php that doesnt work looks like this:
<?php
$mail = $_POST['Email'];
$name = $_POST['Name'];
$to = "email#mydomain.com";
$message =" You received a mail from ".$mail;
$message .=" His name is : ".$name;
if(mail($to,$mail,$message)){
echo "mail successful send";
}
else{
echo "there's some errors to send the mail, verify your server options";
}
?>
Thank you very much for all your time and effort.
Aaron
The content of your form is never proccessed in your php script.
You have to wirte the values that where send to your script into thhe $message variable.
Example
<?php
$mail = $_POST['Email'];
$name = $_POST['Name'];
$to = "email#mydomain.com";
$message =" You received a mail from ".$mail;
$message .=" His name is : ".$name."\n";
//add content to your mail!!!
$message .= "Shirt style: {$_POST['shirt_style']}";
if(mail($to,$mail,$message)){
echo "mail successful send";
}
else{
echo "there's some errors to send the mail, verify your server options";
}
?>
Im back now and have checked everything.
It seems a bit trickier than expected.
Actually it seems that I only receive valid emails, which means emails which include the variables from the form when I use Safari.
On browsers like FF and IE I only receive the message without the variables.
So on Safari I get the email:
You received a mail from testmail#test.com
His name is : testname Shirt style: Short
on FF and IE I receive, with the same settings the message
You received a mail from His name
is : Shirt style:
Additionally I receive the error in IE
Access denied
Row: 127 Sign: 287 Code: 0 URI:
http://www. .com/js/jquery.min.js
I do not receive an error message when viewing in FF with firebug.