Databases
StackOverflow2013
Postsdbo
POSending contact form data using Ajax/jQuery/PHP
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSending contact form data using Ajax/jQuery/PHP
    text
    copied!<p>I had a functioning contact form, but decided to try learn a little Ajax to improve usability and error checking. I'm using code from this <a href="http://www.dzyngiri.com/slick-contact-form-using-jquery-php" rel="nofollow"><strong>example</strong></a> which I've adapted slightly to accommodate the new .ajaxComplete() guidelines.</p> <p>I've zero idea why this isn't working, but I'll provide both my form, ajax request and working example in the hope someone can help:</p> <p><a href="http://investmentproperty.uk.com/contact/" rel="nofollow"><strong>My website</strong></a></p> <p><strong>JS</strong></p> <pre><code>$(document).ready(function() { $("#get-contact-form").submit(function() { var str = $(this).serialize(); $.ajax({ type: "POST", url: "contact-process.php", data: str, success: function(msg) { $(document).ajaxComplete(function(event, request, settings) { if (msg == 'OK') { result = '&lt;div class="notification_ok"&gt;Your message has been sent Succesfully. Thank you!!!&lt;/div&gt;'; $("#fields").hide(); } else { result = msg; } $("#note").hide(); $("#note").html(result).slideDown("slow"); $("#note").html(result); }); } }); return false; }); }); </code></pre> <p><strong>PHP</strong> (Please note I've removed all validation here to make it easier to follow)</p> <pre><code>$title = $_POST["Form"]["title"]; $forename = trim($_POST["Form"]["forename"]); $surname = trim($_POST["Form"]["surname"]); $telephone = trim($_POST["Form"]["telephone"]); $email = trim($_POST["Form"]["email"]); $message = trim($_POST["Form"]["message"]); $name = $title . " " . $forename . " " . $surname; require_once("inc/PHPMailer/class.phpmailer.php"); $mail = new PHPMailer(); $email_body = ""; $email_body = $email_body . "&lt;h1 class='heading'&gt;&lt;strong&gt;Name:&lt;/strong&gt;&lt;/h1&gt;&lt;br /&gt;" . $name . "&lt;br /&gt;"; $email_body = $email_body . "&lt;h1 class='heading'&gt;&lt;strong&gt;Telephone Number:&lt;/strong&gt;&lt;/h1&gt;&lt;br /&gt;" . $telephone . "&lt;br /&gt;"; $email_body = $email_body . "&lt;h1 class='heading'&gt;&lt;strong&gt;Email:&lt;/strong&gt;&lt;/h1&gt;&lt;br /&gt;" . $email . "&lt;br /&gt;"; $email_body = $email_body . "&lt;h1 class='heading'&gt;&lt;strong&gt;Message:&lt;/strong&gt;&lt;/h1&gt;&lt;br /&gt;" . $message; $mail-&gt;IsSMTP(); $mail-&gt;SMTPAuth = true; $mail-&gt;SMTPSecure = "ssl"; $mail-&gt;Host = "smtp.gmail.com"; $mail-&gt;Port = 465; $mail-&gt;Username = "****"; $mail-&gt;Password = "****"; $mail-&gt;SetFrom($email, $name); $address = "*******"; $mail-&gt;AddAddress($address, "*****"); $mail-&gt;Subject = "Email Subject | " . $name; $mail-&gt;MsgHTML($email_body); </code></pre> <p><strong>HTML</strong></p> <pre><code>&lt;form class="cf form-contact" id="get-contact-form" action="javascript:alert('success!');" &gt; &lt;div id="note"&gt;&lt;/div&gt; &lt;div id="fields"&gt; &lt;div class="row grid-full"&gt; &lt;label for="title"&gt;Title&lt;/label&gt; &lt;select name="Form[title]" id="title"&gt; &lt;option value="Mr"&gt;Mr&lt;/option&gt; &lt;option value="Mrs"&gt;Mrs&lt;/option&gt; &lt;option value="Ms"&gt;Ms&lt;/option&gt; &lt;option value="Miss"&gt;Miss&lt;/option&gt; &lt;option value="Dr"&gt;Dr&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;div class="grid-2"&gt; &lt;label for="forname"&gt;First Name&lt;/label&gt; &lt;input type="text" name="Form[forename]" id="forename" /&gt; &lt;label for="surname"&gt;Last Name&lt;/label&gt; &lt;input type="text" name="Form[surname]" id="surname" /&gt; &lt;/div&gt; &lt;div class="grid-2"&gt; &lt;label for="telephone"&gt;Telephone&lt;/label&gt; &lt;input type="text" name="Form[telephone]" id="telephone" /&gt; &lt;label for="email"&gt;Email Address&lt;/label&gt; &lt;input type="text" name="Form[email]" id="email" /&gt; &lt;/div&gt; &lt;div class="row grid-4" style="display: none;"&gt; &lt;label for="address"&gt;Address&lt;/label&gt; &lt;input type="text" name="Form[address]" id="address" /&gt; &lt;p&gt;Please leave this field blank.&lt;/p&gt; &lt;/div&gt; &lt;div class="row grid-4"&gt; &lt;label for="message"&gt;Comments&lt;/label&gt; &lt;textarea rows="12" name="Form[message]" id="message"&gt;&lt;/textarea&gt; &lt;button type="submit" class="btn"&gt;Submit&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;/form&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload