JavaScript Tutorial/Form/submit button

Материал из Web эксперт
Перейти к: навигация, поиск

Return false in form button click event

   <source lang="javascript">

<html> <head> <title>A Simple Page</title> <script language="JavaScript">

</script> </head> <body> <form name="form1" method="POST" action="">

<input type="text" name="inp1"> <input type="submit" value="Submit" onClick="return chkForm()"> <input type="reset" value="Reset">

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


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.



   <source lang="javascript">

<html>

   <head>
   <script language="JavaScript">
   
   </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></source>
   
  

Submit.blur()

The blur() method removes the focus from the submit button.



   <source lang="javascript">

<html>

   <head>
   <script language="JavaScript">
   
   </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></source>
   
  

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.



   <source lang="javascript">

<html>

   <head>
   <script language="JavaScript">
   
   </script>
   </head>
   <body>
   <form name="myForm">
   Please Enter some text and click the link.
<input type=TEXT value="" name="myText"> <input type=SUBMIT value="Submit" name="mySubmit"> </form>
<a href="javascript:submitForm()">Click here to submit the form</a> </body> </html></source>

Submit.focus()

The focus() method places focus on the Submit button.



   <source lang="javascript">

<html>

   <head>
   <script language="JavaScript">
   
   </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></source>
   
  

Submit.form

The form property provides access to all the data of the form in which the submit button is located.



   <source lang="javascript">

<html>

   <head>
   <script language="JavaScript">
   
   </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></source>
   
  

Submit.handleEvent()

Syntax



   <source lang="javascript">

submit.handleEvent(event)</source>


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.



   <source lang="javascript">

<html>

   <head>
   <script language="JavaScript">
   
   </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></source>
   
  

Submit.onBlur

The onBlur event handler is fired when the focus is moved away from that particular submit button.



   <source lang="javascript">

<html>

   <head>
   <script language="JavaScript">
   
   </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()">
<input type=TEXT size=2 value="" name="counter"> </form> </body> </html></source>

Submit.onClick

The onClick event handler is fired when a submit button is clicked.



   <source lang="javascript">

<html>

   <head>
   <script language="JavaScript">
   
   </script>
   </head>
   <body>
   <form name="myForm">
   Please Enter some text and click the Submit Button.
<input type=TEXT value="Enter Text Here" name="myText"> <input type=BUTTON value="Submit" name="mySubmit" onClick="setText()"> </form> </body> </html></source>

Submit.onFocus

The onFocus event handler is fired when focus is set to that particular submit button.



   <source lang="javascript">

<html>

   <head>
   <script language="JavaScript">
   
   </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()">
<input type=TEXT size=2 value="" name="counter"> </form> </body> </html></source>

Submit.type

The type property returns the type of the text box.

This always returns submit.



   <source lang="javascript">

<html>

   <head>
   <script language="JavaScript1.1">
   
   </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></source>
   
  

Submit.value

The value property returns the current value of the submit button. This value is what is displayed on the button itself.



   <source lang="javascript">

<html>

   <head>
   <script language="JavaScript1.1">
   
   </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></source>
   
  

Using Image as the submit button

   <source lang="javascript">

<html>

   <head>
       <title>Submit Example</title>
   </head>
   <body>
       <form id="form1" method="post" action="javascript:alert("Submitted")">
           
           <label for="txtName">Name:</label>
<input type="text" id="txtName" name="txtName" />
<input type="image" src="http://www.wbex.ru/style/logo.png" /> </form> </body>

</html></source>