JavaScript Tutorial/Form/submit button
Содержание
Return false in form button click event
<html>
<head>
<title>A Simple Page</title>
<script language="JavaScript">
<!--
function chkForm()
{
if (form1.inp1.value == "")
{
alert("Please fill in the text box");
form1.inp1.focus();
return false;
}
}
// -->
</script>
</head>
<body>
<form name="form1" method="POST" action="">
<P><input type="text" name="inp1">
<input type="submit" value="Submit" onClick="return chkForm()">
<input type="reset" value="Reset"></p>
</form>
</body>
</html>
Submit
Instances are created by the browser when it encounters an HTML <input> tag with the TYPE attribute set to SUBMIT.
In the JavaScript object hierarchy, the Submit object is located at window.document.Form.Submit.
Event Handlers/Methods/Properties Description onBlur Called when the submit button loses focus. onClick Called when the submit button is clicked. onFocus Called when the submit button receives the focus. blur() Removes focus from the submit button. click() Simulates a mouse click on the submit button. focus() Gives the focus to the submit button. handleEvent() Invokes the handler for the event specified and was added in JavaScript 1.2. form Returns the entire form the submit button is in. name Returns the name of the submit button specified by the NAME attribute. type Returns the type of this submit button specified by the TYPE attribute. This property always returns submit. value Returns the value of this submit button specified by the VALUE attribute.
<html>
<head>
<script language="JavaScript">
<!--
function openWin(){
var myInstance = document.myForm.mySubmit;
var myWin = open("", "","width=450,height=200");
myWin.document.write("The name is: " + myInstance.name + "<br>");
myWin.document.write("The type is: " + myInstance.type + "<br>");
myWin.document.write(myInstance.form.mySubmit.value);
myWin.document.close();
}
-->
</script>
</head>
<body>
<form name="myForm">
<input type=TEXT value="Hello, World!" name="myText">
<input type=SUBMIT value="Click to Submit" name="mySubmit"
onClick="openWin()">
</form>
</body>
</html>
Submit.blur()
The blur() method removes the focus from the submit button.
<html>
<head>
<script language="JavaScript">
<!--
function removeFocus(){
document.myForm.mySubmit.blur();
}
-->
</script>
</head>
<body>
<form name="myForm">
<input type=TEXT value="Hello, World!" name="myText">
<input type=SUBMIT value="Click to Remove Focus" name="mySubmit" onClick="removeFocus()">
</form>
</body>
</html>
Submit.click()
The click() method simulates a click on the submit button. Note that if you have an onClick event handler assigned to this button, it will not be executed.
<html>
<head>
<script language="JavaScript">
<!--
function submitForm(){
if(document.myForm.myText.value == ""){
alert("Please enter some text first");
}else{
document.myForm.mySubmit.click();
}
}
-->
</script>
</head>
<body>
<form name="myForm">
Please Enter some text and click the link.<br>
<input type=TEXT value="" name="myText">
<input type=SUBMIT value="Submit" name="mySubmit">
</form>
<br>
<a href="javascript:submitForm()">Click here to submit the form</a>
</body>
</html>
Submit.focus()
The focus() method places focus on the Submit button.
<html>
<head>
<script language="JavaScript">
<!--
function setFocus(){
document.myForm.mySubmit.focus();
}
-->
</script>
</head>
<body>
<form name="myForm">
<input type=TEXT value="Hello, World!" name="myText" onFocus="setFocus()">
<input type=SUBMIT value="Submit" name="mySubmit">
</form>
</body>
</html>
Submit.form
The form property provides access to all the data of the form in which the submit button is located.
<html>
<head>
<script language="JavaScript">
<!--
function openWin(){
var formData = document.myForm.mySubmit.form;
var myWin = open("", "","width=450,height=200");
myWin.document.write("The name of the form is: " + formData.name + "<br>");
myWin.document.write(formData.myText.value + "<br>");
myWin.document.write(formData.elements[1].name + "<br>");
myWin.document.close();
}
-->
</script>
</head>
<body>
<form name="myForm">
<input type=TEXT value="Hello, World!" name="myText">
<input type=BUTTON value="Click to Process" name="mySubmit" onClick="openWin()">
</form>
</body>
</html>
Submit.handleEvent()
Syntax
submit.handleEvent(event)
Submit.name
The name property returns the name of the submit button.
This property is often accessed via the elements array of a Form object and used to return the name of the button.
<html>
<head>
<script language="JavaScript">
<!--
function getName(){
alert("The name of this submit button is " + document.myForm.elements[1].name);
}
-->
</script>
</head>
<body>
<form name="myForm">
<input type=TEXT value="First Box" name="myText">
<input type=SUBMIT value="Submit" name="mySubmit" onClick="getName()">
</form>
</body>
</html>
Submit.onBlur
The onBlur event handler is fired when the focus is moved away from that particular submit button.
<html>
<head>
<script language="JavaScript">
<!--
var counter = 0;
function comeBack(){
document.myForm.mySubmit.focus();
document.myForm.counter.value = counter++;
}
-->
</script>
</head>
<body onLoad="comeBack()">
<form name="myForm">
<input type=TEXT value="Text Box" name="myText">
<input type=SUBMIT value="Submit" name="mySubmit" onBlur="comeBack()"><br>
<input type=TEXT size=2 value="" name="counter">
</form>
</body>
</html>
Submit.onClick
The onClick event handler is fired when a submit button is clicked.
<html>
<head>
<script language="JavaScript">
<!--
function setText(){
document.myForm.myText.value = document.myForm.myText.value.toUpperCase();
}
-->
</script>
</head>
<body>
<form name="myForm">
Please Enter some text and click the Submit Button.<br>
<input type=TEXT value="Enter Text Here" name="myText">
<input type=BUTTON value="Submit" name="mySubmit" onClick="setText()">
</form>
</body>
</html>
Submit.onFocus
The onFocus event handler is fired when focus is set to that particular submit button.
<html>
<head>
<script language="JavaScript">
<!--
var counter = 0;
function sendAway(){
document.myForm.myText.focus();
document.myForm.counter.value = counter++;
}
-->
</script>
</head>
<body onLoad="sendAway()">
<form name="myForm">
<input type=TEXT value="First Box" name="myText">
<input type=SUBMIT value="Submit" name="mySubmit" onFocus="sendAway()"><br>
<input type=TEXT size=2 value="" name="counter">
</form>
</body>
</html>
Submit.type
The type property returns the type of the text box.
This always returns submit.
<html>
<head>
<script language="JavaScript1.1">
<!--
function getType(){
alert("The name of this submit button is " + document.myForm.elements[1].type);
}
-->
</script>
</head>
<body>
<form name="myForm">
<input type=TEXT value="First Box" name="myText">
<input type=SUBMIT value="Submit" name="mySubmit" onClick="getType()">
</form>
</body>
</html>
Submit.value
The value property returns the current value of the submit button. This value is what is displayed on the button itself.
<html>
<head>
<script language="JavaScript1.1">
<!--
function getValue(){
alert("The value of this submit button is " + document.myForm.elements[1].value);
}
-->
</script>
</head>
<body>
<form name="myForm">
<input type=TEXT value="First Box" name="myText">
<input type=SUBMIT value="Submit" name="mySubmit" onClick="getValue()">
</form>
</body>
</html>
Using Image as the submit button
<html>
<head>
<title>Submit Example</title>
</head>
<body>
<form id="form1" method="post" action="javascript:alert("Submitted")">
<!-- regular textbox -->
<label for="txtName">Name:</label><br />
<input type="text" id="txtName" name="txtName" /><br />
<!-- submit button -->
<input type="image" src="http://www.wbex.ru/style/logo.png" />
</form>
</body>
</html>