ホームページ > 記事 > ウェブフロントエンド > Javascript で複数のフォーム間のデータ転送を実装するにはどうすればよいですか?
Javascript で複数のフォーム間のデータ転送を実装するにはどうすればよいですか?
- 伊谢尔伦オリジナル
- 2017-07-18 15:13:241602ブラウズ
まず、最も簡単なのは、同じ Web ページ内のフォームからデータを転送することです。
たとえば、Web ページ上に 2 つのフォームがあり、それぞれにテキスト ボックスとボタンがあります。ボタンをクリックしてお互いのテキストボックスの値を操作します。私たちが挙げた例は、あるテキスト ボックスを別のテキスト ボックスに支払うことです。具体的な HTML コードは次のとおりです:
<html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <body> <form name="form1" method="post" action=""> <input type="text" name="textfield"> <input type="button" name="Submit" value="1--------->2" onClick="ok()"> </form> <form name="form2" method="post" action=""> <input type="text" name="textfield2"> <input type="button" name="Submit" value="2----->1" onClick="ok1()"> </form> </body> </html>
上記は HTMl コードです。onclik コードが 2 つあることに気づいたかもしれません。次は JAVASCRIPT コードです:
<script language="JavaScript">
function ok()
{
document.form2.textfield2.value=document.form1.textfield.value;
}
function ok1()
{
document.form1.textfield.value=document.form2.textfield2.value;
}
</script>2 つ目は 2 つのウィンドウの間にあります。フォーム内のテキスト ボックス間でデータを転送します。実際、これは元のベースに基づいて拡張できます。ポップアップウィンドウの作成方法とフォーム内のフォームのコードについてはここでは詳しく説明しません。次に、親ウィンドウのフォームでテキストボックスのデータを操作する方法について説明します。具体的なコードは次のとおりです。
<script language="JavaScript">
function ok()
{
opener.document.form2.textfield2.value=document.form1.textfield.value
}
</script> 3 つ目は、フレーム Web ページ間のフォームのテキスト ボックス間でデータを転送することです。
注目すべきは、フレームの記述方法です。実装コードは次のとおりです:
<frameset cols="505,505"> <frame src="test.htm" name="leftr" id="leftr">//定义框架的名称 <frame src="test2.htm" id="right" name="right"> </frameset> <noframes><body> </body></noframes>
これら 3 つのウィンドウ間でテキスト ボックスの値を相互運用するための簡単なメソッドが実装されています。もう 1 つ注意が必要なのは、それらの間の関係です。
以上がJavascript で複数のフォーム間のデータ転送を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。