...
PDA

Basic Javascript text box problem

Tjk
10-16-2005, 10:16 AM
My first attempt at some Javascript....


<html>
<head>
<form>
<script type="javascript">
function test(){
if ($input == 0){
var $number= 0;
}
if ($input>0){
var $number= window.document.all.input1.value;
}
window.document.form.output= $number;
}

</script
</head>
<body>
<tr>
<td><input type="text" size="10" name="input1" id="input1" value="0" onChange="test();"></td>
</tr><br>
<td><INPUT size=3 name=output id=output value="0"></td>
</tr>

</body>
</form>
</html>


Basically I'm looking so that if I input a number into text box "input1", the Javascript will then write that number to text box "output" automatically using onChange.

Can you tell me what is wrong with this please?
vwphillips
10-16-2005, 12:39 PM
<html>
<head>
<form>

<script type="text/javascript">
<!--

function test(){
number= document.getElementById('input1').value;
if (number==''){
number= '0';
}
document.getElementById('output').value= number;
}

function test2(){
number= document.getElementById('input2').value;
if (number==''){
number= '0';
}
document.getElementById('output2').value= number;
}

function test3(){
number= document.getElementById('input3').value;
if (number==''){
number= '0';
}
document.getElementById('output3').value= number;
}
//-->
</script></head>
<body>
<table>
<tr>
<td><input type="text" size="10" name="input1" id="input1" value="0" onchange="test();"></td>
</tr>
<tr>
<td><INPUT size=3 name=output id=output value="0"></td>
</tr>
<tr>
<td><input type="text" size="10" name="input2" id="input2" value="0" onkeyup="test2();"></td>
</tr>
<tr>
<td><INPUT size=3 name=output2 id=output2 value="0"></td>
</tr>
<tr>
<td><input type="text" size="10" name="input3" id="input3" value="0" onblur="test3();"></td>
</tr>
<tr>
<td><INPUT size=3 name=output3 id=output3 value="0"></td>
</tr>
</table>
Basically I'm looking so that if I input a number into text box "input1",
the Javascript will then write that number to text box "output" automatically using onChange.

</body>
</form>
</html>
Mr J
10-16-2005, 02:38 PM
Tjk

I fixed your own script which might be easier to compare.
Javascript variables do not use the dollar sign ($)


<html>
<head>

<script type="text/javascript">
<!--
function test(){

myInput=document.forms["f1"]["input1"].value

if (myInput == "" || myInput==" "){
myOutput= 0
}
else{
myOutput= myInput
}

document.forms["f1"]["output"].value= myOutput
}

//-->
</script>
</head>
<body>

<form name="f1">

<input type="text" name="input1" value="0" onchange="test()"><br>
<input type="text" name="output" value="">

</form>

</body>
</html>
Tjk
10-16-2005, 03:35 PM
Thanks both of you. It worked in the end!

One last query for the day...

If I want to keep a submit button hidden at the bottom of the script and then it only reveal itself when both of the input fields are filled in, how would I do this?
Local Hero
10-16-2005, 05:11 PM
Check here: http://homepage.ntlworld.com/vwphillips//FormCompendium/FormCompendium.htm
He's got lots of useful scripts like that. It's helped me a lot.
Mr J
10-16-2005, 07:54 PM
Give this a try

<html>
<head>

<script type="text/javascript">
<!--
function test(){

myInput=document.forms["f1"]["input1"].value

if (myInput == "" || myInput==" "){
myOutput= 0
}
else{
myOutput= myInput
}

document.forms["f1"]["output"].value= myOutput


if(chkNum(myInput)){
document.forms["f1"]["sub"].style.visibility="visible"
}
else{
document.forms["f1"]["sub"].style.visibility="hidden"
alert("Please enter a number")
}

}

function chkNum(val){
chk=parseFloat(val)
if(chk==(val*1)){
return true
}
else{
return false
}
}
//-->
</script>
</head>
<body>

<form name="f1">

<input type="text" name="input1" value="0" onchange="test()"><br>
<input type="text" name="output" value="0">

<input type="submit" name="sub" style="visibility:hidden">

</form>

</body>
</html>
Tjk
10-16-2005, 08:03 PM
Could you explain to me how this script works ie what each bit of the code does?
Mr J
10-16-2005, 10:35 PM
Whos script?
Tjk
10-18-2005, 08:06 AM
Yours please.
Mr J
10-18-2005, 05:17 PM
<html>
<head>

<script type="text/javascript">
<!--
function test(){

myInput=document.forms["f1"]["input1"].value // assign value to variable myInput

if (myInput == "" || myInput==" "){ // if there is no value or there is only a single space
myOutput= 0 // set variable myOutput to zero
}
else{
myOutput = myInput // if there is a value then set variable outPut equal to myInput
}

document.forms["f1"]["output"].value= myOutput // assign the form textbox the value of myOutput

/* the following line sends the value of myInput to function chkNum which checks to see if it is a number*/
if(chkNum(myInput)){
document.forms["f1"]["sub"].style.visibility="visible" // if myInput is a number then show the button
}
else{
document.forms["f1"]["sub"].style.visibility="hidden" // if not, hide then button
alert("Please enter a number")
}

}

function chkNum(val){
chk=parseFloat(val)
if(chk==(val*1)){
return true
}
else{
return false
}
}

//-->
</script>
</head>
<body>

<form name="f1">

<input type="text" name="input1" value="0" onchange="test()"><br>
<input type="text" name="output" value="0">

<input type="submit" name="sub" style="visibility:hidden">

</form>

</body>
</html>

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum