CODEWITHSUNDEEP
javascriptphpjqueryajax
TrivialCase
TrivialCase

Reputation: 1099

jQuery ajax isn't calling my php file?

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.

Upvotes: 0

Views: 271

Answers (5)

itzmukeshy7
itzmukeshy7

Reputation: 2677

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.

Upvotes: 0

Felix
Felix

Reputation: 38102

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.

Upvotes: 1

CapitanFindus
CapitanFindus

Reputation: 1526

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

Upvotes: 0

Sarath
Sarath

Reputation: 608

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();

Upvotes: 2

Ananth
Ananth

Reputation: 1550

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>

Upvotes: 0

Related Questions