This is my index.html file
<form method="post" id="form" action="join.php">
<ul>
<li><input id="name" name="name" type="text" /></li>
<li><input id="username" name="username" type="text" /></li>
<li><input id="password" name="password" type="password" /></li>
<li>
<select id="gender" name="gender">
<option value="">Gender</option>
<option value="1">Male</option>
<option value="2">Female</option>
</select>
</li>
</ul>
<div>
<input type="submit" value="Submit" class="submit"/>
<span class="error" style="display:none"> Please Enter Valid Data</span>
<span class="success" style="display:none"> Registration Successfully</span>
</div>
</form>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</script>
<script type="text/javascript" >
$(function() {
$(".submit").click(function() {
var name = $("#name").val();
var username = $("#username").val();
var password = $("#password").val();
var gender = $("#gender").val();
var dataString = 'name='+ name + '&username=' + username + '&password=' + password + '&gender=' + gender;
if(name=='' || username=='' || password=='' || gender=='') {
$('.success').fadeOut(200).hide();
$('.error').fadeOut(200).show();
} else {
$.ajax({
type: "POST",
url: "join.php",
data: dataString,
success: function(){
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
}
return false;
});
});
</script>
And this is join.php
<?php
$conn = mysql_connect('localhost','root','') or die (mysql_error);
$db=mysql_select_db('test', $conn) or die (mysql_error);
if($_POST) {
echo"processing...........";
$name=$_POST['name'];
$username=$_POST['username'];
$password=$_POST['password'];
$gender=$_POST['gender'];
mysql_query("INSERT INTO user1 (name,username,password) VALUES('$name','$username','$password')");
} else {
echo"unsuccessful";
}
?>
I want to store the values of name,username and password in the database but it is getting stored only for the first attempt. When I submit it the second time nothing happens. why is that?
