FirefoxでJavaScriptのsubmitが機能しない問題の解決方法とは?

このQ&Aのポイント
  • JavaScriptでsubmitする際に、Firefoxで反応がない問題が発生しています。IEでは正常に動作しているため、Firefoxでの対策方法を知りたいです。
  • 質問のコードを確認しましたが、実際には空白のチェックロジックが含まれているため、省略された部分にバグの原因がある可能性があります。
  • フォームのsubmitボタンにonClickイベントを追加し、JavaScriptのcheck1関数を呼び出すことで、Firefoxでも正常に動作するようになります。
回答を見る
  • ベストアンサー

Firefox:JavaScriptのsubmit

JavaScriptで、以下のようにsubmitしていますが、 IEではOKで、Firefoxでは「送信開始」ボタンで反応がありません。 Firefoxではどのように書けばよいのでしょうか? 以下は、テストのため省略できるギリギリまで省略していますので、意味のないスクリプトになってますが、実際にはJavaScriptで空白個所のチェックのロジックを入れています。 <html> <head> <script language="JavaScript"> <!-- function check1(){ document.FORM1.submit(); } ---> </script> </head> <form action='http://hogehoge.jp' method='post' name="FORM1"> <input type='button' value='送信開始' onClick="check1()"> </form> </body> </html>

  • ps5550
  • お礼率65% (129/196)

質問者が選んだベストアンサー

  • ベストアンサー
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

考え方は3つ (1)単純にやるならsubmitをつかい、onsubmitでバリデートする。 <script> function check1(obj){ return true; } </script> <form method='post' onSubmit="return check1(this)" > <input type="text" name="hoge" value="fuga" /> <input type="button" value="send"/> </form> (2)普通にオブジェクトをわたしてやる <script> function check1(obj){ obj.form.submit(); } </script> <form method='post'> <input type="text" name="hoge" value="fuga" /> <input type="button" value="send" onClick="return check1(this)" /> </form> (3)idでformを拾う <script> function check1(){ document.getElementById("FORM1").submit(); } </script> <form method='post' id='FORM1'> <div> <input type="text" name="hoge" value="fuga" /> <input type="button" value="send" onClick="return check1()" /> </div> </form>

ps5550
質問者

お礼

回答ありがとうございます。 結論から書くと、 原因は、<script></script>で囲んだ中にある ---> を、-をひとつ消して --> にするとFirefoxでも動作しました。 お教えいただいたスクリプトをそのままコピペすると動作するのに、必要個所だけ自分で書くと、何故かFirebugでSyntax Errorになります。 1行ずつ置き換えていって、やっと原因が分かりました。

