Question

So, I have a form with one input text field(search_term) and a submit button.

What I’m trying to do is type in a keyword into the input text field, press Submit, the keyword gets sent to a php script that will json_encode it and send it back to the form page where an alert box should appear and show the keyword.

Instead I keep getting null shown in the alert box after pressing the submit.

PHP script works fine if I actually type it out in the url with keyword passed too:

localhost/filter.php?search_term=hey

JavaScript to submit the form and get the value back asynchroniously(without reloading the page):

$('#filter_form').on('submit', function(e){
                    var filtered_data = null;

                    e.preventDefault();


                    $.ajax({
                        type: 'GET',
                        dataType: 'json',
                        url: 'filter.php',
                        async: false,
                        success: function(json)
                        {
                            filtered_data = json;
                        }
                    });

                    alert(filtered_data);
                });

filter.php:

$search_term = $_GET['search_term'];
    echo json_encode($search_term);

Answer 1

You need to POST the value of the input to the processing page.

$('#filter_form').on('submit', function(e) {
    e.preventDefault();
    $inputValue = $('#search_term').val(); //if the id of the input is "search_term"
    $.ajax({
        type: 'POST',
        data: {
            'inputValue': $inputValue
        },
        url: 'filter.php',
        success: function(json) {
            alert(json);
        }
    });
});​

filter.php should be changed to:

$search_term = $_POST['inputValue'];
echo json_encode($search_term);