CODEWITHSUNDEEP
javascriptformseventsinputmootools
JeremyS
JeremyS

Reputation: 329

Why can't I set my input field with MooTools?

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!

Upvotes: 1

Views: 1216

Answers (3)

Dimitar Christoff
Dimitar Christoff

Reputation: 26165

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')

Upvotes: 3

Kanishka Panamaldeniya
Kanishka Panamaldeniya

Reputation: 17576

try this

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

and what is values[places]?

Upvotes: 0

Santosh Gokak
Santosh Gokak

Reputation: 3411

There are couple of minor mistakes here.

  1. First, you should use # sign to select based on your id attributes like places and nights

    Check http://api.jquery.com/id-selector/

  2. Second, use val() to read the value from the html controls rather than value

    Check http://api.jquery.com/val/

Upvotes: 0

Related Questions