I have a simple html page below calling a global.js file the global.js file calls a php file that gets a location for a name if it is in a database. (could have put it all on the one page but was following a tutorial).
<!doctype html>
<html
<head>
<title>AJAX Database</title>
</head>
<body>
Name: <input type = "text" id="name">
<br />
<input type="submit" id="submit" value="Get Loc">
<div id="output"></div>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="js/global.js"></script>
</body>
</html>
global.js is :
$('#submit').on('click',function() {
var name = $('#name').val();
if($.trim(name) != ''){
$.post('ajax/name.php', {name: name}, function(data) {
$('div#output').text(data);
});
}
});
it works fine as is, but if I put in tags as shown below, it won't work. I also want to use a fieldset, but I can't even get it to work with form tags.
I have used other selectors but it won't work. The problem seems to be the submit button, as it works if that is out of the form.. any ideas? I think using the submit within the form is getting the $.post function to send more than I want it too.
<!doctype html>
<html
<head>
<title>AJAX Database</title>
</head>
<body>
<form>
Name: <input type = "text" id="name">
<br />
<input type="submit" id="submit" value="Get Loc">
</form>
<div id="output"></div>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="js/global.js"></script>
</body>
</html>
the php file is:
if(isset($_POST['name']) === true && empty($_POST['name']) === false) {
require '../db/connect.php';
$query = mysql_query("
SELECT `names`.`location`
FROM `names`
WHERE `names`.`name` = '" . mysql_real_escape_string(trim($_POST['name'])) . "'
");
echo (mysql_num_rows($query) !== 0) ? mysql_result($query,0,'location') : 'Name not found';
}
Is my problem not using the right selectors, or is there some rule about using selectors for submit buttons within forms ?
You need to prevent the default action of the form. Either by using event.preventDefault() or adding return false at the end of the function.
$('form').on('submit', function(e) {
e.preventDefault();
var name = $('#name').val();
if ($.trim(name) != '') {
$.post('ajax/name.php', {
name: name
}, function(data) {
$('div#output').text(data);
});
}
});
I strongly advise not to use the click of the button but instead I suggest this
<!doctype html>
<html
<head>
<title>AJAX Database</title>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="js/global.js"></script>
</head>
<body>
<form id="form1">
Name: <input type="text" id="name"><br />
<input type="submit" id="submit" value="Get Loc">
</form>
<div id="output"></div>
</body>
</html>
Where the script is
$('#form1').on('submit', function(e) {
e.preventDefault();
var name = $('#name').val();
if ($.trim(name) != '') {
$.post('ajax/name.php', {
name: name
}, function(data) {
$('div#output').text(data);
});
}
else {
alert('Please enter name');
$('#name').focus();
}
});