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

1

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

      });

}

answered Jun 16, 2015 at 2:22

Gary Liu

13.9k1 gold badge21 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

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

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related