関連するQ&A

  • javascript内からのsubmit

    PHP初心者です。 javascript内でsubmitを行い、値をPHP内で受け取る想定ですが、うまく作動しません。 具体的には下記のソースで、// Aの処理に入ってきて欲しいのですが、//B に入ってきます。 初歩的なことのなのかもしれませんが、どこが間違っているのか分からずはまっています。 ご教授ください。 ソースは以下です。 ■JavaScriptとForm(admLogin.html) <script type="text/javascript" src="js/jquery-1.9.0.min.js"></script> <script type="text/javascript"> function fncLogin(){ $("#frmAdmLogin").submit(); } </script> <body> <form id="frmAdmLogin" action="admLogin.php" method="post"> <input type="text" id="txtAdmId" /> <input type="text" id="txtAdmPass" /> <input type="button" name="btnLogin" value="ログイン" onclick="fncLogin()"/> </form> </body> ■PHP(admLogin.php) <?php if(isset($_POST['btnLogin'])) { // A }else{ // B } ?> ログインボタン押下 ↓ fncLogin内からフォームをsubmit ↓ // A の処理に入ってくる想定なのですが、//B の処理が実行される。 ちなみに、ボタンのinput typeをsubmitにすれば//A の処理に入ってくるのですが、 javascript内からsubmitしたいため、困っています。 どこを間違えているのでしょうか。。

    • 締切済み
    • PHP
  • submitではなくbuttonで送信

    事情があり、submitではなくbuttonでフォームのデータを送信したいのですが、以下のように書くとbuttonでは4567が送信されません。 <form action="test.cgi" method="post"> <INPUT type="hidden" name="aaa" value="1234"> <INPUT type="submit" name="bbb" value="4567"> </form> ↓ <form action="test.cgi" method="post"> <INPUT type="hidden" name="aaa" value="1234"> <INPUT type="button" name="bbb" value="4567" onclick="submit();" > </form> submitと同じように、bbbのデータ4567も送信するにはどのように書けばよいのでしょうか? 宜しくお願いします。

  • JavaScriptがFirefoxで動かない・・・

    よろしくお願いいたします。 IEでは正常に動作するのですが、Firefoxで実行してみると ボタンを押しても何の反応もありません。 どのように変更すればFirefoxで動作するのでしょうか? よろしくお願いいたします。 <SCRIPT LANGUAGE="JavaScript"> <!-- function warning(){ alert("テストです。"); } //--> </SCRIPT> <FORM><INPUT type="button" value="ボタンを押して。" onClick="warning()"></FORM> 上記のコードを外部に独立させて・・・ 【コード】 <script type="text/javascript" src="sample3.js"></script> <input type = "button" name = "button3" value = "sample3" onclick = "Func3();"> 【sample3.js】 function Func3() { alert("js外部ファイル記述"); } です。 FC2ブログで活用したいのですが・・・ 改行の扱いは「HTMLタグのみ」に設定しています。 ご回答、よろしくお願いいたします。

  • Firefoxでwindow.close()が効きません

    Win、MacともIEでは問題ないのですが、Firefoxでwindow.close()が効きません。 Firefoxのバージョンは、Windows→1.0.7、Mac→1.5.0.1です。 ソースは以下のとおりです。 <form> <input type="button" name="Submit" value="ウィンドウを閉じる" onClick="javascript:window.close();"> </form> また、以下の方法も試してみたのですが動作しませんでした。 <SCRIPT language="JavaScript"> <!-- function CloseWin(){ window.close(); } // --> </SCRIPT> <FORM> <INPUT type="button" value="ウィンドウを閉じる" onClick="CloseWin()"> </FORM> aタグのターゲットブランクで別ウィンドウを開いた場合です。よろしくお願いいたします。

  • Chromeで複数submit

    現在1つのボタンで2つのフォームをsubmitしているのですがGoogleChromeだけ1正常に動作せず困っております。 下記スクリプトでIE、FireFoxはnform、nform2ともにsubmitされるのですがChromeのみnform2(後に記述したほう)のみ実行されます。 解決方法はありますでしょうか? 宜しくお願い致します。 <script language="javascript"><!-- function send() { if(window.confirm('設定してよろしいですか?')){ document.nform.submit(); document.nform2.submit(); }else{   alert('キャンセルしました'); } } //--></script> <form name="nform" action="a.php" target="blank" method="POST"> <input type="hidden" value="a" name="1"> </form> <form name="nform2" action="b.php" method="POST"> <input type="hidden" value="a" name="1"> </form> <button onClick="send()">ボタン</button>

  • submit()で送れない

    <SCRIPT language="JavaScript"> <!-- function send55() { document.frm.aaa.value = "送る内容"; document.frm.submit(); } //--> </SCRIPT> <A href="JavaScript:void(0)" onclick="send55()">ここをクリック</A> <FORM name="frm" method="POST" action="test.php"> <input type="hidden" name="aaa"> </FORM> 上記内容で「ここをクリック」をクリックすると、aaaには"送る内容"がセットされるのですが、続くsubmit()が動作しないようです。 試しに<FORM>タグ内に以下の1行 <INPUT type="submit" name="test" value="送信テスト" > を追加して「送信テスト」ボタンをクリックすると正しくtest.phpが開きます。 使い方を間違っていますでしょうか? ご指導よろしくお願いします。

  • submitについて

    <script type="text/javascript"> <!-- function go() { document.getElementsByTagName("input")[3].value+="text"; } //--> </script> <form name="NAME1" action="#" method="get" onSubmit="go()"> <input type="submit" name="submit1" value="送信1" > <input type="submit" name="submit2" value="送信2"> <input type="button" name="submit3" value="送信3" onClick="go()"> <input type="text" name="text1" size="10"> </form> なのですが、送信2のsubmitを4回クリックすると以下のように表示されるのですが、どういう感じで実行されているのかわかりませんので教えていただけないでしょうか? 一応一回目はtext1=textとなるのですがテキストボックスには空になります。 2回目はtext1=textとなりテキストボックスにはtextが入ります。 3回目はtext1=texttextとなりテキストボックスには空になります。 4回目はtext1=textとなりテキストボックスは空になります。 以上よろしくお願いします。

  • javascript confirmでFORM送信

    javascript confirmにて「この点数で良ければ送信する」というものを考えています。 この点数部分は変数になる予定であり、javascript内部で生成されます。 まずは、変数ではなく固定値として、javascriptの中にある数値を<form></form>の中に生成することを考えましたがいきなりつまずきました。 「100という数値を送信」するつもりだったのですが、うまく送信することが出来ません。 どこを修正すればいいかご教示いただきたくお願いいたします。 <html> <head> <title>submit</title> </head> <script language="javascript"> <!-- function frmSubmit() { var errFlag=true; if(errFlag==false) { return; } if(confirm("100点です。送信しますか?")) { document.frm.submit(); document.getElementById("plus").value ="100"; } else { } } //--> </script> <body> <form method="post" action="form.cgi" name="frm" target="_self"> <input type="HIDDEN" id="plus" value="" /><br /> <input type="button" value="send" onclick="frmSubmit();"> </form> </body> </html>

  • 2つのjavascriptを組み合わせたい

    フォームメール用の2つのjavascriptがあります。 ●2重送信防止とデータ送信後指定ページへ遷移するjavascript ●テキストボックスが空欄だった時にアラートを表示するjavascript の2つです。 この2つを組み合わせようとしたのですが、うまく動きません。 ご指導いただきたくお願いいたします。 *************************************************** 【●2重送信防止とデータ送信後指定ページへ遷移するjavascript】【動きます】 送信ボタン押下後、2重送信を防止しながら、データ送信後は「location.href = "finish.html"」でfinish.htmlを表示します。 <script type="text/javascript" src="js/jquery.js"></script> <script> jQuery(function($) { $('#form1').submit(function(event) { // HTML送信キャンセル event.preventDefault(); //フォーム要素取得 var $form = $(this); // 送信ボタンを取得 // (後で使う: 二重送信防止) var $button = $form.find('button'); // 送信 $.ajax({ url: $form.attr('action'), type: $form.attr('method'), data: $form.serialize() + '&delay=1', timeout: 10000, // 送信前 beforeSend: function(xhr, settings) { // ボタン無効二重送信防止 $button.attr('disabled', true); }, // 応答後 complete: function(xhr, textStatus) { // ボタン有効再送信許可 $button.attr('disabled', false); }, // 通信成功処理 success: function(result, textStatus, xhr) { // 入力値初期化 $form[0].reset(); location.href = "finish.html"; }, // 通信失敗処理 error: function(xhr, textStatus, error) { alert('retry');} }); }); }); </script> <form name="form1" id="form1" method="POST" name="form1" action="insert.php"> <input type="text" name="tel" value="" /> <input type="text" name="fax" value="" /> <input type="submit" value="送信A"> </form> *************************************************** 【●テキストボックスが空欄だった時にアラートを表示するjavascript】【動きます】 テキストボックスが空欄だったらアラートを表示します。 <script> function check3() {   var tel3 = document.form1.tel.value;   var fax3 = document.form1.fax.value;   var isValid = true;   if (!tel3) {     alert("電話未入力");     isValid = false;   }   if (!fax3) {     alert("FAX未入力");     isValid = false;   }   if (!isValid) {     return;   }   document.form1.submit(); } </script> <form name="form1" id="form1" method="POST" name="form1" action="insert.php"> <input type="text" name="tel" value="" /> <input type="text" name="fax" value="" /> <input type="submit" value="送信B" onclick="check3();"> </form> *************************************************** 【上記の2つを組み合わせてみました。】【動きません】 テキストボックスが空欄だったらアラートを表示しながら2重ボタン排除&finish.htmlに遷移というものです。 【結果】 「問題なく動くjavascript」2つを単純に組み合わせただけなのですが、 finish.htmlに遷移せずinsert.phpが表示されます。ご指導宜しくお願いします。 <script type="text/javascript" src="js/jquery.js"></script> <script> jQuery(function($) { $('#form1').submit(function(event) { event.preventDefault(); var $form = $(this); var $button = $form.find('button'); $.ajax({ url: $form.attr('action'), type: $form.attr('method'), data: $form.serialize() + '&delay=1', timeout: 10000, beforeSend: function(xhr, settings) { $button.attr('disabled', true); }, complete: function(xhr, textStatus) { $button.attr('disabled', false); }, success: function(result, textStatus, xhr) { $form[0].reset(); location.href = "finish.html"; }, error: function(xhr, textStatus, error) { alert('retry');} }); }); }); </script> <script> function check3() {   var tel3 = document.form1.tel.value;   var fax3 = document.form1.fax.value;   var isValid = true;   if (!tel3) {     alert("電話未入力");     isValid = false;   }   if (!fax3) {     alert("FAX未入力");     isValid = false;   }   if (!isValid) {     return;   }   document.form1.submit(); } </script> <form name="form1" id="form1" method="POST" name="form1" action="insert.php"> <input type="text" name="tel" value="" /> <input type="text" name="fax" value="" /> <input type="submit" value="送信B" onclick="check3();"> </form>

  • formでPOSTするのと同じ動作をボタンとjavascriptで実現したいのですが

    <form name="myFORM" method="POST" action="xxx.php"> <input type="text" name="NAME"> <input type="submit" value="送信"> </form> 上記と同じ動作を <button onclick="fpost('tanaka','POST','xxx.php')">送信</button> とjavascriptで実現したいのですが可能でしょうか? 可能でしたらどのようなスクリプトになりますでしょうか? document.myFORM.submit();とかではなく、formタグを全く使わずPOSTしページ遷移したいのですが。 XMLHttpRequestとlocation.replace()とかでできるのでしょうか?? すみませんがよろしくお願い致します。

専門家に質問してみよう