Question

Ive got a document and when the user enters something into one input I need to show a response in a second input box. I can get the user given value, i can process it, but when I try to set the second input box with the result I get the error $.field is null. Here is the code:

$('places').addEvent('keyup', function(){
    var places = $('places').value;
    alert("PLACE: "+places);
    var price = values[places];
    var nights = $('nights').value.toInt();
    alert("NIGHTS: "+nights);
    var total = price * nights;
    alert("TOTAL: "+total);
    $('pricepernight').set('text', total);
    $('pricetotal').set('text', total - ((total / 100) * 21));
});

So I get the place value. I pull the price of the place out of an assoc array. I then multiple that price by the amount of nights field in by the user and this is then my total amount. It is this amount that I cannot set to. Note that the alert shows the correct amount.

and the html looks like this

<div class='block'>
    <input type="text" id="places" />
</div>

<div class='block'>
    <label for="nachten">Aantal nachten</label>
    <input type="text" id="nights" />
</div>

<div class='block long'>
    <span class='label'>Prijs per slaapplaats per nacht</span>
    <input type="text" class='resultfield' id='pricepernight' />
</div>
<div class='block last'>
    <span class='label'>Totaalprijs excl. btw</span>
<input type="text" class='resultfield' id='pricetotal'/>
</div>

Firebug responds:

String contains an invalid character
[Break On This Error]   

...x:\'4W\',3X:18.1l,al:18.1l,1Q:18.1l,as:18.1l,8S:18.1l,1F:O,3E:{x:\'1u\',y:\'1o\'...

Any ideas/suggestions anyone? Thank you in advance!

Answer 1

right. you seem to have used a mix of mootools and jquery code.

$('nights').addEvent('keyup', function(){
    var places = $('places').value;
    var price = values[places];
    var nights = $('nights').value;
    var total = price * nights;
    alert(total);
    $('#pricepernight').val(total);
    //$('#pricetotal').val(total - ((total / 100) * 21));
}); 

in mootools 1.2+, this should be:

$('nights').addEvent('keyup', function(){
    var places = $('places').get('value');
    var price = values[places];
    var nights = $('nights').get('value');
    var total = price * nights;
    alert(total);
    $('pricepernight').set('value', total);
    //$('#pricetotal').val(total - ((total / 100) * 21));
}); 

there’s an implied global array values. also, this is not very safe as nights may not be integer.

the point is. #id -> id and .val() -> set('value', 'newvalue') – or .get('value')