php - how to have a pop up contact form on submit display a confirmation message in the popup? -
i'm having great issues making contact form can seen on below visual. want contact form display on submit thank message or message of confirmation instead of redirecting contact.php file there isn't styles can see in action on provided link.
i've found information can jquery ajax i've tried displayed below, still can't seem work on submit show message in pop up.
does know easier way or maybe point me in right direction i've been trying fix god knows how long.
thank help
visual: http://madaxedesign.co.uk/dev/index.html
php & html:
<?php $your_email = "maxlynn@madaxedesign.co.uk"; $subject = "email madaxe"; $empty_fields_message = "<p>please go , complete fields in form.</p>"; $thankyou_message = "<p>thank you. message has been sent. reply possible.</p>"; $name = stripslashes($_post['txtname']); $email = stripslashes($_post['txtemail']); $message = stripslashes($_post['txtmessage']); if (!isset($_post['txtname'])) { ?> <form id="submit_message" class="hide_900" method="post" action="/contact.php" onsubmit="javascript: dosubmit();"> <div id="nameemail"> <div> <label for="txtname">name*</label> <input type="text" title="enter name" name="txtname" /> </div> <div> <label for="txtemail">email*</label> <input type="text" title="enter email address" name="txtemail" /> </div> </div> <div id="messagesubmit"> <div> <textarea maxlength="1200" title="enter message" name="txtmessage"></textarea> <label for="txtmessage">message</label> </div> <div class="submit"> <input type="submit" value="submit" /></label> </div> </div> </form> jquery:
function dosubmit(){ var postdata = jquery('#submit_message').serialize(); jquery.ajax({ url: '/contact.php', data: postdata }).done(function( html ) { alert(html); });
you can add return false; @ end of dosubmit function or following code prevent form redirect user action page.
var dosubmit = function (event) { var postdata = jquery('#submit_message').serialize(); jquery.ajax({ url: '/contact.php', data: postdata }).done(function( html ) { alert(html); }); event.preventdefault(); } $(function () { $('#submit_message').submit(dosubmit); }); modified htlm
<form id="submit_message"> ... </form> what code doing ?
first, defining function submit form data. notice event argument in function. first variable in function form values serialized in ajax-complient request string. .ajax() function sending datas server. note did not set type argument in .ajax() function, data going send using http method. finally, event.preventdefault() prevents submit event triggered in browser. when browser detect submit event, try submit form based on action , method parameters in <form> html tag. usually, submission performs user redirection action page. event.preventdefault() disable redirection. note event argument going set automatically jquery.
last part, $(function() { ... }); part means "execute part when document loaded." ensures element sumbit_message id exists before calling .submit() method. last method event binder. means when submit event fired on submit_message form, function dosubmit called.
i hope have better understanding of script. pretty basic one, if understand mechanics, become better jquery programmer. :)
