We Keep Coding

Prevent people from sending multiple forms without page refresh

I've currently got a working PHP/AJAX form. It shows a form-message when the form is sent, or when it has an error. But, the page doesn't refresh when the form is sent, so it'll be easy to send multiple emails by just a simple double click (or even more clicks). Have a look at my code:
HTML
<form action="" method="POST">
<ul class="form-style-1">
<li>
<input type="text" id="mail-name" name="name" class="field-divided" maxlength="15" placeholder="Voornaam *" /> <input type="text" id="mail-lastname" name="lastname" class="field-divided" maxlength="15" placeholder="Achternaam" >
</li>
<li>
<input type="text" id="mail-email" name="email" placeholder="E-mail *" class="field-long" maxlength="40" >
</li>
<li>
<input type ="text" id="mail-phone" name="phone" placeholder="Telefoonnummer" class="field-long" maxlength = "15">
</li>
<button class="mail-submit" id="mail-submit" type="submit" name="submit">Versturen</button>
<span style="color: #0184b2; text-align: center; font-size: 20px; margin: 0 auto; display: block; padding-top: 10px;" class="form-message"></span>
</ul>
</form>
JS
$("form").on("submit",function(event){
event.preventDefault();
var name = $("#mail-name").val();
var lastname = $("#mail-lastname").val();
var email = $("#mail-email").val();
var phone = $("#mail-phone").val();
var subject = $("#mail-subject").val();
var information = $("#mail-information").val();
$.post("donation-contact.php",
{
name: name,
lastname: lastname,
email: email,
phone: phone,
submit: "yes"
},
function(data){
$(".form-message").html( data );
}
);
});
PHP
<?php
if (isset($_POST['submit'])) {
$email_to = "#";
$email_subject = "#";
$name = $_POST['name'];
$lastname = $_POST['lastname'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$errorEmpty = false;
$errorEmail = false;
if (empty($name)) {
echo "<span class='form-error'>Voer de verplichte velden in!</span>";
$errorEmpty = true;
}
elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
echo "<span class='form-error'>Geef een geldig E-mail!</span>";
$errorEmail = true;
}
else {
$formcontent=" Naam: $name \n\n Achternaam: $lastname \n\n Email: $email \n\n Telefoon: $phone";
$mailheader = "From: ".$_POST["email"]."\r\n";
$headers = "From: ". htmlspecialchars($_POST['name']) ." <" . $_POST['email'] . ">\r\n";
$headers .= "Reply-To: " . $_POST['email'] . "\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
mail($email_to, $email_subject, $formcontent, $mailheader);
echo "<span class='form-success'>De mail is verzonden!</span>";
}
}
?>
I've tried disabling the form button when it's being pressed. This works if the user doesn't make any mistakes, but it will also disable the button when it shows an error message.
Is there a way to disable the button only when the form is sent? Or to remove all the form input when the form is sent?
Thank you for your time

