• 締切済み

単一のフォームオブジェクトを外部ファイル(.js)に送る意味?

とある2つの別ファイル(A.jspとB.jsp)でそれぞれ単一のフォームを使用しています。 そこで各フォームの処理で共通部分を別の外部ファイル(.js)にまとめる場合、例えば。。。フォームの名前を取得してその名前をalertで表示する。。。みたいな処理を外部ファイルに作成します。 A.jsp:<form method='post' name='frmA' onsubmit='return getFrmName(this)'> B.jsp:<form method='post' name='frmB' onsubmit='return getFrmName(this)'> 外部ファイル:共通関数 getFrmName(frm){ alert(frm.name); } ボタンが押されたらalertで表示する。通常なら、”frmA”とか”frmB”って出ます。 ここで、以下のように変更する。 A.jsp:<form method='post' name='frmA' onsubmit='return getFrmName()'> B.jsp:<form method='post' name='frmB' onsubmit='return getFrmName()'> 外部ファイル:共通関数 getFrmName(){ alert(document.forms[0].name); } と、引数のフォームオブジェクトを消して”document.forms[0]”に書き換えた場合でも正常に稼動されます。 その場合、引数なしでも十分なのでは? というか、引数なしの方がより見やすいプログラムになるのでは? また、そのファイルにあるフォーム数を数えるような処理を最初に追加すれば、”document.forms[Index]”:Index(カウントしたフォーム数)にして多重フォームにも対応できるように汎用できそう・・・? 長くなりましたが、上記のタイトルにある通り、フォームオブジェクトを引数とする意味は?できればメリット、デメリット両方があればうれしいです。よろしくお願いします。 <だいたい適当に書いたので多少の省略等はしてますが、ご了承ください>

みんなの回答

noname#199778
noname#199778
回答No.1

素人考えですが、引数でオブジェクトを引き渡した方が、スクリプトの汎用性や総合的なメンテナンス性があがるのではないでしょうか。 もしCGIが吐き出すHTMLなど状況によって内容の変化があるHTMLソースがその外部jsファイルを呼び出す場合に、引数を渡す形を取らず、「document.forms[0].name」の形式でスクリプトを記述すると、仮に本来ターゲットになっているフォーム要素の前に別のフォーム要素が紛れ込んでしまったら、狙い通りの動作にならない可能性があります。 こういった可能性が残るとしたら、こういうdocument.forms[0]でのフォームの特定は汎用性がなく使えないと思います。(そのようなエラーが絶対におきないという保証があるのであれば、問題は起きないかもしれませんが) また、ソース自体が、引数としてオブジェクトを渡すことで全体的に把握しやすくなるのではないでしょうか。 引数なしの方がより見やすいプログラムになるというのは、私の感覚からは逆に思えます。 関数に何を渡しているかがHTMLソース側で明示されるので、このHTMLソースを見たときに何をどうしているかが少し見通しやすくなる、あるいは少なくとも処理の内容を把握する手がかりの一つにはなると思いますよ。 引数もなく、ただ関数だけを呼び出しているとしたら、その関数の動きはHTMLソース側からはブラックボックスになり、外部jsファイルとHTMLソースを両方参照しながら内容を把握する必要に迫られるかもしれません。 関数の処理に何かを渡しているとしたら、スクリプトの動作に関係するであろう内容を一つ特定できますよね。 こういった面で、全体的にソースを把握しやすくなると思います。 素人考えですが、参考になれば…

taukun
質問者

お礼

返事が遅くなりました。 >そのようなエラーが絶対におきないという保証があるのであれば、問題は起きないかもしれませんが フォーム要素をきっちり把握・管理できていれば問題ないレベルのような気もしますが。。。 >引数としてオブジェクトを渡すことで全体的に把握しやすくなるのではないでしょうか。 >少なくとも処理の内容を把握する手がかりの一つにはなると思いますよ。 >引数もなく、ただ関数だけを呼び出しているとしたら、その関数の動きはHTMLソース側からはブラックボックスになり、 >外部jsファイルとHTMLソースを両方参照しながら内容を把握する必要に迫られるかもしれません。 それは一理あるんですよね。ただ、そこにコメントをきっちり書いておけば回避できる問題でもある訳ですし。。。 >関数の処理に何かを渡しているとしたら、スクリプトの動作に関係するであろう内容を一つ特定できますよね。 確かに。まあ、引数が多い少ないは余りプログラム的には関係ないですが。。。あるとないとでは多少は違いますしね。でも上でも書きましたがコメントでフォローできるレベルですよね。 回答ありがとうございました。

