submit without page refresh problems in jquery - php

Question

I want to make a form submit without refreshing page in jquery.
But I have no idea why the data didn't insert into the database. Are there any problems in the code below?
Before that, I had referred to here, I hope I didn't write it wrong.
HTML
<form id="submit">
<fieldset><legend>Enter Information</legend> <label for="fname">Client First Name:</label>
<input id="vName" class="text" type="text" name="vName" size="20" />
<label for="lname">Client Last Name:</label>
<input id="vLat" class="text" type="text" name="vLat" size="20" />
<input id="vLng" class="text" type="text" name="vLng" size="20" />
<input id="Add" class="text" type="text" name="Add" size="20" />
<button class="button positive"> <img src="../images/icons/tick.png" alt="" /> Add Client </button></fieldset>
</form>
Javascript
$("form#submit").submit(function() {
// we want to store the values from the form input box, then send via ajax below
var vName = $('#vName').val();
var vLat = $('#vLat').val();
var vLng = $('#vLng').val();
var Add = $('#Add').val();
$.ajax({
type: "POST",
url: "ajax.php",
data: "vName="+ vName +"& vLat="+ vLat +"& vLng="+ vLng +"& Add="+ Add,
success: function(){
$('form#submit').hide(function(){$('div.success').fadeIn();});
}
});
return false;
});
dbtools.inc.php
<?php
function create_connection()
{
$link = mysql_connect("localhost", "root", "52082475");
if (!$link) {
die('Could not connect: ' . mysql_error());
}
echo 'Connected successfully';
mysql_close($link);
mysql_query("SET NAMES utf8");
}
function execute_sql($database, $sql, $link)
{
$db_selected = mysql_select_db($database, $link)
or die("Fail <br><br>" . mysql_error($link));
$result = mysql_query($sql, $link);
return $result;
}
?>
ajax.php
<?php
include ("dbtools.inc.php");
$link = create_connection();
// CLIENT INFORMATION
$vName = htmlspecialchars(trim($_POST['vName']));
$vLat = htmlspecialchars(trim($_POST['vLat']));
$vLng = htmlspecialchars(trim($_POST['vLng']));
$Add = htmlspecialchars(trim($_POST['Add']));
$sql = "INSERT INTO map_db (vName,vLat,vLng,add) VALUES ('$vName','$vLat','$vLng','$Add')";
$result = execute_sql("map",$sql,$link);
mysql_close($link);
header("location:add.html");
exit();
?>

Answer 1

For starters your PHP code is not safe (look up sql injection and prepared statements). Next make your PHP code echo/print something- the result of the query. For example, you may want to use JSON or XML to print the result of the query (good||bad). That way the ajax can use this in the success function to determine if the query was successful or not and can thus display an error or success message appropriately.
Also respond to errors in the ajax request (Reference here). For example:
ajax.({
url:..,
....
error: function() {
...
}
});
By interpreting the response from your PHP you should be able to determine what the cause of the error is (bad mysql connection, query, syntax, url, data, etc).
Goodluck.

Answer 2

i think there is a syntax error in data field of your ajax post method...
if you want to post entire form, then use...
var formData= $('form').serialize();
data: formData
or use below code to send individual parameters...
data: { 'vName' : vName, 'vLat' : vLat, 'vLng' : vLng}
i'm not familiar with php style of coding... but this works well with c# method signatures... change your code in php according to the posted data fields
NOTE: use preventDefault() in your submit method, for not to redirect/refresh your page

Answer 3

If you want to submit form data there is no need to use form tags instead use a button like this
<input type = 'image' src ='blah blah' id = 'submit'>
Also i see here you are using submit event instead use click event.

Answer 4

You should not close the connection in create_connection() I guess. That function exists to open a new one :)
Oh, and it seems that you want to return the $link from the same method too, even if you don't really need all that code (neither an explicit mysql_close() nor using the $link, unless you happen to connect to two or more different databases in the same script).
The server side code seems very weak and insecure. If it's a pet project it's ok, but if can become anything serious, you should watch out for sql injections and PHP vulnerabilities, or use a PHP framework which usually handles this for you