Use AJAX to call a PHP function after use of a dropdown form

Question

I have a select form on my website, which looks like this:

<div id="content_big">
    <div class="content_top_geel">
        Instuurlijnen
    </div>
    <div class="content_mid">   
        <div id="insturen">
            <select name="employee" id="employee" onchange="getIPL(this.value);">
                 <option value="">Instuurlijnen</option>
                 <option value="shout">Shout</option>
                 <option value="request">Request</option>
            </select>    
        </div>
    </div>
</div>

Looks pretty basic. When a user selects a option I want to call a PHP function, and since that isn't possible in JavaScript nor jQuery, I decited to use AJAX:

function getIPL(verzoek)
    {
            $.ajax({
                       type: "GET",
                       url: "verzoek.php",
                       data: "verzoek =" + verzoek,
                       success: function(result){
                         $("#insturen").html(result);
                       }
                     });
    };

Again, looks pretty darn basic. When the value is changed, it gets the following file:

<?php
  if(isset($_GET['verzoek'])){
     shoutofrequest($_GET['verzoek']);
 }
 function shoutofrequest($id)
 {
    if ($id === 'shout')
    {
        newShout();
    }
    elseif( $id === 'request')
    {
        newRequest();
    }
 }

 function newShout()
 {
    echo 'SHOUT<br><br><br><br><br><br><br><br><br><br><br><br><br><br>';
 }

 function newRequest()
 {
    echo "REQUEST<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>";
 }
 ?>

The functions are to test only.

So this seems good, to my opinion, but when I use the select form, the content jumps away, and I get a white screen...

Did I make any mistakes?

Thanks, Robin.

I'm not sure if it is related to your problem, but when you build a query string you should not use spaces before the =. To make sure future content is correctly escaped as well, it's better to use data: {'verzoek': verzoek}, — jeroen
– jeroen, Commented Nov 6, 2014 at 17:26

Russell P. · Accepted Answer · 2014-11-06 17:35:26Z

As Indra stated, you do need to take the and move it towards the bottom.

However, you have a few errors in your code(this could be to just showing snippets but I am addressing them).

First,

<select name="employee" id="employee" onchange="getIPL(this.value);">

Should be changed to

<select name="employee" id="employee">

Secondly, Your js includes the var of verzoek but that is not called out anywhere. With this in mind, your js code should be changed to represent the change in the html select code like so

$('#employee').on('change', function(){
    var verzoek = $(this).val();
    $.ajax({
        type: "GET",
        url: "verzoek.php",
        data: {verzoek : verzoek},
        success: function(result){
            $("#insturen").html(result);
        }
    });
});

Example jsfiddle showing the select without the onChange inline - http://jsfiddle.net/y8w02c4m/

Inside of your PHP code, you have the function shoutofrequest($id). You do not actually create the $id variable. After the above changes, your php code should look like this

if(isset($_GET['verzoek'])) $id = $_GET['verzoek']);
if($id == 'shout'){
    echo 'SHOUT<br><br><br><br><br><br><br><br><br><br><br><br><br><br>';
}elseif($id == 'request'){
    echo "REQUEST<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>";
}

No need to load it all into functions for a simple display like this and hopefully this helps fix the issues that you are having!

Indra Kumar S · Accepted Answer · 2014-11-06 17:24:23Z

0

try This function

    <script>
    function getIPL(str)
    {
    if (str=="")
    {
    document.getElementById("insturen").innerHTML="";
    return;
    } 
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("insturen").innerHTML=xmlhttp.responseText;
    }
    }
    xmlhttp.open("GET","verzoek.php?verzoek ="+str,true);
    xmlhttp.send();
    }
    </script>

Put div id at the bottom

    <div id="content_big">
    <div class="content_top_geel">
    Instuurlijnen
    </div>
    <div class="content_mid">   

    <select name="employee" id="employee" onchange="getIPL(this.value);">
    <option value="">Instuurlijnen</option>
    <option value="shout">Shout</option>
    <option value="request">Request</option>
    </select>    

    </div>
    <div id="insturen"> // Put it Here
    </div>
    </div>

And if you are just testing... then Just echo... remove excess br

      echo "<p>Shout selected</p>";

edited Nov 6, 2014 at 17:24

answered Nov 6, 2014 at 17:16

Indra Kumar S

2,9552 gold badges19 silver badges29 bronze badges

1 Comment

Robin van den Berg Over a year ago

It still doesn't really call the function because nothing is echoed

Collectives™ on Stack Overflow

Use AJAX to call a PHP function after use of a dropdown form

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related