1. 程式人生 > >form標籤的onsubmitt屬性與onclick屬性

form標籤的onsubmitt屬性與onclick屬性


如何防止表單自動提交?

<form name="form1" onsubmit="return check()" method="post" action="search_result.php">

我先說下onsubmit="return check()"這個是幹什麼用的,首先是在form標籤中有一個onsubmit的屬性,他有兩個值分別是true和false,如果true,這個網頁就跳轉到action屬性的search_result.php頁面,否則不跳轉。所以用 return 返回一個true或false的值。

也就是 onsubmit的值可以決定action屬性是否觸發。

form表單另外一個事件—onclick

<form name="form1" onclick="return check();" method="post" action="search_result.php">

js方法:

function check(){

//判斷。。

return false:

}

onclick 和 onsubmit 的區別:


onSubmit 是表單上(也只能是表單)用的,提交表單前會觸發。 
onClick 是按鈕等控制元件上用的,用來觸發點選事件。

用作資料驗證的時候,可以選擇在 submit 按鈕上的 onclick 中驗證,可以在 onsubmit 中驗證。但是從事件觸發順序上來說,onclick更早。順序是:

使用者點選按鈕 -> onclick -> 如果onclick返回有效或未處理 onclick 則提交表單 -> onsubmit -> 如果 onsubmit 未處理或返回true,則提交,否則取消提交。

onsubmit 中返回 false 會引起取消表單提交,onclick 中返回 false 則會引起此次點選操作被判斷為無效,則也就不會引起表單提交。


為什麼要使用return函式?

表單1:<form name="form1" onsubmit="return check();" method="post" action="search_result.php">

表單2:<form name="form2" onsubmit="check()" method="post" action="search_result.php">

js方法:

function check(){

//判斷。。

return false:

}

———————————————————————-

上面兩個表單的check方法返回的是false,那麼那個表單可以阻止form表單action的自動提交呢?

事實上:只有表單1可以在Ie和火狐下,做到form表單自身的提交

表單2可以在IE下阻止form表單自動提交,但是在火狐下不能阻止from表單的自動提交。

原因:請看ECMAScript Language Binding,其中明確地寫著,event listener沒有返回值。其實一切的根本都因為IE不支援DOM Level 2,也就是IE和火狐的不相容,導致的check不能阻止表單提交。

我們可以這樣理解:check的返回值是false,那麼return check()==return false就是阻止預設事件(也就是onsubmit事件)。而如果只是check()=false也就是 ,而這個false只是在check裡面中斷對下面的js執行,而不是對這個表單的預設事件進行阻止。


return的作用

在大多數情況下,為事件處理函式返回false,可以防止預設的事件行為

Return True 就相當於執行符

相關推薦

form標籤onsubmitt屬性onclick屬性

如何防止表單自動提交? <form name="form1" onsubmit="return check()" method="post" action="search_result.php"> 我先說下onsubmit="return check()"這個

WPF 之 XAML語法,物件屬性賦值(簡單賦值、TypeConverter 標籤屬性物件屬性對映、標記擴充套件),引用外部庫

一、XAML樹形結構       框架都是樹形的,以<Window>物件為根節點,一層一層向下包含。這種樹形結構對於WPF整個體系都具有非常重要的意義,它不但影響著UI的佈局設計,還深刻的影響著WPF的屬性(Property)子系統和事件(Event)子

a標籤的href和onclick屬性同時存在點選事件先觸發

onclick的事件被先執行,其次是href中定義的(頁面跳轉或者javascript)同時存在兩個定義的時候(onclick與href都定義了),如果想阻止href的動作,在onclick必須加上return false; 一般是這樣寫onclick="xxx();retu

Struts2之form標籤的action及namespace屬性的組合使用

jsp頁面: <s:formname="login"method="post"action="login" namespace="/hello" > struts.xml檔案: <

Android ImageView的scaleType屬性adjustViewBounds屬性

side 縮小 png lan ref 分享 .com nbsp sid ImageView的scaleType的屬性有好幾種,分別是matrix(默認)、center、centerCrop、centerInside、fitCenter、fitEnd、fitStart、fi

mysql常用欄位屬性JavaBean屬性對應

varchar 不定長字串 字串或是沒有合適型別時,可以選擇它作為欄位型別 對應Java中的String int,bigint 數值 一般以int作為數字的預設選擇; 數值很大時使用bigint,對應Java中的Long char 定長字串 適用於鹽、md5加密後的密碼等情況 對

python :物件屬性屬性