All you need is basically already present in your code.
You intercept the submission via
$("form").on("submit",function(event){
event.preventDefault();
// ...
This is the place to disable the submit button:
$("form").on("submit",function(event){
event.preventDefault();
$('#mail-submit').prop('disabled', true);
// ...
});
But you need a different treatment in the PHP script so that you can handle errors. Basiacally you need to send back a JSON object which will have a simple text property indicating the status (error / success) and a text property for the message (which may contain HTML).
PHP
if (empty($name)) {
$response = array('status' => 'error', 'message' => '<span class='form-error'>Voer de verplichte velden in!</span>');
$errorEmpty = true;
}
elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$response = array('status' => 'error', 'message' => '<span class='form-error'>Geef een geldig E-mail!</span>');
$errorEmail = true;
}
else {
// send email...
$response = array('status' => 'success', 'message' => '<span class='form-success'>De mail is verzonden!</span>');
}
// No matter what happened, send the respons as a JSON object for easy treatment in JavaScript
echo json_encode($response);
Now in JavaScript you will receive an object, instead of text in you callback function:
function(data) {
$(".form-message").html( data.message );
// If there was an error you must re-enable the submit button
if (data.status === 'error') {
$('#mail-submit').prop('disabled', false);
}
}

Javascript not getting called on form submit

I have a pretty simple form in html from which i am trying to send an email. I checked online for some tutorials sing js but most of them were not working. Here is my code the form is there but when i press submit the js function is not getting called rather it is not doing anything on the html form.
<form class="form-inline" id="contact-form" onSubmit="return false">
<center><p><input style="height:3vw;width:40vw;font-size:1.2vw;" type="text" class="form-control" size="30" placeholder=" Name" name="name" id="name" required></p>
<p><input style="height:3vw;width:40vw;font-size:1.2vw;" type="email" class="form-control" size="30" placeholder=" E-mail Address" name="email" id="email" required></p>
<p><input style="height:3vw;width:40vw;font-size:1.2vw;" type="text" class="form-control" size="30" placeholder=" Subject" name="subject" id="subject" required></p>
<p><textarea style="height:10vw;width:40vw;font-size:1.2vw;" placeholder=" Message..." class="form-control" name="message" id="message"></textarea></p>
<p><button type="submit" class="button" name="btn_submit" id="btn_submit">Send</button></p></center>
</form>
i have included the js file as it is after the <div> ending of the form
<script src="js/jquery-2.1.4.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/functions.js"></script>
functions.js file is as follows
//Contact Us
$("#btn_submit").click(function() {
//get input field values
var user_name = $('input[name=name]').val();
var user_email = $('input[name=email]').val();
var user_message = $('textarea[name=message]').val();
//simple validation at client's end
var proceed = true;
if(user_name==""){
proceed = false;
}
if(user_email==""){
proceed = false;
}
if(user_message=="") {
proceed = false;
}
//everything looks good! proceed...
if(proceed)
{
//data to be sent to server
post_data = {'userName':user_name, 'userEmail':user_email, 'userMessage':user_message};
//Ajax post data to server
$.post('contact_me.php', post_data, function(response){
//load json data from server and output message
if(response.type == 'error')
{
output = '<div class="alert-danger">'+response.text+'</div>';
}else{
output = '<div class="alert-success">'+response.text+'</div>';
//reset values in all input fields
$('.form-inline input').val('');
$('.form-inline textarea').val('');
}
$("#result").hide().html(output).slideDown();
}, 'json');
}
});
and my email handler is as follows :
<?php
if($_POST)
{
$to_Email = "email.com"; //Replace with recipient email address
//check if its an ajax request, exit if not
if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {
//exit script outputting json data
$output = json_encode(
array(
'type'=>'error',
'text' => 'Request must come from Ajax'
));
die($output);
}
//check $_POST vars are set, exit if any missing
if(!isset($_POST["userName"]) || !isset($_POST["userSubject"]) || !isset($_POST["userEmail"]) || !isset($_POST["userMessage"]))
{
$output = json_encode(array('type'=>'error', 'text' => 'Input fields are empty!'));
die($output);
}
//Sanitize input data using PHP filter_var().
$user_Name = filter_var($_POST["userName"], FILTER_SANITIZE_STRING);
$user_Email = filter_var($_POST["userEmail"], FILTER_SANITIZE_EMAIL);
$user_Subject = filter_var($_POST["userSubject"], FILTER_SANITIZE_STRING);
$user_Message = filter_var($_POST["userMessage"], FILTER_SANITIZE_STRING);
//additional php validation
if(strlen($user_Name)<3) // If length is less than 3 it will throw an HTTP error.
{
$output = json_encode(array('type'=>'error', 'text' => 'Name is too short or empty!'));
die($output);
}
if(!filter_var($user_Email, FILTER_VALIDATE_EMAIL)) //email validation
{
$output = json_encode(array('type'=>'error', 'text' => 'Please enter a valid email!'));
die($output);
}
if(strlen($user_Message)<5) //check emtpy message
{
$output = json_encode(array('type'=>'error', 'text' => 'Too short message! Please enter something.'));
die($output);
}
$subject = $user_Subject;
$message_Body = "<strong>Name: </strong>". $user_Name ."<br>";
$message_Body .= "<strong>Email: </strong>". $user_Email ."<br>";
$message_Body .= "<strong>Message: </strong>". $user_Message ."<br>";
$headers = "From: " . strip_tags($user_Email) . "\r\n";
$headers .= "Reply-To: ". strip_tags($user_Email) . "\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
//proceed with PHP email.
/*$headers = 'From: '.$user_Email.'' . "\r\n" .
'Reply-To: '.$user_Email.'' . "\r\n" .
'X-Mailer: PHP/' . phpversion();
*/
$sentMail = #mail($to_Email, $subject, $message_Body, $headers);
if(!$sentMail)
{
$output = json_encode(array('type'=>'error', 'text' => 'Could not send mail! Please check your PHP mail configuration.'));
die($output);
}else{
$output = json_encode(array('type'=>'message', 'text' => 'Hi '.$user_Name .' Thank you for contacting us.'));
die($output);
}
}
?>
On pressing submit the js file is not being called and there is no error in console either. Can anyone please help me out where i am making the mistake. Thank you.

You need to prevent the default form submission action which is to refresh the page.
You need to add a parameter to your function that can track the event and then call preventDefault() from that parameter:
$("#btn_submit").click(function(e) {
e.preventDefault();
...
}

Try replacing
$("#btn_submit").click(function() {
with
$(document).on("click,", "#btn_submit", function(){

You need to prevent the form from submitting, otherwise it will just directly submit and turn to the server-side.
You can do such a thing using jQuery:
$("#btn_submit").click(function(e) {
e.preventDefault();
//your code goes here after preventing submission
}

Ajax contact form not working in website

I'm just a beginner and trying to implement ajax contact form with php mailing script. But when I click on Submit nothing happens and nothing appears.
Below is my codes.
HTML
<form id="contactform" class="contact-form text-center" role="form">
<!-- IF MAIL SENT SUCCESSFULLY -->
<h6 class="success">
<span class="olored-text icon_check"></span> Your message has been sent successfully.</h6>
<!-- IF MAIL SENDING UNSUCCESSFULL -->
<h6 class="error">
<span class="colored-text icon_error-circle_alt"></span> E-mail must be valid.</h6>
<input id="cf-name" type="text" name="cf-name" placeholder="Your Name">
<input id="cf-email" type="email" name="cf-email" placeholder="Your Email">
<input id="cf-address" type="text" rows="7" name="cf-address" placeholder="Your Home Address">
<input id="cf-phone" type="text" rows="7" name="cf-phone" placeholder="Your Phone Number">
<input type="submit" class="button alt" value="Submit" id="submit" name="submit" data-style="expand-left"/>
</form>
Javascript
// Function for email address validation
function isValidEmail(emailAddress) {
var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(#((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(#\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
return pattern.test(emailAddress);
}
/* =================================
CONTACT FORM
=================================== */
$("#contactform").submit(function (e) {
e.preventDefault();
var name = $("#cf-name").val();
var email = $("#cf-email").val();
var address = $("#cf-address").val();
var message = $("#cf-phone").val();
var dataString = 'name=' + name + '&email=' + email + '&address=' + address + '&phone=' + message;
function isValidEmail(emailAddress) {
var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\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);
}
if (isValidEmail(email) && (message.length > 1) && (address.length > 1) && (name.length > 1)) {
$.ajax({
type: "POST",
url: "sendmail.php",
data: dataString,
success: function () {
$('.success').fadeIn(1000);
$('.error').fadeOut(500);
}
});
}
else {
$('.error').fadeIn(1000);
$('.success').fadeOut(500);
}
return false;
});
PHP
<?php
// Get values from jquery
$name = $_POST['name'];
$email = $_POST['email'];
$address = $_POST['address'];
$phone = $_POST['phone'];
$to = "name#email.com";
$subject = "New Email Subscriber";
$message = " Name: " . $name . "\r\n\r\n Email: " . $email . "\r\n\r\n Address: " . $address . "\r\n\r\n Phone: " . $phone;
$from = "ContactForm";
$headers = "From:" . $from . "\r\n";
$headers .= "Content-type: text/plain; charset=UTF-8" . "\r\n";
if (#mail($to, $subject, $message, $headers)) {
echo "success";
} else {
echo "invalid";
}
Can someone please fix this code? I don't what's wrong with it.
Thanks in advance.

It may have nothing to do with Ajax but the php native mail function; I recommend use something like phpMailer since they are much more reliable than native function.

send form data to admin email in codeIgniter

I am newer for codeigniter. I have an one contact form with fields of stream, name, email, contact. But I have an problem with form data are not send to admin email. When i tried to submit the data on contact form page source will alert but i have given other alert data.
I have tried following code,
$('#interiorid').submit(function (e) {
e.preventDefault();
var interiorstream = $('#interiorstream').val();
var interiorname = $('#interiorname').val();
var interiormobile = $('#interiormobile').val();
var interioremail = $('#interioremail').val();
var mobileVarify = /[0-9]/.test(interiormobile);
var regex = /^([a-zA-Z0-9_.+-])+\#(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
var dataString = 'interiorstream =' + interiorstream + '&interiorname =' + interiorname + '&interiormobile =' + interiormobile + '&interioremail =' + interioremail;
alert(interiorstream);
if (interiorstream == "0") {
alert('Please select Stream');
}
else {
if (interiorname.length > 2) {
if (mobileVarify == true && interiormobile.length == 10) {
if (regex.test(interioremail) == true) {
$.ajax({
url: 'interior_email',
type: 'post',
data: dataString,
success: function (msg, status) {
alert(status);
alert(msg);
$("#interiorid")[0].reset();
window.location.href = "/contact/thank-you";
}
});
}
else {
alert('Invalid Email');
}
}
else {
alert('Invalid Number');
}
}
else {
alert('Please enter name');
}
}
});
<!--- View ---->
<form id="interiorid">
<div class="form-div">
<select value="" id="interiorstream" >
<option value="0">Select a Stream</option>
<option value="Interior Designing">Interior Designing</option>
<option value="Fashion Designing">Fashion Designing</option>
</select>
</div>
<div class="form-div">
<input type="text" placeholder="Name" id="interiorname">
</div>
<div class="form-div">
<input type="text" placeholder="Phone" id="interiormobile">
</div>
<div class="form-div">
<input type="text" placeholder="Email" id="interioremail">
</div>
<div class="form-div">
<input type="submit" value="submit">
</div>
</form>
<!----Controller ---->
<?php
class Home extends CI_Controller {
function __construct() {
parent::__construct();
$this->load->helper('url');
$this->load->library('email');
$this->load->helper(array('url'));
}
function index() {
$this->load->view('templates/header');
$this->load->view('home');
$this->load->view('templates/footer');
$this->load->helper('form');
$this->load->view('interior/interior-intro');
}
function interior_email()
{
if (!isset($_POST['e-mail'])){
//redirect if no parameter e-mail
redirect(base_url());
}else{
$interiorstream = $this->input->post('interiorstream');
$interiorname = $this->input->post('interiorname');
$interiorphone = $this->input->post('interiorphone');
$interioremail = $this->input->post('interioremail');
$message = 'Hello Admin, This mail received from Interior design page contact form.<br/><br/>
Stream:' . $interiorstream . '<br/><br/>
Name :' . $interiorname . '<br/><br/>
Contact :' . $interiorphone . '<br><br>
Email :' . $interioremail;
$headers1 = "MIME-Version: 1.0\r\n";
$headers1 .= "Content-type: text/html; charset=iso-8859-1\r\n";
$headers1 .= "To:";
$headers1 .= "example.com <info#example.com>";
$headers1 .= "\r\n";
$headers1 .= 'From: INIFD : info#example.com' . "\r\n";
$headers1 .= "\r\n";
$subject = "Enquiry From example.com Web";
$email = 'admin#example.com';
if (mail($email, $subject, $message, $headers1)) {
echo 'mail has been sent';
} else {
echo 'mail sending failed';
}
}
}
}
?>
wrong popup like this:
So please help me.

If you are running on a localhost, it is near impossible to send emails. You can check this is if you really want to send Check this post out or try PHPMailer

Ajax/Json contact form is not working on this particular server

I have this landing page with contact form which is working without any problems on my regular hosting but It doesn't want to work on this VPS I was given access to. When I click "Send" button nothing is happening and email is not being sent. I checked mail() function and it seems to work on their server.
What could be the reason for ajax/json not working on this server?
Here's the JS code (core.js):
if ($('#contact').is(":visible")) {
$("#contact button").click(function() {
var name = $("#contactname").val();
var message = $("#contactmessage").val();
var email = $("#contactemail").val();
var emailReg = /^[a-zA-Z0-9._+-]+#[a-zA-Z0-9-]+\.[a-zA-Z]{2,4}(\.[a-zA-Z]{2,3})?(\.[a-zA-Z]{2,3})?$/;
// client-side validation
if(emailReg.test(email) == false) {
var emailValidation = false;
$('#contactemail').addClass("error");
}
else
$('#contactemail').removeClass("error");
if(name.length < 1) {
var nameValidation = false;
$('#contactname').addClass("error");
}
else
$('#contactname').removeClass("error");
if(message.length < 1) {
var messageValidation = false;
$('#contactmessage').addClass("error");
}
else
$('#contactmessage').removeClass("error");
if ((nameValidation == false) || (emailValidation == false) || (messageValidation == false))
return false;
$.ajax({
type: "post",
dataType: "json",
url: "send-email.php",
data: $("#contact").serialize(),
success: function(data) {
$('.form').html('<p class="success">Email sent. Thank you.</p>');
}
});
return false;
});
};
The PHP file (send-email.php):
<? if($_SERVER['REQUEST_METHOD'] == "POST" ) {
$destination = 'myemail#example.com'; // change this to your email.
$email = $_POST['email'];
$name = $_POST['name'];
$message = $_POST['message'];
$subject = $name;
$headers = "From: ".$name." <".$email.">\r\n" .
"Reply-To: ".$name." <".$email.">\r\n" .
"X-Mailer: PHP/" . phpversion() . "\r\n" .
"MIME-Version: 1.0\r\n" .
"Content-Type: text/plain; charset=\"iso-8859-1\r\n" .
"Content-Transfer-Encoding: 8bit\r\n\r\n";
mail($destination, $subject, $message, $headers);
}
And HTML:
<form class="contact" id="contact">
<div class="form">
<input type="text" name="name" placeholder="Name" id="contactname" />
<input type="text" name="email" placeholder="Email" id="contactemail" />
<textarea name="message" placeholder="Message" id="contactmessage"></textarea>
<button>Send</button>
</div>
</form>

The statement var emailValidation = false; inside IF is makes the variable emailValidation local to it. Similarly other variables too are local. Declare them in global scope, outside the conditions.

try using
$("#contact").serializeArray()