php - Implement Ajax to load HTML depending on radio button value

417

Hello I am really new to AJAX PHP and JQuery so any suggestion is really apprecciated.
I have an HTML page with a form, in this form I have 3 radio buttons with 3 values. My objective is to print some HTML depeding on this values.

For example if I select the radio button 2 (value=2) so -->

echo <input type="text">
echo <input type="text">

I managed to print the value in a empty div under the buttons but I don't know how to generate code with the $_POST variable (I tried to iclude the action page but it didn't work)

HTML:

<div class="hide">
  <input type="radio" name="cat_2" value="1">One
  <input type="radio" name="cat_2" value="2">Two
  <input type="radio" name="cat_2" value="3">Three
</div>
<div id="response"></div>
<?php include 'gen.php'; ?> //my failed test

JQuery:

    <script>
        $(document).ready(function () {
            $('.hide input[type="radio"]').click(function(){
                var value= $(this).val();
                $.ajax({
                    url: "ajax_page.php",
                    type: 'post',
                    data: {ajax: 1, value: value},
                    success: function (response) {
                    $('#response').text(value);
                    }
                });
            });
        });
    </script>

ajax_page.php just to test the value:

<?php

if ($_SERVER['REQUEST_METHOD'] == "POST") {
    echo $_POST['value'];
} else {
    echo "Nothing to Show";
}
?>

I don't know if I was enough clear, any idea would be really helpful I don't even know what to search for :)

284

Answer

Solution:

gen.php is run before the webpage is sent to the browser. You won't be able to access any return variables or information from the ajax call because thegen.php code will already have run.gen.php will need to have all the information BEFORE it runs/the browser loads the page. If you need code to run AFTER the browser loads the page, you'll have to do that on yourajax_page.php.

Just a hint for your ajax_page. You should avoid using the supervariables directly and filter the input first (to prevent malicious or accidental problems). Something like this:

   if($value = filter_input(INPUT_POST, "value", FILTER_VALIDATE_INT)){
        echo $value;
    } else {
        echo "Nothing to Show";
    }

You should capture the error from the ajax call as well and log it to the console (or present it to the user). Here is how you can log it to the console.

$(document).ready(function () {
    $('.hide input[type="radio"]').click(function(){
        var value= $(this).val();
        $.ajax({
            url: "ajax_page.php",
            type: 'post',
            data: {ajax: 1, value: value},
            success: function (response) {

                // Loop to output repeated HTML
                var output = "";
                for (i = 0; i < response; i++) {
                    // Put the HTML in here for example you could create the output:
                    output = output + "<p>test</p>";
                }
                // and then display it
                $('#response').html(output);
            },
            error: function (response){
               console.log(response)
            }
        });
    });
});

People are also looking for solutions to the problem: regex - How to match String in foreach loop with preg_split in PHP

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.