jQuery .attr() not responding as expected

Question

I have a text field that holds a difference between days. I need to use it calculate something on my page. However, for some reason it is coming back as undefined when I do a console.log(). Any ideas?

<script>
        $(document).on('change', '#unitselector', function()
        {
            var unit = $('select option:selected').text();
            var rate = $(this).val();
            var tax = $('select option:selected').attr('label');
            var depart=$('#departdate').val();
            var arrival = $('#arrivaldate').val();
            var dataString = {unit:unit, depart:depart, arrival:arrival};
            console.log(dataString);
            //console.log($('.extracharges').serialize());
            $.ajax({
                type: "POST",
                url: "classes/unit_info.php",
                data: dataString,
                cache: false,
                success: function(html)
                {
                    $('.unitinfolist').html(html);
                }
            });

            var days = $('#days').attr('name');
            var days2 = $('#days').attr('value');
            console.log('days: '+days);
            console.log('days: '+ days2 );
            $('.rentalcharges').find('#rent').val(rate*days);
        });
    </script>

and the PHP

$arrive = $_POST['arrival'];
$leave = $_POST['depart'];

$a = date_create($arrive);
$d = date_create($leave);
$diff = date_diff($d,$a);

echo '<input type="text" id="days" value="'.$diff->d.'" name="'.$diff->d.'" />';

please post the relevant HTML.. do you have duplicate IDs in your html? — Venkata Krishna, Oct 30 '13 at 23:51
Can you post the outputted HTML (copied from source, not written out manually) for that input field? — Popnoodles, Oct 30 '13 at 23:52
Use [`.val()`](http://api.jquery.com/val/) for form control values. Also, I'm guessing you should probably move the last 5 lines into the AJAX success handler. Otherwise, the `#days` element probably won't be present — Phil, Oct 30 '13 at 23:52
Isn't the relevant html listed? The jQuery sends `dataString` to the PHP and it creates that `input`. That input displays the proper number; I can see it. It just isn't getting it in the jQuery for some reason. — Burning Hippo, Oct 30 '13 at 23:56
Is the `#days` input which gets echoed by PHP something which is returned from the `.ajax()` call? Is that what is put into the element with class `unitinfolist` in the success method? If so, the code which tries to find that input and get the name/value is not finding anything because it is executing before the ajax request returns. Search SO for questions regarding async code and execution order regarding ajax. — JAAulde, Oct 30 '13 at 23:57
@user2690363 The last 5 lines will be executing before the AJAX request has completed, hence why they should be inside the `success` callback — Phil, Oct 30 '13 at 23:58
@user2690363 no the relevant HTML isn't listed. PHP that outputs HTML is shown however there is no guarantee that it outputs what you expect, and we can't guess that. You should post the output. By the way Phil knows the answer, and has left it as a comment. — Popnoodles, Oct 31 '13 at 00:00

score 1 · Accepted Answer · answered Oct 30 '13 at 23:59

The ajax call is asynchronous so even though you have the logging code written after the ajax call you are logging the values before they have been returned from the server.

Move your code into the ajax success handler like so:

<script>
        $(document).on('change', '#unitselector', function()
        {
            var unit = $('select option:selected').text();
            var rate = $(this).val();
            var tax = $('select option:selected').attr('label');
            var depart=$('#departdate').val();
            var arrival = $('#arrivaldate').val();
            var dataString = {unit:unit, depart:depart, arrival:arrival};
            console.log(dataString);
            //console.log($('.extracharges').serialize());
            $.ajax({
                type: "POST",
                url: "classes/unit_info.php",
                data: dataString,
                cache: false,
                success: function(html)
                {
                    $('.unitinfolist').html(html);
                    var days = $('#days').attr('name');
                    var days2 = $('#days').attr('value');
                    console.log('days: '+days);
                    console.log('days: '+ days2 );
                    $('.rentalcharges').find('#rent').val(rate*days);
                }
            });

        });
    </script>

This is a duplicate question and should have been flagged as such with a link to the duplicated in the comments. — JAAulde, Oct 31 '13 at 00:04
I did, after determining that it was the case. I am simply pointing it out to you since you left an answer on it. No offense intended, just pointing out SO protocol. — JAAulde, Oct 31 '13 at 00:08
@popnoodles I knew it was a duplicate but was too lazy to find the other post :) — Phil, Oct 31 '13 at 00:13

jQuery .attr() not responding as expected

1 Answers1