formのsubmit方法とsubmit事件(onsubmit)
4861 ワード
formのsubmit方法とsubmit事件(onsubmit)
javascriptでformを呼び出す方法でsubmitが直接formを提出した場合、submitイベントは応答しません.なぜですか?本稿では、自動提出の実現方法を紹介します.
一、問題の説明
JSでformを呼び出す方法でsubmitがformを直接提出した場合、submitイベントは応答しません.なぜですか?知っているものは返事してください.類比してみます.私はinput.selectでテストをしましたが、selectの事件に対応できます.この原因はひとまず置いておきます.今の問題をどうやって解決したらいいですか?
イベントに応答しないコードの例:
submit方法でフォームを提出するのはUnibtrustive Javascriptの原則に反するが、検索ヒントを使うなどしてItemを選択した後、JSで検索フォームを提出しなければならない場合があります.
二、問題分析
イベントに応答しない以上、手動でイベントをトリガするだけです.手動トリガを決定する前にイベントの登録方法を振り返ってみます.
「オリジナル」の登録方法は二つあります.コードの例を見てください.
コードの例を見ます
しかし、今では「先進的」なDOM 2標準登録方式やIEの登録方式は、atachEventでよく使われています.これらの登録方式は、onsubmitメソッドは存在しません.form.onsubmit()を使うと、直接にエラーが発生します.
三、解決策
もちろん、「先進的」な登録方式自体も手動トリガイベントの解決策を提供しています.ただ、DOM 2規格とIEに対して異なるプログラムを書くだけです.また、このプログラムは、「オリジナル」の登録方式に対しても同様に有効です.コード例を見てください.
ここではもう各細部の方法について説明しません.不慣れな友達は自分で関連資料を調べてください.コードを全部つなげます.
このデモはIE 6/IE 7/FXでテストに合格しました.
表を提出する時、普通は提出ボタンコードは以下の通りです
javascriptでformを呼び出す方法でsubmitが直接formを提出した場合、submitイベントは応答しません.なぜですか?本稿では、自動提出の実現方法を紹介します.
一、問題の説明
JSでformを呼び出す方法でsubmitがformを直接提出した場合、submitイベントは応答しません.なぜですか?知っているものは返事してください.類比してみます.私はinput.selectでテストをしましたが、selectの事件に対応できます.この原因はひとまず置いておきます.今の問題をどうやって解決したらいいですか?
イベントに応答しないコードの例:
<form id="form1" action="http://www.koubei.com"></form><script type="text/javascript">
var form = document.getElementById('form1');
form.onsubmit = function() {
alert(1);
};
form.submit();
</script>submit方法でフォームを提出するのはUnibtrustive Javascriptの原則に反するが、検索ヒントを使うなどしてItemを選択した後、JSで検索フォームを提出しなければならない場合があります.
二、問題分析
イベントに応答しない以上、手動でイベントをトリガするだけです.手動トリガを決定する前にイベントの登録方法を振り返ってみます.
「オリジナル」の登録方法は二つあります.コードの例を見てください.
<form id="form1" action="http://www.koubei.com" onsubmit="alert(1)"></form>
<form id="form1" action="http://www.koubei.com"></form><script type="text/javascript">
document.getElementById('form1').onsubmit = function() {
alert(1);
}
</script>コードの例を見ます
<script type="text/javascript">
form.onsubmit();
</script>しかし、今では「先進的」なDOM 2標準登録方式やIEの登録方式は、atachEventでよく使われています.これらの登録方式は、onsubmitメソッドは存在しません.form.onsubmit()を使うと、直接にエラーが発生します.
三、解決策
もちろん、「先進的」な登録方式自体も手動トリガイベントの解決策を提供しています.ただ、DOM 2規格とIEに対して異なるプログラムを書くだけです.また、このプログラムは、「オリジナル」の登録方式に対しても同様に有効です.コード例を見てください.
<script type="text/javascript">
//IE fire event
if (form.fireEvent) {
form.fireEvent('onsubmit');
form.submit();
//DOM2 fire event
} else if (document.createEvent) {
var ev = document.createEvent('HTMLEvents');
ev.initEvent('submit', false, true);
form.dispatchEvent(ev);
}
</script>
ここではもう各細部の方法について説明しません.不慣れな友達は自分で関連資料を調べてください.コードを全部つなげます.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>submit</title>
<script type="text/javascript" src="http://k.kbcdn.com/js/yui/build/utilities/utilities.js"></script>
</head>
<body>
<form id="form1" action="http://www.koubei.com"></form>
<script type="text/javascript">
var form = document.getElementById('form1');
//YUI register event
YAHOO.util.Event.on('form1', 'submit', function() {
alert('yui');
});
//DOM0 register event
form.onsubmit = function() {
alert(1);
};
//DOM2 register event
if (form.addEventListener) {
form.addEventListener('submit', function() {
alert(2);
}, false);
//IE register event
} else if (form.attachEvent) {
form.attachEvent('onsubmit', function() {
alert(2);
});
}
//IE fire event
if (form.fireEvent) {
form.fireEvent('onsubmit');
form.submit();
//DOM2 fire event
} else if (document.createEvent) {
var ev = document.createEvent('HTMLEvents');
ev.initEvent('submit', false, true);
form.dispatchEvent(ev);
}
</script>
</body>
</html>このデモはIE 6/IE 7/FXでテストに合格しました.
表を提出する時、普通は提出ボタンコードは以下の通りです
<form id="form1" name="form1" method="post" action="aa.asp">
<label>
<input type="text" name="textfield" id="textfield" />
</label>
<a href="javascript:form1.submit();"> </a>
</form>