jQuery ajax isn't calling my php file?

Question

OK so I'm a total n00b to everything, but I'm just trying to get jQuery to call my php script and get the return data. When I run this, it does not seem to try to access my php file but instead just appends "?wd=" to my url in the url bar, no "lookup.php" anywhere. The php script works fine when I call it directly. I've tried a bunch of stuff, and I just tried a fiddle with a working minimal example, then I editted it to use my url instead in to see if it would work and it broke the fiddle. So why does jQuery seem to hate my php file?

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#input").on("submit", function()
{
    var wd = $("#word").val();
    $.ajax({
      url: "lookup.php",
      data: {word:wd},
      success:function(result){
          $("#return").html(result);
        }
    });
    return false;
});

});
</script>
</head>
<body>
<form id="input" action="">
Word:<input type="text" name="word" autofocus /><br />
<input type="submit" value="Submit" />
</form>
<br />
<div id="return"><b>Return data here</b></div>
</body>
</html>

and my php:

<?php
$word = $_GET['wd'];
if ($word=="hi") {
echo "<p>Hey there!</p>";
} else {
echo "<p>Mi dispiace :-(</p>";
}
?>

I'm sure that it's something terribly obvious, so that you in advance for taking a few seconds to help me out.

Sarath · Accepted Answer · 2014-02-25 05:22:38Z

2

You have used var wd = $("#word").val(); in js

but for the text box in html you didn't give the id

please add id for your text box and try

<input type="text" id="word" name="word" autofocus />

or

edit your js like following

var wd=$("input[name=word]").val();

answered Feb 25, 2014 at 5:22

Sarath

6085 silver badges12 bronze badges

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

Comments

Felix · Accepted Answer · 2014-02-25 06:28:45Z

1

Since you're using GET request in your PHP. You need to provide type: "GET" for your ajax call:

$.ajax({
    type: 'GET', // <-- Here
    url: "lookup.php",
    data: {word:wd},
    success:function(result){
        $("#return").html(result);
    }
});

You're also missing id of your input:

<input type="text" id="word" name="word" autofocus />

since you're using $("#word").val() to get the value of your input.

edited Feb 25, 2014 at 6:28

answered Feb 25, 2014 at 5:03

Felix

38.2k8 gold badges45 silver badges56 bronze badges

Comments

Ananth · Accepted Answer · 2014-02-25 05:05:01Z

0

You have to include type of ajax

<script type="text/javascript">
$(function(){
$("#input").on("submit", function()
{
    var wd = $("#word").val();
    $.ajax({
      url: "lookup.php",
     type : "GET",  // GET or  POST 
      data: {word:wd},
      success:function(result){
          $("#return").html(result);
        }
    });
    return false;
});

});
</script>

answered Feb 25, 2014 at 5:05

Ananth

1,5823 gold badges17 silver badges36 bronze badges

1 Comment

Ramesh Over a year ago

type has a default value = "GET" api.jquery.com/jQuery.ajax

CapitanFindus · Accepted Answer · 2014-02-25 06:08:48Z

0

You are calling the method "val( )" on a textbox called "name" which is not defined. You should use "id=name" and not "name=name" to use the object on js

answered Feb 25, 2014 at 6:08

CapitanFindus

1,52615 silver badges27 bronze badges

Comments

itzmukeshy7 · Accepted Answer · 2014-02-25 07:38:20Z

0

This won't work because your textbox don't have any attribute id by which you are trying to access it's value using #word using this line

var wd = $("#word").val();

To get desired result please add id="word" attribute to the input text field in html code.

answered Feb 25, 2014 at 7:38

itzmukeshy7

2,6781 gold badge24 silver badges30 bronze badges

Collectives™ on Stack Overflow

jQuery ajax isn't calling my php file?

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related