Home/ Questions/Q 9063985
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T16:08:05+00:00

I have a simple html page below calling a global.js file the global.js file

  • 0

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 ?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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);
        });
    }
});​
    • 0