Dom--Form and Form Input Objects
<html>
<head>
<script type="text/javascript">
function changeAction()
{
var x=document.getElementById("myForm")
alert("Original action: " + x.action)
x.action="default.asp"
alert("New action: " + x.action)
}
function showMethod()
{
var x=document.getElementById("myForm")
alert(x.method)
}
function alertId()
{
var txt="Element id: " + document.getElementById("myButton").id
txt=txt + ", element type: " + document.getElementById("myButton").type
txt=txt + ", element value: " + document.getElementById("myButton").value
alert(txt)
document.getElementById("myButton").disabled=true
}
function check()
{
document.getElementById("myCheck").checked=true
}
function uncheck()
{
document.getElementById("myCheck").checked=false
}
function createOrder()
{
coffee=document.form2.coffee
txt=""
for (i=0;i<coffee.length;++ i)
{
if (coffee[i].checked)
{
txt=txt + coffee[i].value + " "
}
}
document.getElementById("order").value="You ordered a coffee with " + txt
}
function convertToUcase()
{
document.getElementById("fname").value=document.getElementById("fname").value.toUpperCase()
document.getElementById("lname").value=document.getElementById("lname").value.toUpperCase()
}
function checkRadio(browser)
{
document.getElementById("answer").value=browser
}
function formReset()
{
document.getElementById("formReset").reset()
}
</script>
</head>
<body>
<form id="myForm" action="js_examples.asp" method="post">
<br>
-----------------------------------------------------------
<br>
<input type="button" onclick="changeAction()" value="Change value of action attribute">
<br>
-----------------------------------------------------------
<br>
<input type="button" onclick="showMethod()" value="Show method">
<br>
-----------------------------------------------------------
<br>
<input type="button" value="Click me!" id="myButton" onClick="alertId()" />
<br>
-----------------------------------------------------------
<br>
<input type="checkbox" id="myCheck" />
<input type="button" onclick="check()" value="Check Checkbox" />
<input type="button" onclick="uncheck()" value="Uncheck Checkbox" />
</form>
<br>
-----------------------------------------------------------
<br>
<p>How would you like your coffee?</p>
<form name="form2">
<input type="checkbox" name="coffee" value="cream">With cream<br />
<input type="checkbox" name="coffee" value="sugar">With sugar<br />
<br />
<input type="button" onclick="createOrder()" value="Send order">
<br /><br />
<input type="text" id="order" size="50">
</form>
<br>
-----------------------------------------------------------
<br>
<form name="form1">
First name: <input type="text" id="fname" size="20" />
<br /><br />
Last name: <input type="text" id="lname" size="20" />
<br /><br />
Convert to upper case
<input type="checkBox" onclick="if (this.checked) {convertToUcase()}">
</form>
<br>
-----------------------------------------------------------
<br>
<p>What's your favorite browser:</p>
<form name = "Form2">
<input type="radio" name="browser" onclick="checkRadio(this.value)" value="Internet Explorer">Internet Explorer<br />
<input type="radio" name="browser" onclick="checkRadio(this.value)" value="Firefox">Firefox<br />
<input type="radio" name="browser" onclick="checkRadio(this.value)" value="Netscape">Netscape<br />
<input type="radio" name="browser" onclick="checkRadio(this.value)" value="Opera">Opera<br />
<br />
Your favorite browser is: <input type="text" id="answer" size="20">
</form>
<br>
-----------------------------------------------------------
<br>
<p>Enter some text in the text fields below, and then press the "Reset" button to reset the form.</p>
<form id="formReset">
Name: <input type="text" size="20"><br />
Age: <input type="text" size="20"><br />
<br />
<input type="button" onclick="formReset()" value="Reset">
</form>
</body>
</html>
<head>
<script type="text/javascript">
function changeAction()
{
var x=document.getElementById("myForm")
alert("Original action: " + x.action)
x.action="default.asp"
alert("New action: " + x.action)
}
function showMethod()
{
var x=document.getElementById("myForm")
alert(x.method)
}
function alertId()
{
var txt="Element id: " + document.getElementById("myButton").id
txt=txt + ", element type: " + document.getElementById("myButton").type
txt=txt + ", element value: " + document.getElementById("myButton").value
alert(txt)
document.getElementById("myButton").disabled=true
}
function check()
{
document.getElementById("myCheck").checked=true
}
function uncheck()
{
document.getElementById("myCheck").checked=false
}
function createOrder()
{
coffee=document.form2.coffee
txt=""
for (i=0;i<coffee.length;++ i)
{
if (coffee[i].checked)
{
txt=txt + coffee[i].value + " "
}
}
document.getElementById("order").value="You ordered a coffee with " + txt
}
function convertToUcase()
{
document.getElementById("fname").value=document.getElementById("fname").value.toUpperCase()
document.getElementById("lname").value=document.getElementById("lname").value.toUpperCase()
}
function checkRadio(browser)
{
document.getElementById("answer").value=browser
}
function formReset()
{
document.getElementById("formReset").reset()
}
</script>
</head>
<body>
<form id="myForm" action="js_examples.asp" method="post">
<br>
-----------------------------------------------------------
<br>
<input type="button" onclick="changeAction()" value="Change value of action attribute">
<br>
-----------------------------------------------------------
<br>
<input type="button" onclick="showMethod()" value="Show method">
<br>
-----------------------------------------------------------
<br>
<input type="button" value="Click me!" id="myButton" onClick="alertId()" />
<br>
-----------------------------------------------------------
<br>
<input type="checkbox" id="myCheck" />
<input type="button" onclick="check()" value="Check Checkbox" />
<input type="button" onclick="uncheck()" value="Uncheck Checkbox" />
</form>
<br>
-----------------------------------------------------------
<br>
<p>How would you like your coffee?</p>
<form name="form2">
<input type="checkbox" name="coffee" value="cream">With cream<br />
<input type="checkbox" name="coffee" value="sugar">With sugar<br />
<br />
<input type="button" onclick="createOrder()" value="Send order">
<br /><br />
<input type="text" id="order" size="50">
</form>
<br>
-----------------------------------------------------------
<br>
<form name="form1">
First name: <input type="text" id="fname" size="20" />
<br /><br />
Last name: <input type="text" id="lname" size="20" />
<br /><br />
Convert to upper case
<input type="checkBox" onclick="if (this.checked) {convertToUcase()}">
</form>
<br>
-----------------------------------------------------------
<br>
<p>What's your favorite browser:</p>
<form name = "Form2">
<input type="radio" name="browser" onclick="checkRadio(this.value)" value="Internet Explorer">Internet Explorer<br />
<input type="radio" name="browser" onclick="checkRadio(this.value)" value="Firefox">Firefox<br />
<input type="radio" name="browser" onclick="checkRadio(this.value)" value="Netscape">Netscape<br />
<input type="radio" name="browser" onclick="checkRadio(this.value)" value="Opera">Opera<br />
<br />
Your favorite browser is: <input type="text" id="answer" size="20">
</form>
<br>
-----------------------------------------------------------
<br>
<p>Enter some text in the text fields below, and then press the "Reset" button to reset the form.</p>
<form id="formReset">
Name: <input type="text" size="20"><br />
Age: <input type="text" size="20"><br />
<br />
<input type="button" onclick="formReset()" value="Reset">
</form>
</body>
</html>
