PHP-POST without Refresh with AJAX & jQuery?

Question

At the moment I am working with a php-script that reads data from a xml-file. The user first has to select on which xml entry he wants to get more information by using a dropdown-menu, then he sends the form to the same php-page by clicking the submit button. Because the page reloads, it is able to see that something has been send by POST and can then show the requested information to this xml entry on the bottom of the page.

But I would like to make it a bit more user-friendly. The idea is that when someone chooses an entry from the dropdown, the requested information is shown without having to click the submit button and of course without reloading the whole page. That means that the POST form is being send in the background and the information appears directly after choosing an item from the dropdown.

I know that this is possible using jQuery and AJAX, but I'm not really experienced in one of these languages. Anyone got an idea how to solve this? :)

Thanks

Check [this](http://stackoverflow.com/questions/5004233/jquery-ajax-post-example-with-php) also [w3schools.com](http://www.w3schools.com/JQuery/ajax_ajax.asp) — AkshayP, Jul 03 '14 at 11:40
Please seearch on Internet for such basic applications, you would get hundreds of thousands of links ! — Rahul Gupta, Jul 03 '14 at 12:15
Welcome to Stack Overflow. Please read [Stack Overflow: How to ask](http://stackoverflow.com/questions/how-to-ask) and [John Skeet's Question Checklist](http://msmvps.com/blogs/jon_skeet/archive/2012/11/24/stack-overflow-question-checklist.aspx) to find out how to ask a good question that will generate good useful, answers. — Our Man in Bananas, Jul 03 '14 at 12:34

score 1 · Answer 1 · answered Jul 03 '14 at 11:46

You can use the below code on Button click :-

<div id="result"></div>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

jQuery.ajax({
        url:'TO YOUR PHP PAGE',    
        type:'POST',
        data:'id='+id,
        success:function(results)
        {
            jQuery("#result").html(results); 

        }
    });

score 1 · Accepted Answer · answered Jul 03 '14 at 13:34

Copy below js code in your main file where you have the dropdown:-

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>  
<script type="text/javascript">
    $(document).ready(function(){
        $('select').change(function(){
            var dwxvar = $(this).val();
            $.ajax({
              type: "POST",
              url: "http://localhost/dwx/phpcodefile.php",
              data: {dwx:dwxvar},
              cache: false,
              dataType: 'json',
              success: function(data_val){
                alert(data_val);
                $("#result").html(data_val); 
              }
            });
        });
    });
</script>

I am assuming this as your dropdown:-

<select>
    <option value="1">Value 1</option>
    <option value="2">Value 2</option>
    <option value="3">Value 3</option>
    <option value="4">Value 4</option>
</select>

You have to make a seperate php file with the only code(php) required for the output( say phpcodefile.php):-

<?php
    $varname = $_POST["dwx"]; // this is the same variable which we have sent here data: {dwx:dwxvar},
    // -- now using this value perform whatever action you want to perform below --


    //Next try to put the result in a variable so as to return value to ajax call as we do for functions with return type. Suppose the variable name is **$alldata**
    echo $alldata;      
?>

what ever you have printed on phpcodefile.php file that will be returned and you'll be able to see that in alert(). It means all data is in now "data_val" here

success: function(data_val){
    alert(data_val);
}

Now you have to append this data_val to some tag

<div id="result"></div>

like this

$("#result").html(data_val);

Try executing your code this way, it'll work the way you want. If you'll find any problem, then I'll need to see your complete html and php code.

PHP-POST without Refresh with AJAX & jQuery?

2 Answers2