html form <div> <form action="#"> <fieldset> <label for="name">Name <br /></label> <input type="text" name="name" value="" /> <label for="email">E-mail<br /></label> <input type="text" name="email" value="" /> <label for="msg">Message</label> <textarea cols="60" rows="10" name="msg" ></textarea> <br /> <input type="submit" name="submit" value="Submit"/> </fieldset> </form> <br /> <span>Please enter name !</span> <span>Please enter email address !</span> <span>Please enter valid email address !</span> <span>Please enter message !</span> </div>
jQuery(function() { jQuery('.error').hide(); jQuery(".button").click(function() { // validate and process form // first hide any error messages jQuery('.error').hide(); var name = jQuery("input#name").val(); if (name == "") { jQuery("span#name_error").show(); jQuery("input#name").focus(); return false; } var email = jQuery("input#email").val(); if (email == "") { jQuery("span#email_error").show(); jQuery("input#email").focus(); return false; } var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; if(!emailReg.test(email)) { jQuery("span#email_error2").show(); jQuery("input#email").focus(); return false; } var msg = jQuery("textarea#msg").val(); if (msg == "") { jQuery("span#msg_error").show(); jQuery("textarea#msg").focus(); return false; } var dataString = 'name='+ name + '&email=' + email + '&msg=' + msg; //alert (dataString);return false; jQuery.ajax({ type: "POST", url: "process.php", data: dataString, success: function() { jQuery('#contactform').html(" "); jQuery('#message').html("Contact Form Submitted!") .append("We will be in touch soon.
") .hide() .fadeIn(1500, function() { jQuery('#message'); }); } }); return false; }); });
Posted by Jhoe XD
0 Response to "[Web-development (jquery)] Contact form with jquery"
Post a Comment