How to pass a Javascript variable in to PHP using an onclick event

Question

I'm trying to pass a javascript variable to PHP so that I can create a (MySQL) query to return a single record. The user will enter a search string and that will return however many records contain a matching string. Then the user will select the single record they want to view.

Here is my HTML (recipe_summary.php):

<head>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script type="text/javascript" src="script.js"></script>      
</head>
<body>
<table>
   <tr>
       <th>Recipe ID</th>
       <th>Title</th>
       <th>Ingredients</th>
       <th>Recipe</th>
    </tr>
    <?php foreach($search_results as $result) { ?>
    <tr>
        <td><a href="#" name="<?php echo $result['recipe_id']; ?>"><?php echo $result['recipe_id']; ?></a></td>
        <td><?php echo $result['title']; ?></td>
        <td><?php echo $result['ingredients']; ?></td>
        <td><?php echo $result['recipe']; ?></td>
    </tr>
    <?php }; ?>
</table>
</body>

Here is my js (script.js):

$(document).ready(function () {
        var myText;

        $("a").click(function(){
            myText = $(this).text();
            ajax_post(myText);
        });

        function ajax_post(myText){
            var hr = new XMLHttpRequest();
            var url = "recipe_result.php";
            var passedVal = myText;
            var myVal = "recipe_id=" + myText;

            hr.open("POST", url, true);
            hr.setRequestHeader("Content_type","application/x-www-form-urlencoded");
            hr.onreadystatechange = function () {
                if(hr.readyState == 4 && hr.status == 200) {
                    var return_data = hr.responseText;
                    document.getElementById("status").innerHTML = return_data;
                }
            }
            hr.send(myVal);
        };    
});

Here is recipe_result.php:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
    <script type="text/javascript" src="script.js"></script>   
</head>
<body>
    <?php 
        if(isset($_POST['recipe_id'])){
            echo "SET";
        } else {
            echo "NOT SET";
        }

    ?>
    <div id="status"></div>

</body>
</html>

The user will click on an anchor tag (recipe_summary.php) which will trigger a click event on script.js that will store the recipe_ID (and this is where I get lost) and pass it to ajax_post(). From here I'm trying to send the stored variable to 'recipe_result.php' as a php variable which I will then use in MySQL to return only the selected record.

On recipe_result.php $_POST['recipe_id'] isn't being set so I'm not sure where my error is.

I'm not familiar with ajax but from what I've read ajax appears to be the solution. I've looked at very many tutorials (everything in ajax_post() was from a tutorial I was trying to follow) but generally they start with an HTML form and then write the result to the same page.

Answer 1

your code looks fine, just read recipe_id in php like this

echo $_POST['recipe_id'];

also look at $_POST variable documentation

How to pass a Javascript variable in to PHP using an onclick event

Question

1 answers

solution1
1 2017-10-09 08:38:04

How to pass a Javascript variable in to PHP using an onclick event

Question

1 answers

solution1 1 2017-10-09 08:38:04

solution1
1 2017-10-09 08:38:04