Alright, I have a similar question up, but wanted to expand on it to see if I can get a better answer:
I'm trying to make a Jquery Ajax Post call to a PHP file that stores an email address in a table. After the successful ajax call I'm trying to change a buttons html.
Here is my HTML/Javascript in its entirety:
<!DOCTYPE html>
<html>
<head>
<!--Meta tags-->
<meta charset="utf-8">
<!--Title-->
<title>Startup Winnipeg</title>
<!--Stylesheets-->
<link rel="stylesheet" href="css/master.css">
<!--Script-->
<script type="text/javascript">
function empty() {
document.getElementById("email").value="";
}
function determine() {
if (document.getElementById("email").value.length==0){
document.getElementById("email").value="Email Address";
}
}
function validate() {
document.getElementById("registerform").submit();
}
</script>
</head>
<body>
<div id="container"></div>
<div id="topbar"></div>
<div id="header"></div>
<div id="register">
<div id="formcontainer">
<form action="" id="registerform" name="registerform" method="post" >
<input type="text" id="email" name="email" value="Email Address" onClick="empty()" onBlur="determine()" />
<button type="submit" id="join" name="join" onClick="validate()">Sign Up</button>
</form>
</div>
<div id="info">
<a href="http://www.facebook.com" target="_blank"><div id="fb"></div></a>
</div>
<div id="bar"></div>
</div>
<!--jQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
//listen for click
$('form').on('submit', function(e) {
$.post('register.php', $("#registerform").serialize(), function() {
$('#join').html("Success!")
});
//disable default action
e.preventDefault();
});
</script>
</body>
</html>
Here is the PHP file that is writing the email address to a table:
<?php include("database_connection.php");?>
<?php
$email = $_POST['email'];
$email = mysql_real_escape_string($email);
mysql_select_db("suw",$con);
$sql="INSERT INTO emails (email) VALUES ('$email')";
mysql_query($sql,$con);
echo mysql_error();
?>
<?php include ("close_database_connection.php");?>
I'm having a couple of problems:
if I type in a full email address it won't write to the table, however, any other gibberish will write to the table
The button's html does not change upon the data being written to the table
Let me know what I am doing wrong - I have two books and have scoured the jquery api and I can't quite figure out what I'm doing wrong.
1 Answer 1
Not sure it will help, but start by getting rid of all that inline JS, and multiple functions for same events etc.
Place the javascript in the head, and remove the inline handlers:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#email").on({
click: function() {
this.value = "";
},
blur: function() {
if (this.value.length===0) this.value = "Email Address";
}
});
$("#join").on('click', function(e) {
e.preventDefault();
$.post('register.php', $("#registerform").serialize(), function(data) {
$('#join').html(data)
});
});
});
</script>
</head>
<body>
<form action="" id="registerform" name="registerform" method="post" >
<input type="text" id="email" name="email" value="Email Address" />
<button type="submit" id="join" name="join">Sign Up</button>
</form>
</body>
In your PHP, the includes could be inside the tags, and just return success or error:
<?php
include("database_connection.php");
mysql_select_db("suw",$con);
$email = mysql_real_escape_string($_POST['email']);
$sql="INSERT INTO emails (email) VALUES ('$email')";
mysql_query($sql,$con);
if (mysql_errno()) {
echo mysql_error(); // or just "error"
}else{
echo "Success!";
}
include ("close_database_connection.php");
?>
.html()should be changing the button's text. Are you certain the callback function is being invoked?document.getElementById("registerform").submit();then the$('#join').html("Success!")command will work