Javascript get content from PHP

Question

I am having a php page that take in a parameter e.g

mypage.php?keyword=SOMEVALUE

But the keyword is an ajax value that user enter at a html form which run with jQuery.

I need to like let the user enter the value in a text field , and retrieve data from mypage.php and set it into the value of field1.

How do I do it? I see that some site mention javascript respect same origin policy, what should I do?

Now I got 2 files

UPDATED AGAIN

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>demo</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

       <script type="text/javascript">
            $(document).ready(function(){
                $("#filter").click(function(){{
                    var self = this;
                    //The following mostly from Olaf's answer
                    $.ajax({
                        url         :   'jquery2.php',
                        dataType    :   "html",/* JSON, HTML, SJONP... */
                        type        :   "get", /* POST or GET; Default = GET */
                        data:{
                            keyword     :   $(keyword).val() /* $(self) = $("#keyword") */
                        },
                        success     :   function( response )
                        {
                            /*
                            *    on input
                            */
                            $("#keyword").val( response )
                            /*
                            *    on html
                            */
                            $("#newhtml").html( response )
                        }
                    });
                });
            });
        </script>


    </head>
    <body>
        <input type="text" name="keyword" id="keyword" />
        <input type="button" id="filter" name="filter" value="Search Data" />
        <div id="newhtml"></div>
    </body>
</html>

jquery2.php

<?php
$keyword = $_GET['keyword'];

echo "keyword is " . $keyword;


?>

I changed my jquery.php to this code. but still fail to retrieve the output from jquery2.php , the textfield value does not change to jquery2.php output.

Thanks for helping

@PeeHaa after googling I realize its permit operation from same site, which should not have issue, initially I thought it was requiring same "page" . Thanks for clarifying. — user1777711, Oct 02 '13 at 19:29

score 2 · Answer 1 · answered Oct 02 '13 at 18:48

I would suggest using jQuery's ajax method since that tends to make things easier. Let's say your php page is something like this:

PHP

$keyword = $_GET['keyword'];

if ($keyword == "SOMEVALUE") {
echo "returned value";
}

and your html is something like this:

HTML

<input type='text' name='keyword' id='keyword' />

Then your javascript should be something like this:

Javascript

$(document).ready(function(){
  $("#keyword").change(function(){
    var newValue;
    //The following mostly from Olaf's answer
    $.ajax({
      url         :   'index.php',
      dataType    :   "html",/* JSON, HTML, SJONP... */
      type        :   "get", /* POST or GET; Default = GET */
      data:{
          keyword     :   "SOMEVALUE"
      },
      success     :   function( response )
      {
          newValue = response;
      }
    });
    $(this).val(newValue);
  });
});

how about if i got a textfield , beside it is a "Search Button" which is of a submit button value, how do I notice the event change and perform the ajax query — user1777711, Oct 02 '13 at 19:17
in the above html, add `` and in the above javascript, change `$("#keyword").change(function(){` to `$("#search").click(function(){` — Samuel Reid, Oct 07 '13 at 19:04

Olaf Erlandsen · Answer 2 · 2013-10-02T21:43:48.430

try with:

jQuery:

$(document).ready(function(){

    $.ajax({
        url         :   'index.php',
        dataType    :   "html",/* JSON, HTML, SJONP... */
        type        :   "get", /* POST or GET; Default = GET */
        data:{
            keyword     :   "SOMEVALUE"
        },
        success     :   function( response )
        {
            console.log( response ) ;
        }
    });

})

PHP:

<?php

if( array_key_exists( "keyword" , $_GET ) )
{
    if( !empty( $_GET["keyword"] ) )
    {
        echo "<p>Woooow ajax!</p>";
    }
}
?>

GET "SOMEVALUE" with PHP:

echo $_GET["keyword"]

GET "SOMEVALUE" with jQuery:

data:{
    keyword: $( "input" ).val()
}

OR USE PHP IN YOU JQUERY:

<?php
if( array_key_exists( "keyword" , $_GET ) )
{
    $keyword = htmlentities ($_GET["keyword"],ENT_COMPAT,'UTF-8', true );
    $keyword = str_replace("'","\'",$keyword);
    echo "var keywordValue =  '" . $keyword."';"
}else{
    echo "var keywordValue = '';";
}
?>
data:{
    keyword: keywordValue
}

And you code edited:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>demo</title>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

        <script type="text/javascript">
            $(document).ready(function(){
                $( "#search" ).submit(function(){

                    /**
                    * Send ajax
                    */
                    $.ajax({
                        url         :   'jquery2.php',
                        dataType    :   "html",/* JSON, HTML, SJONP... */
                        type        :   "get", /* POST or GET; Default = GET */
                        data:{
                            keyword     :   $( self ).val() /* $(self) = $("#keyword") */
                        },
                        success     :   function( response )
                        {
                            /**
                            * Get Data and set on field2
                            */
                            $("#filter").val( response )
                        }
                    });


                    /* prevent event */
                    return false;
                });
            });
        </script>
    </head>
    <body>
        <input type="text" name="keyword" id="keyword" />
        <input type="hide" name="filter" id="filter" />
        <input type="submit" value="Go!" />
    </body>
</html>

@fedeetz Yeah, I missed it on the first pass. I also just edited it into the tags so it's obvious now. — Izkata, Oct 02 '13 at 18:41
@OlafErlandsen , sorry to trouble you. I updated using your code and did some changes, but still cant get it working. I am new to jquery :) — user1777711, Oct 02 '13 at 21:00
@OlafErlandsen sorry olaf where is the new code.. I need a submit button to trigger the event, is it possible ? As in user press "Submit Button" which is beside text field , it will do the ajax and get data from the php page and display at a textfield / div the response — user1777711, Oct 02 '13 at 21:13
@OlafErlandsen I tried your current code and i try type some text at the first textfield but nothing happen also. — user1777711, Oct 02 '13 at 21:16

score 1 · Answer 3 · answered Oct 02 '13 at 18:45

In PHP, you have to retrieve the keyword

$keyword = $_GET['keyword'];

And then, assuming that you're outputting the HTML along with the JavaScript (inside the script element) via PHP,

$.ajax({
    url: 'mypage.php',
    type: 'GET',
    data: {
        keyword: '<?php echo $keyword; ?>'
    },
    success: function (data) {
        // Display the result in the "field1"
        $('#field1').val(data);
    }
});

score 1 · Answer 4 · answered Oct 02 '13 at 18:49

1

Assuming you have following text input

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

then use following ajax code

$.ajax({
    url: 'mypage.php?keyword='+$("#name").val(),
    type: 'GET',
    success: function (data) {$("#name").val(data);}
});

answered Oct 02 '13 at 18:49

Manish Goyal

700
1
7
17

Javascript get content from PHP

UPDATED AGAIN

4 Answers4