CODEWITHSUNDEEP
javascriptphpjqueryajax
Steven
Steven

Reputation: 1173

Add select onchange with AJAX

I'm a newbie to Javascript so I couldn't find an answer to my problem. I want to add an extra select when a previous select is changed. I know my code should look something likes this but it isn't working:

$(function(){
$('#artist').change(function(){
    $.ajax({
        url: "artist_field.php",
        dataType:"html",
        type: "post",
        success: function(data){
           $('#artist').append(data);
        }
    });
});
});

HTML

<td id="artist">
<select name="artist_1" id="artist">
<option value=""></option>
</select>
</td>

My problem is that I don't know how to get the values in artist_field.php that I'm trying to send (because I'm trying to exclude the previous selected option in the new select). I hope someone can help me! Thanks in advance.

Upvotes: 4

Views: 83049

Answers (4)

gbestard
gbestard

Reputation: 1177

$(document).ready(function() {
    $('#select_2').hide();
    $('#artist').change(function(){
        $('#select_2').show();
    });
});

HTML

<td id="artist">
    <select name="artist_1" id="artist">
        <option value=""></option>
    </select>
</td>
<td>
    <select name="select_2" id="select_2">
        <option value=""></option>
    </select>
</td>

It will only show the second select if you chose something on the first one

Upvotes: 5

Muhammad Fahad
Muhammad Fahad

Reputation: 1422

Here is the code where you can easily understand select Tag on change with ajax request using PHP.

HTML Code

<div class="form-group">
    <label>Select SMS Template</label>
    <select id="sms-select" name="sms-select" onchange="smschange(this.value)" class="form-control">
        <option value="">Select SMS Template</option>
            <?php foreach ($sms as $row) { ?>
                <option value="1">Sample SMS</option>
                <option value="2">Test SMS</option> 
            <?php } ?>
    </select>
</div>

Javascript Code

<script>
    function smschange(id)
    {
        $.ajax({
            type: 'post',
            data: {'id': id},
            url: 'sms.php',
            dataType: 'json',
            success: function(res){
               alert(res);
            },
            error: function(res){
                $('#message').text('Error!');
                $('.dvLoading').hide();
            }
        });
    }
</script>

JQuery Library Source Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

Upvotes: 1

user3355403
user3355403

Reputation:

With "artist_field.php" returning a string containing all elements to place in the <select> element separated by commas. I hope it will help ☻ ☺

window.addEventListener("load", function(){
    var list = document.getElementById("artist");
    var xhr = Xhr();
    xhr.onreadystatechange = function(e){
        if(xhr.status === 4 || xhr.status === 200)
        {
            var results = (xhr.responseText).split(',');
            for(var i = 0; i < results.length; ++i)
            {
                var el = document.createElement("option");
                el.innerHTML = results[i];
                list.appendChild(el);
            }
        }
    };
    xhr.open("GET", "artist_field.php", false);
    xhr.send(null);
}, false);

function Xhr()
{
    try {
        return new XMLHttpRequest();
    }catch(e){}
    try {
        return new ActiveXObject("Msxml3.XMLHTTP");
    }catch(e){}
    try {
        return new ActiveXObject("Msxml2.XMLHTTP.6.0");
    }catch(e){}
    try {
        return new ActiveXObject("Msxml2.XMLHTTP.3.0");
    }catch(e){}
    try {
        return new ActiveXObject("Msxml2.XMLHTTP");
    }catch(e){}
    try {
        return new ActiveXObject("Microsoft.XMLHTTP");
    }catch(e){}
    return null;
}

Upvotes: 1

jwatts1980
jwatts1980

Reputation: 7354

Update: I just noticed that you have the ID artist in the code twice. You might change the TD to <td id="artist_td"> or something for my example to work

To send the currently selected option back to the server in the post, you can do something like: 

$('#artist').change(function(){
    $.ajax({
        url: "artist_field.php",
        data: { "value": $("#artist").val() },
        dataType:"html",
        type: "post",
        success: function(data){
           $('#artist').append(data);
        }
    });
});

Then in the PHP document, you can get the value with $_POST["value"];, and use that value to limit the return options.

update

If you are going to fire the change event off multiple times, it's going to append the new data every time. If this is not the behavior that you want, add a div or something to put the new data into like:

<td id="artist_td">
<select name="artist_1" id="artist">
<option value=""></option>
</select>
<div id="newdata"></div>
</td>

Then edit the success function

success: function(data){
   $('#newdata').empty().append(data);
}

Upvotes: 3

Related Questions