#物件屬性與類屬性 物件屬性的優先順序高於類屬性 類屬性:通過類名呼叫 例子: class Person (object) : #類屬性 name = "Tom" #物件屬性 def __init__ (self,name) : self.name = name print(

WPF依賴屬性(續)(2)依賴屬性附加屬性的區別

原文: WPF依賴屬性(續)(2)依賴屬性與附加屬性的區別        接上篇,感謝各位的評論,都是認為依賴屬性的設計並不是為了節省記憶體,從大的方面而講是如此.樣式,資料繫結,動畫樣樣都離不開它.這篇我們來看下依賴屬性與附加屬性的區別. 註冊方法

Python 類屬性例項屬性,類物件例項物件

demo.py(類屬性,所有例項物件共用類屬性): # 定義類 繼承object是為了相容python2.x class Tool(object): # 使用賦值語句定義類屬性,記錄例項化工具物件的數量 count = 0 de

Android ImageView,ImageButton的scaleType屬性adjustViewBounds屬性

ImageView的scaleType的屬性有好幾種,分別是matrix(預設)、center、centerCrop、centerInside、fitCenter、fitEnd、fitStart、fitXYAndroid:scaleType="center" 保持原圖的大小,

java中類屬性物件屬性

1,定義    類屬性:又叫做靜態屬性,即被static修飾。    物件屬性:又叫例項屬性,非靜態屬性。    如果一個屬性宣告成類屬性,那麼所以的物件,都共享這麼一個值。    給所以英雄設定一個類屬性叫做“版權(copyright)”,那麼無論有多少具體的英雄,所以的英

iOS基礎:strong屬性weak屬性的區別

一、簡介 ARC是自iOS 5之後增加的新特性,完全消除了手動管理記憶體的煩瑣,編譯器會自動在適當的地方插入適當的retain、release、autorelease語句。你不再需要擔心記憶體管理,因為編譯器為你處理了一切 注意:ARC 是編譯器特性,而不是 iOS

struts-config.xml中 action 的attribute屬性name屬性

1、在一般情況下,actionForm是被儲存在一定的scope中(request或session,通過action的scope屬性來配置),當我們在配置時,指定name而不指定attribute,那麼指定的name值就作為actionForm儲存在scope中的key值,

html中元素的padding屬性margin屬性

padding padding-top padding-right padding-bottom padding-left margin margin-top margin-right margin-bottom margin-left padding: 上、右、下、左

4_C語言中的作用域、連結屬性儲存屬性

C 作用域 作用域是程式中定義的變數所存在的區域,超過該區域變數就不能被訪問。編譯器可以確認4種不同型別的作用域:檔案作用域,函式作用域,程式碼塊作用域,原型作用域。 程式碼塊作用域 位於一對花括號之間的語句稱為語句塊,任何在程式碼塊的開始位置宣告的識別符號都具有程

Python:類屬性,例項屬性,私有屬性與靜態方法,類方法,例項方法 屬性分為例項屬性與屬性 方法分為普通方法,類方法,靜態方法 一:屬性:   儘量把需要使用者傳入的屬性作為例項屬性,而

屬性分為例項屬性與類屬性 方法分為普通方法,類方法,靜態方法 一:屬性:   儘量把需要使用者傳入的屬性作為例項屬性,而把同類都一樣的屬性作為類屬性。例項屬性在每創造一個例項時都會初始化一遍,不同的例項的例項屬性可能不同,不同例項的類屬性都相同。從而減少記憶體。   1:例項屬性:     最

python中類屬性例項屬性總結

stackoverflow上面的相關討論 1. 類屬性     為在類定義時直接指定的屬性(不是在__init__方法中) class Test: class_attribute1="attr-value"2. 例項屬性     在__init_

Pyhon 中類屬性例項屬性的區別

根據網上的一些部落格和自己的理解,說一下自己的想法,某些地方加了一些自己的理解,某些地方直接摘抄他人的,具體可以直接看例子,如有不準確非常希望大家指正,如有表達不好請大家見諒。 情景一: # -*- coding: utf-8 -*- class A(o

從cellspacing和cellpadding看HTML屬性CSS屬性的使用

在html裡製作表格時,關於單元格間距,html有cellpadding,cellspacing兩個屬性,然而在實際操作中卻不推薦使用。最妥善的做法是用CSS裡的padding來設定。最新的html5裡已經徹底去掉了這些表現型的屬性,儘早放棄在html裡寫表現型屬性的習慣,

關於form表單中的input標籤屬性onclick的函式名相同問題

    function checkAll() {                var checkAllEle = document.getElementById("checkAll");                var eles = document.getElementsByName("check