...

View Full Version : Can't Clear Textfield?



jake_merringer
07-19-2011, 07:20 PM
Hello, I am fairly new to javascript and am having trouble clearing a text field. I am making a "vending machine simulator" as an exercise. I have a button that is the coin return, and should clear the balance display. e.g the machine shows a balance of $2 inserted, the coin return button should clear it to 0.

I believe I have done everything correctly but get NaN as the output (a text field named "box1"). I believe it has something to do with how the field is validated. It has number precision set to 2, which I would think would just become 0.00 or something. Anyways, here is my code:

HTML:


<input class="money" id="coinreturn" type="button" value="return" onClick="coinReturn()" />
<input name="box1" id="box1" onkeypress="return numbersonly(this, event)" maxlength="4" type="text"/>


JavaScript for the coinReturn function:



function coinReturn()
{
document.getElementById('box1').value = 0;
}

JavaScript for the "numbers only" validation:


function numbersonly(myfield, e, dec)
{
var key;
var keychar;

if (window.event)
{
key = window.event.keyCode;
}
else if (e)
{
key = e.which;
}
else
{
return true;
}

keychar = String.fromCharCode(key);

// control keys
if ((key==null) || (key==0) || (key==8) ||
(key==9) || (key==13) || (key==27) )
{
return true;
}
// numbers
else if ((("0123456789.").indexOf(keychar) > -1))
{
return true;
}

}

jmrker
07-19-2011, 08:19 PM
In your code...


function coinReturn()
{
document.getElementById('box1').value = field.defaultValue;
}

Where is field.defaultValue; coming from?

jake_merringer
07-19-2011, 08:23 PM
Whoops. That was supposed to be


document.getElementById('box1').value = 0;

I also tried:

document.getElementById('box1').value = "";

jmrker
07-19-2011, 08:27 PM
Works fine for me. What seems to be the problem?

jake_merringer
07-19-2011, 08:42 PM
Mine shows NaN in the textfield it outputs to. Maybe its another piece of the script then?

jmrker
07-19-2011, 09:34 PM
Mine shows NaN in the textfield it outputs to. Maybe its another piece of the script then?

What is the sequence of entries and button click you use?

Is what you posted in #1 the whole script you are using?

:confused:

jake_merringer
07-19-2011, 09:59 PM
No that isn't all my code. Here is my HTML form and the complete javascript:


<form name="machine">
<div class="grey" style="position:relative;top:-20px;">
<h2>Money Input:</h2>
$ <input name="box1" id="box1" onkeypress="return numbersonly(this, event)" maxlength="4" type="text"/>
</div>
<div class="white">
<input class="money" id="dollar" type="button" value="$ 1.00" />
<input class="money" id="quarter" type="button" value="$ .25" />
<input class="money" id="dime" type="button" value="$ .10" />
<input class="money" id="nickel" type="button" value="$ .05" />
<input class="money" id="coinreturn" type="button" value="return" onClick="coinReturn()" />
</div>
<div class="grey">
<h2>Drinks:</h2>
<div class="price"><p class="vertical">$2.00</p></div>
<input class="drink" id="redbull" type="button" value="Red Bull" />
<input class="drink" id="monster" type="button" value="Monster" />
<input class="drink" id="rockstar" type="button" value="Rockstar" />
<br />
<div class="price"><p class="vertical">$ .75</p></div>
<input class="drink" id="drpepper" type="button" value="Dr. Pepper" />
<input class="drink" id="mtndew" type="button" value="Mtn. Dew" />
<input class="drink" id="pepsi" type="button" value="Pepsi" />
</div>
<div class="white">
<div class="left">
<h2>Your Change:</h2>
$ <input name="box2" id="box2" type="text" value=""/>
</div>
<div class="left">
<h2>Your Product:</h2>
<input name="box3" id="box3" type="text" value=""/>
</div>
</div>
<br />
<br />
<p id="thanks" align="center">
</p>
</form>


