jQuery AJAX Does Not Seem to Fire

user_5086537 0
Viewed 45

I have searched as much as I can throughout here and elsewhere trying to solve this; I can't seem to find something similar enough. The button click fires as it prints to the console. However, every console response I ask for afterwards does not happen, leading me to believe that the AJAX call itself is not firing. 

<form type="GET" action="/api.php" id="search" name="search">
  <label for="getICAO">Search by ICAO:</label><br />
  <input type="text" id="getICAO" name="getICAO" placeholder="KLAX"><br />
  <label for="getCity">Search by city:</label><br />
  <input type="text" id="getCity" name="getCity"> <br />
  <label for="button"><input type="button" id="submit" name="submit" value="Find Airport"> </label><br />
</form>

<script>
jQuery("#submit").on("click", function(e) {
    e.preventDefault();
    console.log('submitted');
    // This part works ^

    // I have verified that the variables are passed to the PHP file. The PHP file is 
    //functioning properly and the database query returns with JSON formatted results.
    var getICAO = jQuery("#getICAO").val();
    var getCity = jQuery("#getCity").val();

    jQuery.ajax({
        type: "GET",
        url: "/api.php?getICAO="+getICAO+"&getCity="+getCity,
      dataType: "json",

    }) .done(function(data) {

            var result = jQuery.parseJSON(data);

            jQuery.each(result, function(key, value) {
               console.log(result); // Nothing returns
      });
   })     
});

</script>

This is likely a simple error that I just don't understand. Thank you for your help.

jquery ajax javascript
1 Answers

ok, I don't know if the code here is every thing or just the form
anyway Jquery is a javascript library and you have to reference it in the head of every page you want to use Jquery ( or in the body doesn't matter a lot)

you can download it or use the CDN:
https://jquery.com/download/

and you don't have to set action and method for the html form
because you are already preventing Default

also it's better to let ajax handle the GET parameters, like This:

jQuery.ajax({
    type: "GET",
    url: "/api.php",
    data: {
        getICAO: getICAO,
        getCity: getCity
    },
    dataType: "json"
})

here is the working page:

<!DOCTYPE html>
<html lang="en">

<head>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
    <form id="search" name="search">
        <label for="getICAO">Search by ICAO:</label><br />
        <input type="text" id="getICAO" name="getICAO" placeholder="KLAX"><br />
        <label for="getCity">Search by city:</label><br />
        <input type="text" id="getCity" name="getCity"> <br />
        <label for="button"><input type="button" id="submit" name="submit" value="Find Airport"> </label><br />
    </form>


    <script>
        jQuery("#submit").on("click", function(e) {
            e.preventDefault();
            console.log('submitted');
            // This part works ^

            // I have verified that the variables are passed to the PHP file. The PHP file is 
            //functioning properly and the database query returns with JSON formatted results.
            var getICAO = jQuery("#getICAO").val();
            var getCity = jQuery("#getCity").val();

            jQuery.ajax({
                type: "GET",
                url: "/api.php",
                data: {
                    getICAO: getICAO,
                    getCity: getCity
                },
            dataType: "json"

            })
            .done(function(data) {
                var result = jQuery.parseJSON(data);

                jQuery.each(result, function(key, value) {
                    console.log(result); // Nothing returns
                });
            })     
        });
    </script>
</body>

</html>
user_103374830
Related