Using ajax to display what is being selected not working, PHP, AJAX, JAVASCRIPT

Question

Using ajax, I'm trying to display what is being selected, but it's not displaying anything at all for some reason. I know the ajax function itself got called, by using alert inside the function, and I think the real problem is actually in test2.php, but I'm not sure what I did wrong. Please take a look:

test1.php

<?php

include('ajax.php');

echo "<select name = 'select' onchange = 'ajax(\"test2.php\",\"output\")'>";

echo "<option value = '1'> 1 </option>";
echo "<option value = '2'> 2 </option>";
echo "<option value = '3'> 3 </option>";

echo "</select>";
echo "<div id = 'output'/>";

?>

test2

<?php

$select = $_POST['select'];
echo $select;

?>

ajax.php

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script type = "text/javascript"> 

function ajax(url,id) {

      $.ajax({
           type: "POST",
           url: url,
           error: function(xhr,status,error){alert(error);},
           success:function(data) {
             document.getElementById( id ).innerHTML = data;
           }

      });

}

</script>

You need to send the data with the ajax request. api.jquery.com/jquery.ajax Something like data: { select: $('select[name="select"]').val()} in $.ajax({ See jquery doc. — chris85
– chris85, Commented Jun 16, 2015 at 2:22

Gary Liu · Accepted Answer · 2015-06-16 02:22:38Z

you have not post data to test2!!

<?php

include('ajax.php');

echo "<select id = 'select' onchange = 'ajax(\"test2.php\",\"output\")'>";

echo "<option value = '1'> 1 </option>";
echo "<option value = '2'> 2 </option>";
echo "<option value = '3'> 3 </option>";

echo "</select>";
echo "<div id = 'output'/>";

?>

function ajax(url,id) {

      $.ajax({
           type: "POST",
           url: url,
           data : {select:$('#select').find("option:selected").val()}, 
           error: function(xhr,status,error){alert(error);},
           success:function(data) {
             document.getElementById( id ).innerHTML = data;
           }

      });

}

Bnd G · Accepted Answer · 2015-06-16 02:34:27Z

You are missing data attribute in Ajax request.

Its a bad practice to mix php scripts and html together. Always think about separation of concern.

Here is how you should do it.

<?php 
include('ajax.php');
?>
<select name = 'select'>"
    <option value = '1'> 1 </option>
    <option value = '2'> 2 </option>
    <option value = '3'> 3 </option>
</select>
<div id = 'output'/>

Ajax.php

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script type = "text/javascript"> 
$(function () {
    $(document).on('change','select',function () {
        var data = $(this).val();
        $.ajax({
           type: "POST",
           url: "test2.php",
           data: data,
           error: function(xhr,status,error){alert(error);},
           success:function(response) {
               $("#output").html(response);
           }

        });
    });

});
</script>

Collectives™ on Stack Overflow

Using ajax to display what is being selected not working, PHP, AJAX, JAVASCRIPT

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related