/////////////////////////////
function numbersonly(myfield, e, dec)
{
var key;
var keychar;

if (window.event)
{
key = window.event.keyCode;
}
else if (e)
{
key = e.which;
}
else
{
return true;
}

keychar = String.fromCharCode(key);

// control keys
if ((key==null) || (key==0) || (key==8) ||
(key==9) || (key==13) || (key==27) )
{
return true;
}
// numbers
else if ((("0123456789.").indexOf(keychar) > -1))
{
return true;
}

}

/////////////////////////////
$(function()
{

var money = [
{
name: "Dollar",
amount: 1.00
},
{
name: "Quarter",
amount: 0.25
},
{
name: "Dime",
amount: 0.10
},
{
name: "Nickel",
amount: 0.05
}
]

var dollar = money[0];
var quarter = money[1];
var dime = money[2];
var nickel = money[3];

$('#dollar').data(dollar);
$('#quarter').data(quarter);
$('#dime').data(dime);
$('#nickel').data(nickel);

});

/////////////////////////////
function coinReturn()
{
document.getElementById('box1').value = field.defaultValue;
}
/////////////////////////////
$(function()
{
$('.money').bind('click', addMoney);
});

/////////////////////////////
function addMoney()
{

var id = this.id;
var money = $('#' + id).data();
var added = money.amount*1;
var insertedMoney = document.getElementById('box1').value*1;
var sum = insertedMoney + added;

if(insertedMoney < 5)
{
document.getElementById('box1').value = sum.toFixed(2);
}
else
{
alert("This machine will only accept up to $5.00 at a time.");
}
}

/////////////////////////////
$(function()
{
$('.drink').bind('click', purchase);
});

/////////////////////////////
$(function()
{

var drinks = [
{
name: "Red Bull",
price: 2.00
},
{
name: "Monster",
price: 2.00
},
{
name: "Rockstar",
price: 2.00
},
{
name: "Mtn. Dew",
price: .75
},
{
name: "Pepsi",
price: .75
},
{
name: "Dr.Pepper",
price: .75
}
]

var redbull = drinks[0];
var monster = drinks[1];
var rockstar = drinks[2];
var mtndew = drinks[3];
var pepsi = drinks[4];
var drpepper = drinks[5];

$('#redbull').data(redbull);
$('#monster').data(monster);
$('#rockstar').data(rockstar);
$('#mtndew').data(mtndew);
$('#pepsi').data(pepsi);
$('#drpepper').data(drpepper);

});


/////////////////////////////
function purchase(arguments)
{
var id = this.id;
var drink = $('#' + id).data();


var requiredMoney = drink.price;
var drinkName = drink.name;
var insertedMoney = document.getElementById('box1').value;
var changeDisplay = document.getElementById('box2');
var productDisplay = document.getElementById('box3');
var change = insertedMoney-requiredMoney;
var result = change.toFixed(2);

if(insertedMoney >= requiredMoney)
{
changeDisplay.value = result;
productDisplay.value = drinkName;
document.getElementById('box1').value = 0;
document.getElementById("thanks").innerHTML="Thank you for your purchase!";
}
else
{
alert("Insufficient funds.");
}
}

jmrker
07-19-2011, 10:07 PM
Is this a JQuery javascript?
As is, I get an $ is undefined error.

jake_merringer
07-19-2011, 10:18 PM
Yes it has JQuery, I'm sorry I forgot about that. I will attach a zip.10077

jake_merringer
07-21-2011, 08:05 PM
I found the problem:

The button being pressed was assigned a class that was being used elsewhere, causing a conflict. Thanks for giving it a shot jmrker!

jmrker
07-21-2011, 11:02 PM
I found the problem:

The button being pressed was assigned a class that was being used elsewhere, causing a conflict. Thanks for giving it a shot jmrker!

You're most welcome.
I'm glad you found the problem as it is difficult to evaluate without the code.

Good Luck!
:)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum