CODEWITHSUNDEEP
phphtmlajax
Robin van den Berg
Robin van den Berg

Reputation: 15

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

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.

Upvotes: 0

Views: 75

Answers (2)

Russell P.
Russell P.

Reputation: 108

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!

Upvotes: 1

Indra Kumar S
Indra Kumar S

Reputation: 2934

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>";

Upvotes: 0

Related Questions