选择选项值使用ajax发送到php文件

Question

I have a select dropdown box

<select name="status" id="status" onchange="changeStatus()">
    <option value="step_1">step_1</option>
    <option value="step_2">step_2</option>
    <option value="step_3">step_3</option>
    <option value="step_4">step_4</option>
</select>

And my javascript

<script>
    function changeStatus() {
        $('select.changeStatus').change(function(){
            $.ajax({
                    type: 'POST',
                    url: 'update_status.php',
                    data: {changeStatus: $('select.changeStatus').val()},
                    dataType: 'html'
             });
        });
    });
</script>

So I want the value selected from the select dropdown box send to the php file(update_status.php)

Answer 1

You don't need to mix jQuery and inline JS

HTML - we'll use your selects name in the function. I've removed the inline function call:

<select name="status" id="status">
    <option value="step_1">step_1</option>
    <option value="step_2">step_2</option>
    <option value="step_3">step_3</option>
    <option value="step_4">step_4</option>
</select>

jQuery - I have taken the code out of the function you were calling inline, it was not needed.

<script>
    $(document).ready(function() {
        $('select[name="status"]').change(function(){
            var status = $(this).val();
            $.ajax({
                    type: 'POST',
                    url: 'update_status.php',
                    data: {changeStatus: status},
                    dataType: 'html'
             });
        });
    });
</script>

You can directly test when the select changes and grab its value right then. Here is an EXAMPLE

I have also wrapped the jQuery in a document ready handler. Depending on where you're loading the script in your page you may need to do this to make sure that your jQuery is run as soon as the DOM elements have been loaded.

Answer 2

$('#status').val() is used to get value of select options.

So try this

<script>
    function changeStatus() {
        $.ajax({
                    type: 'POST',
                    url: 'update_status.php',
                    data: {changeStatus: $('#status').val()},
                    dataType: 'html'
             });
    });
</script>

or

<script>

function changeStatus() {
    $.post("update_status.php", {changeStatus: $('#status').val()}, function(data, status){

    });
}

</script>

Answer 3

Select id using # . Since you are already using javascript onchange event in select field so no need to use jquery change() event. jQuery use # to select id and . to select class. since you are using id="status" so you must use # to select the id. The way you are trying to collect the value of the select field in this line $('select.changeStatus').val() is wrong. Because there are no class named changeStatus there.

function changeStatus() {

        $.ajax({
                type: 'POST',
                url: 'update_status.php',
                data: {changeStatus: $('#select').val()},
                dataType: 'html'

        });
}

Answer 4

Remove the onchange field from select and put the below code to your script and this is working. Use JQuery post functionality instead.

$("#status").change( function() {

    alert($( this ).val());
    $.post('update_status.php', { changeStatus: $(this).val()},      
         function(response) {
         console.log( response);

    });

});

Answer 5

       <select name="status" id="status" onchange="changeStatus(this.value)">
            <option value="step_1">step_1</option>
            <option value="step_2">step_2</option>
            <option value="step_3">step_3</option>
            <option value="step_4">step_4</option>
        </select>


function changeStatus(value) {

        $.ajax({
                type: 'post',
                url: 'update_status.php',
                data: {'get_data:value'},
                success: function (response) {
                       document.getElementById("loadto").innerHTML=response; 
                     }

        });
}

I Hope it will be helpful .....