Hi I am trying to change the <p id="returnsuccess"></p> to say anything at this point. I have some code it's about a form submission I don't think the PHP part is that important in solving this problem. But I want to know why the code I have doesn't work and if anyone has a solution please tell me.
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' />
<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>
</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">
<!-- Required div starts here -->
<div id="returnmessagecont"
<p id="returnsuccess"></p>
</div>
<div class="formcontainer">
<form id="form">
<h3>Contact Form</h3>
<p id="returnmessage"></p>
<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" value="Submit"/>
<br/>
</form>
</div>
</div>
</body>
</html>
JS
$(document).ready(function(){
$("#submit").click(function(){
$("#submit").prop('value', 'Submitting');
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");
$("#submit").prop('value', 'Submit');
}
else{
// Returns successful data submission message when the entered information is stored in database.
$.post("",{ 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."){
$(".formcontainer").remove();
$("#submit").prop('value', 'Submit');
document.getElementById("returnsuccess").innerHTML = "Hello";
}
else{
$("#submit").prop('value', 'Submit');
}
});
}
});
});