CODEWITHSUNDEEP
phphtmljquery
Sikret Miseon
Sikret Miseon

Reputation: 557

jquery-ajax: pass values from a textfield to php file and show the value

index.html

    <html>
<head>
</head>
<body>


        <input type="text" id="inputtext"><input type="button" value="submit "id="submit">
                <br>                
        <div id="response">
        </div>


    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="thescript.js"></script>
</body>
</html>

thescript.js

$(document).ready(function(){

    $("#submit").click(function(){

        var dataString = $("#inputtext").val();



           $.ajax({
             type: "POST",
             url: "greet.php",
             data: dataString,
             success: function(){
                 $("#response").load("greet.php");
              }
           });   


    });




});

greet.php

<?PHP

print "hello " . $_POST['dataString'];

?>

The value that was entered in the textfield should show when the greet.php is loaded. not sure why it won't work

Upvotes: 1

Views: 3511

Answers (5)

Andrew Myers
Andrew Myers

Reputation: 461

Try this;

$("#response").load("greet.php", {dataString : dataString});

Upvotes: 0

roselan
roselan

Reputation: 3775

$.ajax returns the "hello" already. however while your page receives it, it queries "greet.php" again.

 $.ajax({
             type: "POST",
             url: "greet.php",
             data: dataString,
             success: function (response) {
                 $("#response").append(response); // or .html(response)
              }
           });

or better: use .post();

$.post("greet.php", dataString, function (response) {
    $("#response").append(response); // or .html(response)
});

finally, is your submit button is in a form, and you handle the click event, you shoudld prevent the form to submit on click if you want to stay on the page and not reload it.

$("#submit").click(function(event) {
    event.preventDefault();
    // stuff
    return false;
});

Upvotes: 1

Samir Adel
Samir Adel

Reputation: 2499

$(document).ready(function(){

    $("#submit").click(function(){

        var dataString = $("#inputtext").val();

                 $("#response").load("greet.php"+ dataString );
              });   


    });

Upvotes: 0

Jez
Jez

Reputation: 30071

I don't think you've got your jQuery .ajax call right. From the jQuery documentation:

Data to be sent to the server. It is converted to a query string, if not already a string. It's appended to the url for GET-requests. See processData option to prevent this automatic processing. Object must be Key/Value pairs. If value is an Array, jQuery serializes multiple values with same key based on the value of the traditional setting (described below).

You want to be passing params as your data, in key/value format, rather than just the data, That way you can access it in your php as 'dataString' is to pass data: "dataString=" + dataString instead.

Upvotes: 1

JNDPNT
JNDPNT

Reputation: 7465

I think it can easier:

$("#submit").click(function()
{
    var dataString = $("#inputtext").val();

           $.ajax({
             type: "POST",
             url: "greet.php",
             data: "dataString=" + dataString,
             success: function(result){
                 $("#response").html(result);
              }
           });   
    });

And for php:

<?PHP
if(isset($_POST["dataString"]))
{
    echo "hello " . $_POST['dataString'];
}
?>

Upvotes: 1

Related Questions