Question

I am trying to pull text from another page (ajaxuseradd.psp) which is in JSON format. I am then trying to insert this text into several text boxes and/or select lists. For right now, I am merely trying to do the text boxes.

Here’s my code, a good deal of which was given to me, because I am not all that familiar with jQuery:

<script type="text/javascript" src="jquery-1.7.min.js"></script>
<script type="text/javascript">
$('#username').change(function() {
    var userName = $(this).val();
    $.ajax({
        type: 'GET',
        url: 'ajaxuseradd.php',
        data: {
            uname: userName
        },
        success: function(data, status, xhr) {
            $.each(data, function(key, value) {
                $('#' + key).val(value);
            });
        },
        dataType: 'json'
    })
});

</script>
<form action="adduser.psp" method="get">
<fieldset>
    <label for="uname">Username:</label>
    <select name="uname" id="useruname" onchange="updateAdduser();">
<%
Random Python Code That Isn't Important But Generates Option Values
%>


<%= options %>

</select>

</fieldset>
<fieldset>
    <label for="fname">First Name:</label>
    <input type="text" name="fname" />
</fieldset>
<fieldset>
    <label for="lname">Last Name:</label>
    <input type="text" name="lname" />
</fieldset>
<fieldset>
    <label for="email">Email:</label>
    <input type="text" name="email">
</fieldset>

Output from ajaxuser.psp should be as follows, or some variation thereof. This will be displayed on the page ajaxuser.psp when the argument ?uname=neverland is used, for example:

{"fname" : Neverland, "lname" : Conference Room, "email" : [e-mail], "deptid" : deptid, "active" : active, "sentient" : sentient} 

So my code should look like this?

<script type="text/javascript" src="jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $('#username').change(function() {
    var userName = $(this).val();
        $.ajax({
            type: 'GET',
            url: 'ajaxuseradd.php',
            data: {
                uname: userName
            },
            success: function(data, status, xhr) {
        $("#fname").val(data.fname);
                });
            },
            dataType: 'json'
            })
        });
});


</script>

EDIT: This is still not working – I select a drop down value, and NO CHANGE for any of the fields.

Answer 1

The first thing I see is that you need to wrap the onchange handler in this:

$(document).ready(function () {

});

So it looks like this:

$(document).ready(function () {
    $('#username').change(function() {
    var userName = $(this).val();
        $.ajax({
            type: 'GET',
            url: 'ajaxuseradd.php',
            data: {
                uname: userName
            },
            success: function(data, status, xhr) {
                $.each(data, function(key, value) {
                    $('#' + key).val(value);
                });
            },
            dataType: 'json'
            })
        });
});

Also, this:

$.each(data, function(key, value) {
    $('#' + key).val(value);
});

Is not going to work like you think. You get back ONE object with the properties, so more like this:

success: function(data, status, xhr) {
    $("#fname").val(data.fname);
    ....
},