Jquery - Passing input values to a radio button

Question

I am using MySQL and ajax to pull specific info from a table and then I am passing one of those values to a radio button.

User enters their ID number and it automatically adds the full name, email address and manager from the MySQL table.

I then pass the manager value to a radio button, but it's not working unless I actually click on the manager input field.

I tried, blur, change, keyup, focusin/out but its still not passing the value until I actually click on the input field.

PLEASE NOTE - it works fine if I manually add a value to the manager's field.

Any ideas?

<input type="text" name="id" id="id" value="" >
<input type="text" class="hidden" name="name" id="name" value="" >
<input type="text" class="hidden" name="email" id="email" value="" >
<input type="text" class="hidden" name="manager" id="manager" value="" >

<input type="radio" name="defaultmanager" id="defaultmanager" value="">
<label for="defaultmanager" id="defmanager" >Default manager:</label>

<input type="radio" name="reason" id="otherreason" value="">Other 
<input type="text" name="otherreason" />

<script>
$('#manager').bind("change paste keyup", function() {
var val = $(this).val();
$('#defmanager').text('Default Manager:' + val);
});
</script>

Again it works fine but I have to actually click on the input field in order for the value to be passed to the radio button.

Here's the code that automatically adds the name, email and manager:

$(function() {
    $( "#id" ).on( 'blur' , function() {
        $('#table1 tr').removeClass("hidden");
        // getting the value that user typed
        searchString=$(this).val();

        // forming the queryString
        var data = 'telefoon='+searchString;

        // if searchString is not empty
        if(searchString) {
            // ajax call

            $.ajax({
                type: "POST",
                url: "query2.php",
                data: data,

                success: function(html){ // this happens after we get results
                    result = String(html).split("|");

                    $("#name").val(result[0]);
                    $("#email").val(result[1]);
                    $("#manager").val(result[4]);
                }
            });    
        }
        return false;
    });
});

Answer 1

Where you are programmatically changing the value of the manager field, you need to trigger the change event:

$("#manager").val(result[4]).change();

A full, working example is here:

 $('#manager').bind("change paste keyup", function() { var val = $(this).val(); $('#defmanager').text('Default Manager:' + val); }); //Set value of the manager field from the database here $('#manager').val('Bob Marley').change(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" name="id" id="id" value="" > <input type="text" name="name" id="name" value="" > <input type="text" name="email" id="email" value="" > <input type="text" name="manager" id="manager" value="" > <input type="radio" name="defaultmanager" id="defaultmanager" value=""> <label for="defaultmanager" id="defmanager" >Default manager:</label> <input type="radio" name="reason" id="otherreason" value="">Other <input type="text" name="otherreason" /> 

Answer 2

i guess there's a million ways to do everything. I don't know why i wasnt thinking clear. :( Here's what i ended up doing:

$(function() {
$( "#id" ).on( 'blur' , function() {
    $('#table1 tr').removeClass("hidden");
    // getting the value that user typed
    searchString=$(this).val();

    // forming the queryString
    var data = 'telefoon='+searchString;

    // if searchString is not empty
    if(searchString) {
        // ajax call

        $.ajax({
            type: "POST",
            url: "query2.php",
            data: data,

            success: function(html){ // this happens after we get results
                result = String(html).split("|");

                $("#name").val(result[0]);
                $("#email").val(result[1]);
                $("#manager").val(result[4]);
                $("#defmanager").val(result[4]);
            }
        });    
    }
    return false;
});

});