PHP form submit without reloading
Question
I wanted to have the contact form in my webpage but I wanted it so that it does not refresh or open a new tab while submission. I followed this question Submit a php form and display its result on div without reloading page and implimented it.
It's working now. It sends an email but does not take values from the contact form. ie: The email body should be
Name: (name entered in the form)
Email: (email entered in the form)
Message: (message entered in the form)
But it's always :
Name:
Email:
Message:
Any help would be greatly appreciated.
Here's my HTML
<!DOCTYPE html> <html> <head> <title>FeedBack Form With Email Functionality</title> <style> .result{ padding: 20px; font-size: 16px; background-color: #ccc; color: #fff; } #contactme{ position:absolute; top:100px; width:833px; height:450px; background:#FFF; font-size:16px; color:#FFF; } #sub_button:hover{ cursor:pointer; } #sub_button { background:#F00; border: 0; display: block; width: 161px; height: 28px; } </style> </head> <body> <div id="contactme" style="font-family: 'Josefin Sans', sans-serif"> <div> <input type="text" id="name" name="name" value="" placeholder="Name" required="required" autofocus="autofocus" autocomplete="off" /> </div> <div> <input type="email" id="email" name="email" value="" placeholder="example@yourdomain.com" required="required" autocomplete="off" /> </div> <div> <textarea id="message" name="message" value="" placeholder="20 characters max." required="required" maxlength="50" autocomplete="off" ></textarea> </div> <div id="sub_button" style="position:absolute; top:30px; right:30px;"></div> </div> <div class="result"></div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(document).ready(function(){ $('#sub_button').click(function() { $.ajax({ type:"post", url:"insert1.php", data: $("#contactme").serialize(), success: function(response){ $(".result").html(response); } }); }); }); </script> </body> <!-- body ends here --> </html>
Here's my PHP :
<?php // Get values from form $name=$_POST['name']; $email=$_POST['email']; $data=$_POST['message']; $to = "email@gmail.com"; $subject = "From The Website"; $message = " Name: " . $name . "\\r\\n Email: " . $email . "\\r\\n Message: " . $data; $from = $name; $headers = "From:" . $from . "\\r\\n"; $headers .= "Content-type: text/plain; charset=UTF-8" . "\\r\\n"; if(@mail($to,$subject,$message,$headers)) { echo "Message was sent successfully!"; echo '<script>alert("Message was sent successfully!");</script>'; }else{ echo '<script>alert("Error in sending message! Please mail your message to email@gmail.com");</script>'; echo "Error in sending message! Please mail your message to email@gmail.com"; } echo '<script> self.close(); </script>'; ?>
3 answers
solution1
3 ACCPTED 2015-03-19 06:53:54
Using a html form element instead of a div should do the trick:
replace:
<div id="contactme" style="font-family: 'Josefin Sans', sans-serif">
<!-- [...] -->
</div>
with
<form id="contactme" method="post" style="font-family: 'Josefin Sans', sans-serif">
<!-- [...] -->
</form>
should work. For more information see http://api.jquery.com/serialize/
solution2
2 2015-03-19 07:00:56
$("<div id = 'test'><input name = 'zzz' value = 'zzz'/></div>").serialize()
""
Gives a blank value as an output, however
$("<form id = 'test'><input name = 'zzz' value = 'zzz'/></form>").serialize()
"zzz=zzz"
Therefore, your <div id = "contact-me"> should turn into a form and in the click handler you would need to call preventDefault() on the event.
$("#test").on('submit',function(e) {
e.preventDefault();
//Your ajax logic
});
This would work too.
solution3
1 2015-03-19 06:59:43
Run this HTML its working fine.
Use HTML form data instead of a div .
<form id="contactme" method="post">
<div style="font-family: 'Josefin Sans', sans-serif">
<div>
<input type="text" id="name" name="name" value="" placeholder="Name" required="required" autofocus="autofocus" autocomplete="off" />
</div>
<div>
<input type="email" id="email" name="email" value="" placeholder="example@yourdomain.com" required="required" autocomplete="off" />
</div>
<div>
<textarea id="message" name="message" value="" placeholder="20 characters max." required="required" maxlength="50" autocomplete="off" ></textarea>
</div>
<div id="sub_button" style="position:absolute; top:30px; right:30px;"></div>
</div>
</form>
<div class="result"></div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.