i have contact form:
<form id="contactus" name="contactus" action="html_form_send1.php" method="post"> <label for="name">name:</label><br /> <input type="text" id="name" name="name" maxlength="50" size="59" autofocus required/><br /><br /> <label for="email">e-mail address:</label><br /> <input type="email" id="email" name="email" maxlength="50" size="59" required/><br /><br /> <label for="question">question:</label><br /> <textarea id="question" name="question" maxlength="1000" cols="50" rows="6" required></textarea><br /><br /> <input class="c1_scbutton" type="submit" id="submit" name="submit" value="send" /> </form> i want call mail php script using ajax code:
var msg = ""; name = $("#name").val(); email = $("#email").val(); question = $("#question").val(); //validation phase function isvalidemailaddress(emailaddress) { var pattern = new regexp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00a0-\ud7ff\uf900-\ufdcf\ufdf0-\uffef])+(\.([az]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00a0-\ud7ff\uf900-\ufdcf\ufdf0-\uffef])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00a0-\ud7ff\uf900-\ufdcf\ufdf0-\uffef])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00a0-\ud7ff\uf900-\ufdcf\ufdf0-\uffef]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00a0-\ud7ff\uf900-\ufdcf\ufdf0-\uffef])|(([a-z]|\d|[\u00a0-\ud7ff\uf900-\ufdcf\ufdf0-\uffef])([a-z]|\d|-|\.|_|~|[\u00a0-\ud7ff\uf900-\ufdcf\ufdf0-\uffef])*([a-z]|\d|[\u00a0-\ud7ff\uf900-\ufdcf\ufdf0-\uffef])))\.)+(([a-z]|[\u00a0-\ud7ff\uf900-\ufdcf\ufdf0-\uffef])|(([a-z]|[\u00a0-\ud7ff\uf900-\ufdcf\ufdf0-\uffef])([a-z]|\d|-|\.|_|~|[\u00a0-\ud7ff\uf900-\ufdcf\ufdf0-\uffef])*([a-z]|[\u00a0-\ud7ff\uf900-\ufdcf\ufdf0-\uffef])))\.?$/i); return pattern.test(emailaddress); }; function validate(e) { if (name == "") { msg = " valid name"; } if (!isvalidemailaddress(email)) { msg = msg + " valid email address"; } if (question == "") { msg = msg + " valid question or comment"; } } // on submit, validate post php mailer script $(function() { $("#contactus").on('submit', function(e) { e.preventdefault(); validate(e); if msg != "" { e.preventdefault(); $("#alert").html "please enter a" + msg; } else { $.post('/html_form_send1.php', $(this).serialize(), function(data) { $('#alert').css(color: "black") $('#alert').html("<h2>thank contacting us!</h2>") .append("<p>we in touch soon.</p>"); }).error(function() { $('#alert').css(color: "red") $('#alert').html("<h2>something went wrong. question not submitted. /n</h2>").append("<p>please try again later or email @ <a href=href=" mailto: support@ allegroaffiliates.com ? subject = contact form " target=" _top ">support@allegroaffiliates.com.</a> </p>"); }); }; }); }); the script called @ bottom of html page after script, isn't loading. suspect due code error can't find error. can give me idea why wont load?
side note: know html5 validate script, have validation in place when html5 not available.
thank help.
a few troubleshooting suggestions:
(1) when specifying ajax processor file, either $.post('html_form_send1.php' or $.post('./html_form_send1.php' not $.post('/html_form_send1.php'
(2) instead of using shortcut code $.post(), use full form of method until pretty @ it:
var varvalue = $('#first_name').val(); var nutherval = $('#last_name').val(); $.ajax({ type: 'post', url: 'your_secondary_file.php', data: 'varname=' +varvalue+ '&lname=' +nutherval, success: function(d){ if (d.length) alert(d); } }); (3) disable validation routine until rest working, work on when know else working correctly
(4) change ajax processor file html_form_send1.php echo response make sure you've got ajax working. then, once response, change echo variable sending. build final desired product. initially, dead simple, this:
your_secondary_file.php:
<?php $first_name = $_post['varname']; $last_name = $_post['lname']; echo 'received: ' .$first_name .' '. $last_name; die(); (5) instead of using .serialize(), grab 1 or 2 field values manually , working first. note .serialize() produces json data, while simpler method straight posted values, in sample code in answer. working first, optimize.
(6) note datatype: parameter in ajax code block code coming back php side, not code going to php side. note default value html, if aren't sending json object leave param out.
(7) in ajax , php code samples above, note correlation between javascript variable name, how referenced in ajax code block, , how received on php side. deliberate in names chose allow follow var name => var value pairing way through.
for example, input field id first_name stored in variable called varvalue (dumb name intentional). data transmitted in ajax code block variable named varname, , received on php side $_post['varname'], , stored in php $first_name
review some simple ajax examples - copy them system , play them bit.
Comments
Post a Comment