I'm trying to make my button change from saying "Submit" to "Submitting" when it's clicked. But it's for a form so if something like e-mail validation fails I want it to change back to saying "Submit". Here is the code I already have if you would like to take a look.
PHP
<?php
//Fetching Values from URL
$name = $_POST['name1'];
$email = $_POST['email1'];
$message = $_POST['message1'];
$contact = $_POST['contact1'];
//sanitizing email
$email = filter_var($email, FILTER_SANITIZE_EMAIL);
//After sanitization Validation is performed
if (filter_var($email, FILTER_VALIDATE_EMAIL)) {
if (!preg_match("/^[0-9]{10}$/", $contact)) {
echo "<span>* Please Fill Valid Contact No. *</span>";
} else {
$subject = $name;
// To send HTML mail, the Content-type header must be set
$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$headers .= 'From:' . $email. "\r\n"; // Sender's Email
$headers .= 'Cc:' . $email. "\r\n"; // Carbon copy to Sender
$template = '<div style="padding:50px; color:white;">Hello ' . $name . ',<br/>'
. '<br/>Thank you...! For Contacting Us.<br/><br/>'
. 'Name:' . $name . '<br/>'
. 'Email:' . $email . '<br/>'
. 'Contact No:' . $contact . '<br/>'
. 'Message:' . $message . '<br/><br/>'
. 'This is a Contact Confirmation mail.'
. '<br/>'
. 'We Will contact You as soon as possible .</div>';
$sendmessage = "<div style=\"background-color:#7E7E7E; color:white;\">" . $template . "</div>";
// message lines should not exceed 70 characters (PHP rule), so wrap it
$sendmessage = wordwrap($sendmessage, 70);
// Send mail by PHP Mail Function
mail("support@weblup.net", $subject, $sendmessage, $headers);
echo "Your Query has been received, We will contact you soon.";
}
} else {
echo "<span>* invalid email *</span>";
}
?>
JS
$(document).ready(function(){
$("#submit").click(function(){
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
var contact = $("#contact").val();
$("#returnmessage").empty(); //To empty previous error/success message.
//checking for blank fields
if(name==''||email==''||contact==''||message=='')
{
alert("Please Fill Required Fields");
}
else{
// Returns successful data submission message when the entered information is stored in database.
$.post("http://weblup.net/PHP/contact_me/contact_me.php",{ name1: name, email1: email, message1:message, contact1: contact},
function(data) {
$("#returnmessage").append(data);//Append returned message to message paragraph
if(data=="Your Query has been received, We will contact you soon."){
$("#form")[0].reset();//To reset form fields on success
}
});
}
});
});
HTML
<!DOCTYPE html>
<html>
<head>
<title>Contact Me - Weblup</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel='stylesheet' type='text/css' href='files/main_style.css?1413656266' title='wsite-theme-css' />
<link href='http://fonts.googleapis.com/css?family=Dosis:400,300,200,700&subset=latin,latin-ext' rel='stylesheet' type='text/css' />
<link rel="stylesheet" href="CSS/contact_me/form.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="css/contact_me/contact_form.css" />
<script src="JavaScript/contact_me/contact_me.js"></script>
<script src="JavaScript/contact_me/buttonchange.js"></script>
</head>
<body class='tall-header-page wsite-theme-light wsite-page-contact-me'>
<div class="bg-wrapper">
<div id="header-wrap" class="wsite-background wsite-custom-background">
<div class="container">
<table id="header" class="container">
<tr>
<td id="logo"><span class='wsite-logo'><a href='index.html'><span id="wsite-title">Weblup</span></a></span></td>
<td id="nav"><ul class='wsite-menu-default'>
<li id='pg611475163959785219'><a href='index.html'>Home</a></li>
<li id='pg795699127864007860'><a href='about-me.html'>About Me</a></li>
<li id='active'><a href='contact-me.html'>Contact Me</a></li>
<li id='pg678103730359273510'><a href='need-a-website-built.html'>Need a Website Built?</a></li>
<li id='pg461392837777438804'><a href='jobs.html'>Jobs</a></li>
</ul></td>
</tr>
<tr>
<td colspan="2" id="banner"><h2><span class='wsite-text wsite-headline'>Got a question?</span></h2></td>
</tr>
</table>
</div>
</div>
<!-- end Header-wrap -->
<div id="main-wrap">
<div class="container">
<div id='wsite-content' class='wsite-elements wsite-not-footer'>
<div class="paragraph" style="text-align:center;">If you have a question of some kind, or just need to talk about something (that has to do with web design) then go ahead and fill out this form and I'll make sure to reply as soon as possible.</div>
<div id="mainform">
<h2>Simple jQuery Contact Form With Validation</h2>
<!-- Required div starts here -->
<form id="form">
<h3>Contact Form</h3>
<p id="returnmessage"></p>
<br/>
<label>Name: <span>*</span></label>
<br/>
<input type="text" id="name" placeholder="Name"/><br/>
<br/>
<label>Email: <span>*</span></label>
<br/>
<input type="text" id="email" placeholder="Email"/><br/>
<br/>
<label>Contact No: <span>*</span></label>
<br/>
<input type="text" id="contact" placeholder="10 digit Mobile no."/><br/>
<br/>
<label>Message:</label>
<br/>
<textarea id="message" placeholder="Message......."></textarea><br/>
<br/>
<input type="button" id="submit" onClick="changeButton()" value="Send Message"/>
<br/>
</form>
</div>
</body>
</html>