関連するQ&A

  • Javascriptを勉強中でメールフォームを作っているのですが、

    Javascriptを勉強中でメールフォームを作っているのですが、 function check(){ if(document.form1.namae.value==""){ alert("お名前を入力してください。"); return false; } else{ return true; } } で名前が空白の時送信ボタンを押した時に警告メッセージが出るようにしようと思っています。 ボタンには以下のように書いています。 <form name="form1" action="mailto:mail@address" method="post" enctype="text/plain" onsubmit="check()"> そうすると警告は出ますが、処理を続行してメールも送れてしまいます。 教科書を見ると <form name="form1" action="mailto:mail@address" method="post" enctype="text/plain" onsubmit="return check()"> となっているのでそうすると問題ないのですが、なぜreturnを入れないといけないのかよくわかりません。 check()の中ですでにfalseかtrueの値が出ているのでreturnが要らないと思ったのですが・・ 初心者なのでよくわかっていません。 お願いいたします。

  • javascript フォームについて

    javascriptでフォームを作ったのですが、複数フォームの空白をチェックするにはどのようなプログラムにすればよろしいでしょうか? onsubmit="return chk1(this)でフォーム送信が押されたときにチェックを行おうと考えているのですが そのときのchk()の中身やif文の条件がわからないのです。 どのようにすれば上手くいくでしょうか? 回答よろしくお願いします。 ソースは以下のとおりです。 <script language="javascript"> function send() { document.nform.submit(); document.nform2.submit(); document.nform3.submit(); } function chk1(frm){ if(frm.elements["txt1"].value==""){ alert("解答欄に空白があります"); /* FALSEを返してフォームは送信しない */ return false; }else{ /* TRUEを返してフォーム送信 */ return true; } } </script> <form name="nform" method="POST" action="mailto:webmaster@a.com?subject=問い合せ" enctype="text/plain"> <p>問1</p> <p> (1)<input type="text" name="kaitouran11" size="20"> (2)<input type="text" name="kaitouran12" size="20"> (3)<input type="text" name="kaitouran13" size="20"> (4)<input type="text" name="kaitouran14" size="20"> </p> </form> <form name="nform2" method="POST" action="mailto:webmaster@leposystems.com?subject=問い合せ" enctype="text/plain"> <p>問2</p> <p> (1)<input type="text" name="kaitouran21" size="20"> (2)<input type="text" name="kaitouran22" size="20"> (3)<input type="text" name="kaitouran23" size="20"> (4)<input type="text" name="kaitouran24" size="20"> </p> </form> <form name="nform3" method="POST" action="mailto:webmaster@leposystems.com?subject=問い合せ" enctype="text/plain"> <p>問3</p> <p> (1)<input type="text" name="kaitouran31" size="20"> (2)<input type="text" name="kaitouran32" size="20"> (3)<input type="text" name="kaitouran33" size="20"> (4)<input type="text" name="kaitouran34" size="20"> </p> </form> <input type="button" value="送信" onClick="send()" onsubmit="return chk1(this)">

  • フォームの送信ボタンが押されたときの処理について

    (1).phpファイルにおいて、下記のようなフォームを作成したときに、 JavaScriptの、onSubmitイベントで、PHPの$pushsubumit 変数に 1を代入したいのですが、echo()した結果、代入されていません。 やはり、JavaScriptの文のなかでPHPスクリプトは通用しないのでしょうか? どのようにすれば、送信ボタンを押したという、PHPの$pushsubmitフラグを 1にできるのでしょうか。 (2)ちなみに、JavaScriptのテキストでは、return 1; という表現を用いていますが、 この戻り値はどこでどうやって受けるのでしょうか。 (3)例えば、onSubmit="var pushsubmit; pushsubmit=1;"などと書いたとして、 このpushsubmit=1をPHPスクリプト側でどうやって受ければいいのかがわかりません。 どうぞよろしくお願いします。 --------------------------------------------------------------------------- (1)<form name="form1" method="post" action="bbs.php" onSubmit="showdlgbox(); <?php $pushsubmit=1 ?>"> <?php ~ ?> (2)<form name="form1" method="post" action="bbs.php" onSubmit="showdlgbox(); return 1;">

    • ベストアンサー
    • PHP
  • お問い合わせフォームの送信後クリア

    はじめてお問い合わせフォームを作りました。、 送信後、その入力内容をクリアしたいのですが、 どなたか教えていただけませんでしょうか? 現在、下記のような感じで、チェック後送信としています。 function check(){ var flag = 0; if(!document.form1.mail.value.match(/.+@.+\..+/)){ flag = 1; } if(flag){ window.alert('メールアドレスが正しくありません'); return false; // 送信を中止 } else{ return true; // 送信を実行 } } <FORM name="form1" method="post" action="id?Subject=Page_enquete" onSubmit="return check()">

    • ベストアンサー
    • CSS
  • documentオブジェクトのlengthが取れない

    以下のプログラムでobjのlengthが「undefined」となる原因がわからない <script language="JavaScript"><!-- function Check() {alert("スタート"); var obj = document.frm.elements['check']; var i,j =0;alert("length="+ obj.length); for (i = 0; i < obj.length ; i++ ) { if ( obj[i].checked == true ) {j++;} } alert( 'チェックボックスの数='+ i); alert( 'チェックした数='+ j); } //--></script> <form name="frm" method="POST"><input type="checkbox" name="check" value="1"></form> <a href="javascript:Check();">チェック</a> formの中を以下のように変更すると正しく表示される <form name="frm" method="POST"><input type="checkbox" name="check" value="1"><input type="checkbox" name="check" value="2"></form> どなたか、ご教授くださいませ。

  • onSubmitで2つの関数を実行したい

    下記のような送信フォームでformCheck()と同時にもう一つ関数を実行させることは可能ですか。その場合にはどのように書けばよろしいでしょうか。 <FORM NAME="myform" ACTION="next.html" METHOD="post" onSubmit="return formCheck()"> これを <FORM NAME="myform" ACTION="next.html" METHOD="post" onSubmit="★ここで2つできる?★">

  • フォームのname値を配列にしてJavaScriptでフォームのチェックをする方法

    JavaScriptでフォームの半角数字のチェックをしたいのですが、 form内容をCGI(PHP)に渡すためname値を配列にしないといけないのですが、 以下のスクリプトだとエラーが出てしまいます。 *実際はif(isNaN~)と<input~>をループで書き出しており、行数が不特定なので それぞれ別のname値を使うことができない状態です。 <script language="JavaScript"> function check() { if(isNaN(document.form1.hoge[0].value)){ alert("値は半角数字で入力してください。"); return(false); } if(isNaN(document.form1.hoge[1].value)){ alert("値は半角数字で入力してください。"); return(false); } return(true); } </script> <form method="post" action="xxx.cgi" onSubmit="return check()" name="form1"> <input type="text" name="hoge[0]"> <input type="text" name="hoge[1]"> </form> 特にCGIに渡す必要がなければ <input type="text" name="hoge"> <input type="text" name="hoge"> としてやればチェックができるのですが、どうしても次の 処理があるためname値を配列にする必要があります。 解決方法がわかる方がおられましたらご教授ください。 以上よろしくお願いいたします。

  • 外部ファイルを読み込めない

    初めまして。いつも質問やその回答を読ませていただいて、参考にさせていただいてます。 javascriptで作った超簡単なプログラムが動かないんです。 どなたか、助けてください。(>_<) 以下、test.htmlとtest.jsを作って、試して見ているのですが、動かない理由が分からず苦しんでいます。 =============test.html============= <html> <head> <script type="text/javascript" language="javascript" src="./test.js" ></script> </head> <body> <table> <form name="form2" method="post" onSubmit="return check()"> <tr><td><input type="text" name="names" size="50"></td></tr> <tr><td><input type="submit" name="submit" value="予約"></td></tr> </form> </table> </body> </html> =============test.html============= =============test.js============= function check(){ names=document.form2.names; if(names.value == ""){ alert("お名前を入力してください。"); names.focus(); return false; } else return true; } =============test.js============= どちらも、同じディレクトリに入れています。safari、ieでも×です。 どなたか、教えていただけませんでしょうか。

  • VBSのIEオブジェクトでフォームデータ送信する

    ■質問 通常IEオブジェクトを使ってフォームにセットされたデータを サブミットするには、 IE.Document.forms("").elements("").value = "" IE.Document.forms("").submit() と行うと思うのですが。 例えば下記のようなフォームを送信する際、 フォームのある"http://test.com/login_form" ページにわざわざ移動せず 直接"http://test.com/action"の "hidden"のエリアに対してデータを送信 する方法を教えて頂けませんでしょうか? また、Form1に複数のエレメントが存在する場合 全てのエレメントの値を送らないと正しく処理 できないでしょうか? ■"http://test.com/login_form" のHTML <form name="Form1" method="post" action="/action"> <input type="hidden" name="ID" value="1234"> <input type="submit"> </form>

  • Null またはオブジェクトではありませんのエラー

    HTML部で <FORM NAME="frm1" METHOD="post" ACTION="xxx.html">  <INPUT TYPE="hidden" NAME="txt1"> </FORM> javascriptで document.frm1.txt1.value = "hoge"; document.frm1.submit(); のように記述しています。 FireFoxブラウザでは期待通りの動きをするのですが、 IE6では「document.frm1.txt1はNullまたはオブジェクトではありません」 とエラーが出てしまい、画面遷移しません。 因みにページはフレームを利用しており、 フォームや画面遷移はメインフレームでしか使っていないので、 フレーム名も特につけておりませんし、 targetの記述も使用しておりません。 そこらへんに原因があるのでしょうか。 それにしてもFireFoxでは可、IEではエラー というのも解せないです。 どなたか分かる方いらっしゃいましたら ご教示願います。