based on selection of radio button,
i want to change the text box to enable and disable.
And additionally, how to set if i enter a value in textbox1 then calculating something and display the result in textbox2 that to on key up… not on form submitting.
Please provide code to do this, am a beginner to java script…
Thanking you…
It is showing all forums…
Is there any site showing working examples…
Here is a working example. You can enable and disable textbox 1 by clicking on the radio buttons. You can also put a number value into textbox 1 (when it is enabled) and the number multiplied by 20 will appear int textbox 2. I have not included error handling for the input box, so only use numbers if you want a result.
[HIGHLIGHT=“”]
<!doctype HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=windows-1252”>
<title>Enable Text Box and Calculate</title>
<script type=“text/javascript”>
<!–
var allRadios=null; // global
// apply handler to radio buttons on page load
function init()
{// short cut to radio buttons in form
allRadios=document.myForm.myRadios;
// loop through all radio buttons applying handler
for(var i=0; i<allRadios.length; i++)
{ allRadios[i].onchange=getChecked;
}
// apply handler to textbox 1 for calculation in textbox 2
document.myForm.myTxtBox.onchange=function(){
// no error handling in this example - assumes number input
var result=parseFloat(this.value)*20;
document.myForm.myTxtBox2.value=result;
}
}
// ------
function getChecked()
{ var checkedObj=this;
// object reference is passed as “this”
// read checked object value then set boolean
var isChecked=(checkedObj.value==“false”)?true : false;
// apply boolean to textbox to disable/enable box
document.myForm.myTxtBox.disabled=isChecked;
}
// ----------
window.onload=init;
//–>
</script>
<style type=“text/css”>
<!–
body { font-family:arial, helvetica, sans-serif; font-size:13px; color:#000; font-weight:normal; }
.smlB { font-size:11px; color:#000080; }
–>
</style>
</head>
<body>
<form name=“myForm”>
<p><input type=“radio” name=“myRadios” value=“true” checked> Enable text box 1</p>
<p><input type=“radio” name=“myRadios” value=“false”> Disable text box 1</p>
<p>Put number value into textbox 1 to calculate value in textbox 2<br>
<span class=“smlB”>No error handling in this short example</span></p>
<p><b>Box 1</b>: <input type=“text” name=“myTxtBox” value=“0” size=“20”> </p>
<p>Calculation: Textbox 1 x 20= Textbox 2 </p>
<p><b>Box 2</b>: <input type=“text” name=“myTxtBox2” value=“0” size=“20”> </p>
</form>
<!-- end myForm –>
</body>
</html>
Definition and Usage The name attribute specifies the name of a form. The name attribute of the form element provides a way to reference the form in a script.
Tip: In XHTML, the name attribute of the <form> tag is deprecated, and will be removed. Use the id attribute instead.