jquery - PHP email form without Refreshing Page -
i trying set page when form submitted emails , message displayed without refreshing page.
i have tried using jquery/ajax cannot emails sent
without ajax/jquery, php works fine doesnt include refresh feature
any appreciated
php (submitform.php):
<?php $name = isset($_post['name']); $email = isset($_post['email']); $phone = isset($_post['phone']); $message = isset($_post['message']); $feedback = ''; if($name && $email && $phone && $message) { $name = ($_post['name']); $email = ($_post['email']); $phone = ($_post['phone']); $message = ($_post['message']); } $to = "arshdsoni@gmail.com"; $subject = 'soni repairs - support request'; $body = <<<email hi there! name $name. message: $message. email is: $email phone number: $phone kind regards email; $header = "from: $email"; if($_post) { if($name == '' || $email == '' || $phone == '' || $message == '') { $feedback = "nothing received!"; } else { mail($to, $subject, $body, $header); $feedback = '*message received! receive reply shortly!'; } } ?>
jquery/ajax:
function submitform() { var name=document.getelementbyid('name').value; var datastring = 'name'+ name; $.ajax({ type:"post", url:"submitform.php", cache:false, success: function(html) { $('#feedback').html(html); } }); return false; }
form:
<form id="contact" action="#"> <h3>get in touch:</h3> <h4><span id="star" class="glyphicon glyphicon-asterisk"></span>we aim reply within 24 hours!</h4> <fieldset> <input name="name" placeholder="your name" type="text" tabindex="1" required> </fieldset> <fieldset> <input name="email" placeholder="your email address" type="email" tabindex="2" required> </fieldset> <fieldset> <input name="phone" placeholder="your phone number" type="tel" tabindex="3" required> </fieldset> <fieldset> <textarea id="textarea" name="message" placeholder="describe problem...." tabindex="5" required></textarea> </fieldset> <fieldset> <button name="submit" type="submit" id="contact-submit submitbtn" data-submit="...sending" "return submitform();">submit</button> </fieldset> </form>
issues:
- if use
document.getelementbyid
must use id on elements - add data ajax request
html:
<!doctype html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $( "#submitbtn" ).click(function( event ) { alert('pressed'); //values var name=document.getelementbyid('name').value; var email=document.getelementbyid('email').value; var phone=document.getelementbyid('phone').value; var message=document.getelementbyid('message').value; var datastring = {"name": name, "email":email, "phone": phone, "message":message} $.ajax({ type:"post", url:"submitform.php", data: datastring, success: function(html) { $('#feedback').html(html); } }); event.preventdefault(); }); }); </script> </head> <body> <form id="contact" method="post"> <h3>get in touch:</h3> <h4><span id="star" class="glyphicon glyphicon-asterisk"></span>we aim reply within 24 hours!</h4> <fieldset> <input id="name" placeholder="your name" type="text" tabindex="1" required> </fieldset> <fieldset> <input id="email" placeholder="your email address" type="email" tabindex="2" required> </fieldset> <fieldset> <input id="phone" placeholder="your phone number" type="tel" tabindex="3" required> </fieldset> <fieldset> <textarea id="message" placeholder="describe problem...." tabindex="5" required></textarea> </fieldset> <fieldset> <button name="submit" id="submitbtn">submit</button> </fieldset> </form> <div id="feedback"></div> </body> </html>
php
<?php if(isset($_post['name'], $_post['email'], $_post['phone'], $_post['message'])){ //post data $name = $_post['name']; $email = $_post['email']; $phone = $_post['phone']; $message = $_post['message']; //mail settings $to = "arshdsoni@gmail.com"; $subject = 'soni repairs - support request'; $body = <<<email hi there! name $name. message: $message. email is: $email phone number: $phone kind regards email; if(mail($to, $subject, $body, $header)){ $feedback = '*message sent! receive reply shortly!'; }else{ $feedback = '*message failed send'; } }else{ $feedback = 'missing params'; } echo $feedback;
Comments
Post a Comment