jquery javascript problem

Question

Could you please take a look and tell why this isnt working i cant figure it out. the problem is with

$("#item_name").val(item_name);
$("#amount").val(course_price);

This should be adding info to 2 hidden inputs (

<input type="hidden" name="item_name" id="item_name"value="">
 <input type="hidden" name="amount" id="amount" value="">

) but they are coming up as blank

also the value from course_name.php?courseID=1 is Course Name,500

Full Javascript

<script>

      $(document).ready(function() {
url = "date_range.php?courseID="+$('#course_name').val();
  $("#dates").load(url)
  url = "course_name.php?courseID="+$('#course_name').val();
   var course_details;
$.get(url, function(data){
    course_details= data;
});
   split_course_details = course_details.split(',');
   course_name=split_course_details[0];
   course_price=split_course_details[1];
   course_date=$("#date_range").val();
   item_name=course_name+' - '+course_date;
   $("#item_name").val(item_name);
    $("#amount").val(course_price);


      });


$('#course_name').change(function() {
    url = "date_range.php?courseID="+$('#course_name').val();
  $("#dates").load(url)
  url = "course_name.php?courseID="+$('#course_name').val();
  var course_details;
$.get(url, function(data){
    course_details= data;
});
   split_course_details = course_details.split(',');
   course_name=split_course_details[0];
   course_price=split_course_details[1];
   course_date=$("#date_range").val();
   item_name=course_name+' - '+course_date;
   $("#item_name").val(item_name);
    $("#amount").val(course_price);
});

</script>

2 hidden inputs with the same ID? IDs are supposed to be unique, no surprise it fails. — Capsule
– Capsule, Commented Feb 22, 2011 at 22:48

limc · Accepted Answer · 2011-02-22 22:50:12Z

1

Place your calculation inside the callback function of $.get(), like this:-

$(document).ready(function() {
    url = "date_range.php?courseID=" + $('#course_name').val();
    $("#dates").load(url)
    url = "course_name.php?courseID=" + $('#course_name').val();
    var course_details;
    $.get(url, function(data) {
        course_details = data;
        split_course_details = course_details.split(',');
        course_name = split_course_details[0];
        course_price = split_course_details[1];
        course_date = $("#date_range").val();
        item_name = course_name + ' - ' + course_date;
        $("#item_name").val(item_name);
        $("#amount").val(course_price);
    });

});

$('#course_name').change(function() {
    url = "date_range.php?courseID=" + $('#course_name').val();
    $("#dates").load(url)
    url = "course_name.php?courseID=" + $('#course_name').val();
    var course_details;
    $.get(url, function(data) {
        course_details = data;
        split_course_details = course_details.split(',');
        course_name = split_course_details[0];
        course_price = split_course_details[1];
        course_date = $("#date_range").val();
        item_name = course_name + ' - ' + course_date;
        $("#item_name").val(item_name);
        $("#amount").val(course_price);
    });
});

answered Feb 22, 2011 at 22:50

limc

40.3k22 gold badges106 silver badges145 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Intelekshual Over a year ago

Exactly. $.get is asynchronous by default, so any data that is returned needs to be handled in the success callback.

Tommy Arnold Over a year ago

actually this did fix the issue. I wasnt testing it correctly.

Šime Vidas Over a year ago

@limc Notice that you have the same code twice - once in the ready callback and once in the change callback. This should be optimized to remove the redundancy. You can do it by simply triggering the change event on page load (right after you assign the change callback), like so: elem.change( callbackfunction ).change();.

Šime Vidas Over a year ago

@limc Also, the variables are not declared, so they become implicit global variables. You have to declare them using var to avoid that.

Šime Vidas · Accepted Answer · 2011-02-22 23:03:24Z

1

Try this:

$(function() {

    var cname = $('#course_name'),
        dates = $('#dates'),
        iname = $('#item_name'),
        amount = $('#amount'),
        drange = $('#date_range');

    cname.change(function() {    
        dates.load( 'date_range.php?courseID=' + this.value );

        $.get('course_name.php?courseID=' + this.value, function(data) {
            data = data.split(',');    
            iname.val( data[0] + ' - ' + drange.val() );
            amount.val( data[1] );
        });
    }).change();

});

edited Feb 22, 2011 at 23:03

answered Feb 22, 2011 at 22:54

Šime Vidas

187k66 gold badges290 silver badges392 bronze badges

Comments

DrStrangeLove · Accepted Answer · 2011-02-22 22:51:21Z

0

it seems like you're using url variable twice for different data... try using additional variable..

answered Feb 22, 2011 at 22:51

DrStrangeLove

11.6k16 gold badges63 silver badges73 bronze badges

Collectives™ on Stack Overflow

jquery javascript problem

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related