Adding form data to mysql database PHP and AJAX

Question

I am wanting to have a form that will let me add names to my database without refreshing the form. I have been working on it but it does not seem to work. I am quite new at this so any help is appreciated.

For my index.html I have:

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js">
</script>
<script type="text/javascript" >
$(function() {
$(".submit").click(function() {
var name = $("#firstname").val();
var username = $("#lastname").val();

var dataString = 'firstname='+ firstname + 'lastname=' + lastname

if(firstname=='' || lastname=='')
{
$('.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>



<body>

<form method="post" name="form">
<ul><li>
<input id="firstname" name="firstname" type="text" />
</li><li>
<input id="lastname" name="lastname" type="text" />


</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>

For join.php:

<?php
include("db.php");

if($_POST)
{
$firstname=$_POST['firstname'];
$lastname=$_POST['username'];
mysql_query("INSERT INTO persons (firstname,lastname) VALUES('$firstname','$lastname')");
}

?>

and db.php:

<?php
$mysql_hostname = "localhost";
$mysql_user = "root";
$mysql_password = "";
$mysql_database = "test";
$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Could not connect database");
mysql_select_db($mysql_database, $bd) or die("Could not select database");
?>

what response you are getting on the clicking of button

Abuzer Firdousi
– Abuzer Firdousi

2013-06-05 09:12:42 +00:00
Commented Jun 5, 2013 at 9:12 — Abuzer Firdousi
– Abuzer Firdousi, Commented Jun 5, 2013 at 9:12

Abuzer Firdousi · Accepted Answer · 2013-06-05 09:41:59Z

3

there is mistake in code, you have coded

  var name = $("#firstname").val();
  var username = $("#lastname").val();
  var dataString = 'firstname='+ firstname + 'lastname=' + lastname

you have to used the variables name and username in dataString but you have written the id(s) of fields for first and last name. change either the variable name or variables used in dataString

corrected line is :

 var dataString = 'firstname='+ name + 'lastname=' + username

And

   $lastname=$_POST['username']; =>  $lastname=$_POST['lastname'];

edited Jun 5, 2013 at 9:41

answered Jun 5, 2013 at 9:25

Abuzer Firdousi

1,5561 gold badge12 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Adding form data to mysql database PHP and AJAX

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related