Pass Text Input Variable to PHP for Div Loading

Question

I have a web page where I want to have an input box and a search button. It will search for movies matching input box. The search and parsing is done via php, but I want the results presented on the original page, as an updated div. I have the current html code:

<script type="text/javascript">
    function goSearch(){
        $("#Moviesearchdiv").load("MovieSearch.php");
     }
</script>

<form action="JavaScript:goSearch()" method="POST">
    <input type="text" name="moviename">
    <input type="submit" name="submit" value="Search" >
</form>

<div id="Moviesearchdiv"></div>

My MovieSearch.php looks something like this:

<?php
$themovie = $_POST["moviename"];
$myurl = "http://my-url-here.com/search/?q={$themovie}";

    $response = file_get_contents($myurl);
    $result = json_decode($response, true);
    $result=$result['movies'];

    $totality = count($result);

    for ($i = 0; $i <$totality; $i++) {
        $mymovietitle = $result[$i]['original_title'];
        $myposter = $result[$i]['poster_original'];
        echo "<li><img src={$myposter} >{$mymovietitle}</li>";
    }
?>

When I run it as is... nothing happens. If I manually change the first variable in MovieSearch.php to read something like:

$themovie = "Rocky";

This properly loads all the Rocky movies in my div as expected, without the page refreshing.

How can I properly pass the "moviename" input to the php?

Any help and advice is greatly appreciated.

Thanks,

Hernando

JohnnyFaldo · Accepted Answer · 2014-05-01 17:18:46Z

1

a) you're not passing your data to the page (the second argument in .load should be your form data), so the value of $themovie is null.

b) Even though you have method="POST" on your form, using .load assumes GET unless data provided is an object. One method of providing your form data and in the format of an object (to send as POST) would be to:

function goSearch(){
   $("#Moviesearchdiv").load("MovieSearch.php",$('#yourFormId').serialize());
}

note you will need to add an ID to your form, and replace #yourFormId with it.

When debugging these types of AJAX calls, first you need to know that the page you're trying to communicate with is in the place your AJAX call thinks it is. You know that it is because when you fill in $themovie - you get results, you could also check this in developer tools in the browser.

Secondly you need to make sure you're sending the data you think you are, you could check this by returning a print_r() or var_dump() of $_POST or $_GET depending on what your using (or think you're using like in this case).

Those 2 steps will lead to you solving a good percentage of issues you find.

edited May 1, 2014 at 17:18

answered May 1, 2014 at 17:04

JohnnyFaldo

4,1714 gold badges21 silver badges30 bronze badges

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

3 Comments

Hernandito Over a year ago

Thank you Johnny... I tried your solution and I had no success... I am a newbie at all this. My form code looks like <form action="JavaScript:goSearch()" method="POST" id="yourFormId" > and my script line is what you wrote above.

Hernandito Over a year ago

I GOT IT!!!! In my php, the line neds to read. $themovie = $_GET["moviename"]; Thank you again.

JohnnyFaldo Over a year ago

@Hernandito no problemo :)

Felipe · Accepted Answer · 2014-05-01 17:03:51Z

0

Some thoughts:

where are you actually sending the contents of the text input to your php script?
try using trim() on the result you get from $_POST before appending it to the url.
do a var_dump() on variable $_POST to see what's coming to your server - you might be surprised.

answered May 1, 2014 at 17:03

Felipe

11.9k9 gold badges64 silver badges106 bronze badges

Collectives™ on Stack Overflow

Pass Text Input Variable to PHP for Div Loading

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related