CODEWITHSUNDEEP
phpjqueryajax
frosty
frosty

Reputation: 2649

Ajax not working on select tag, PHP, AJAX

I'm trying to use ajax on a select tag with 2 options, but it's not getting the $_POST for some reason. It prints out the "---", but it does not print out the $_POST value, which is either 1 or 2. I'm not sure what I did wrong. Please take a look at my code:

newtest.php 

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

<script type = "text/javascript"> 

function ajax(url,type,theName,id) {

      $.ajax({
           type: "POST",
           url: url,
           data: { select: $(type+'[name='+theName+']').val()},
           error: function(xhr,status,error){alert(error);},
           success:function(data) {
             document.getElementById( id ).innerHTML = data;
           }

      });

}

</script>

<?php

echo "<select name = 'name' onchange = 'ajax(\"newtestx.php\",\"input\",\"name\",\"output\")'>";
echo "<option value = '1'> 1 </option>";
echo "<option value = '2'> 2 </option>";
echo "</select>";

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

?>

newtestx.php 

<?php

$name = $_POST['name'];
echo $name."---";

?>

Upvotes: 0

Views: 1700

Answers (3)

Kremlan
Kremlan

Reputation: 310

You are sending a POST parameter with the key "select" to the server in your AJAX call:

   data: { select: $(type+'[name='+theName+']').val()},

In newtestx.php you are trying to retrieve the value from a POST parameter with the key "name" - which doesn't exist:

$name = $_POST['name'];

You could fix this easily by giving the parameter keys the same name. If you would look for $name = $_POST['select'] the parameter would be found.

Inline Javascript is considered bad practice and there's no need to echo out the HTML markup, it makes the mark up harder to work with.

newtest.php

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="[link to your javascript file here]"></script>
<select name='numbers' class="postValueOnChange" data-id-to-update="output" data-post-url="newtestx.php">
    <option value='1'>1</option>
    <option value='2'>2</option>
</select>
<div id='output'></div>

Javascript file

$(document).ready(function () {
    $('.postValueOnChange').change(postSelectedValue);

    function postSelectedValue(e) {
        var $self = $(this);
        var url = $self.data('post-url');
        var $elementToUpdate = $('#' + $self.data('id-to-update'));

        var jqxhr = $.ajax({
            type: "POST",
            url: url,
            data: {
                selected: $self.val()
            }
        });
        jqxhr.done(function (data) {
            $elementToUpdate.html(data);
        });
        jqxhr.fail(function (jqXHR, textStatus, errorThrown) {
            alert(errorThrown);
        });
    }
});

newtestx.php

<?php
$name = $_POST['selected'];
echo $name."---";
?>

Upvotes: 1

Adib Aroui
Adib Aroui

Reputation: 5067

First, Since you are using jQuery, why are you still using inline javascript?

Well I suggest you first to restrucure your code around the jQuery change event:

$(document).ready(function() {
        $('select').change(function(e) {
        e.preventDefault();

        var selected = $('.select option:selected').val();
        var id, theName, url= ...// get it from the DOM 

        $.ajax({
           type: "GET",
           url: url,
           data: { select: selected},
           error: function(xhr,status,error){alert(error);},
           success:function(data) {
             $('#'+id).html(data);
           }

      });


    }); 
});

Second, why are you coding HTML with PHP, you are making yourself struggle and lose time only with quotes and double quotes, and no-needed spaces.

    <form action="">  
        <select name="name">
        <option value="1">1</option>
        <option value="1">1</option>
        </select>


    </form>

<div id="output"></div>

Upvotes: 0

charlietfl
charlietfl

Reputation: 171679

You are sending post param select and trying to receive as $_POST['name'].

Make sure they match...either both as name or as select

Upvotes: 1

Related Questions