- 締切済み
Javascript Firefoxだけでの現象なのですが
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title></title> <script> function test(){ document.forms[0].submit(); } function delbut(el){ var par = el.parentNode; var chil = par.childNodes; document.forms[0].aa.value = "aaaaaa"; for( i=chil.length; 0 < i; i-- ){ if( el.id == chil[i-1].id ){ par.removeChild( chil[i-1] ); break; } } return false; } </script> </head> <body> <form action="./" method="POST"> <input type="text" name="aa"> <br> <input type="submit" onclick="return delbut(this);" id="btn" value="決定"> <br> <a href="javascript: test();">送信</a> </body> </html> 上記のようなページで決定を押して、ボタンを消した後に、 送信を押して、javascriptでフォームの内容を送信しようとすると うまく送信できません。。 削除する前は、うまくデータをおくれるのですが＞＜ 削除した後に正しく動作しないのはなぜなのでしょうか？ 気になって質問させていただきました。 よろしくお願いします。
- chara0-m
- お礼率66% (2/3)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- zxcv0000
- ベストアンサー率56% (111/196)
test() 中の、 document.forms は参考URLに載ってませんね。 IE依存かも。 呼出時に決定ボタンと同様に this を渡すのがよろしいかと。
- zxcv0000
- ベストアンサー率56% (111/196)
for( i=chil.length; 0 < i; i-- ){ の部分、なぜループにする必要があるんでしょう? el.parentNode.removeChild(el) とか el.style.display = 'none'； とか el.style.visibility = "hidden"; ではダメですか? いずれにしろ、submit後に画面を書き直さない場合には、JavaScript で行ったDOMの変更がまだ生きているので要注意です。
お礼
回答ありがとうございます！！！！！ ＞＞なぜループにする必要があるんでしょう? すいません。 ソースを短くするためにもともと書いたものから少し省いたので。。 元々は、子のエレメントがいくつかあったので、ループにして、 全てをエレメントを削除していたので。 というのが理由です＞＜ ソースを短くするときに処理自体は、残して書いてしまいました。。 申し訳ないです。。 ＞＞いずれにしろ、submit後に画面を書き直さない場合には、JavaScript で行ったDOMの変更がまだ生きているので要注意です。 DOMの変更って、ページの再読み込み？などをしないと残っているものなのですか？？！！！ 初めて知りました。。。 残っていたとして、削除をする前は送信処理が上手くいくのは何故なんでしょうか？？ 元々エレメント自体は、最初から存在しているので。 DOMについて詳しくないため、いろいろと質問してしまって申し訳ありません＞＜
関連するQ&A
- 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>
- ベストアンサー
- JavaScript
- JavaScriptのソースコード教えてください。
JavaScriptで下記はボタンではなく画像でリンク先が出現するソースを実現したいです。 <script type="text/javascript"などでjsファイルを読み込むような感じでもいいです。 ここまでがjsファイルでここまでがhtmlと言うように分けて記述してもらえると助かります。 <html> <head> <title>oooのページ</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <script language="javascript"> <!-- function next(){ location.href="ttp://www.ooo.jp/ooo/123456"; } function Check() { var obj = document.getElementById("agreement"); if(obj.scrollTop + obj.clientHeight >= obj.scrollHeight - 1) { document.form1.submit1.disabled = false; document.form1.submit1.focus(); } } //--> </script> </head> <body bgcolor="#FFFFFF" text="#000000"> <table width="500" border="0" cellspacing="0" cellpadding="5"> <tr> <td align="center" bgcolor="#999999"><font color="#000000"><b>ご利用規約</b></font></td> </tr> <form name="form1" action="" method="post"> <tr> <td align="center"> <div id=agreement style="width:400px; height:100px; overflow: scroll; border:1px solid gray;" onScroll="Check()"> テキスト<br> テキスト<br> テキスト<br> テキスト<br> テキスト<br> テキスト<br> </div> <input type="button" value="依頼する" name="submit" id="submit1" disabled onClick="next()"> <input type="submit" value="キャンセル" name="submit2" id="submit2" onclick="history.back()"> </td> </tr> </form> </table> </body> </html>
- ベストアンサー
- JavaScript
- javascript form送信後の動作
以下のスクリプトでiframeにデータは送信できているんですが、<input type="text">に入力したテキストが残ってしまいます。どのように記述したらうまくいくでしょうか？ <script type="text/javascript"> function send(){ var frm=document.txt_submit; frm.submit(); frm.reset(); } </script> <form name="txt_submit" action="log.cgi" method="post" target="log" autocomplete="off"> <input type="text" name="ctxt" size="20" value=""> <input type="button" value="送信" onclick="return send();"> </form>
- ベストアンサー
- JavaScript
- javascriptでクッキーの読み出し
お世話になります。 下記のjavascriptで、あらかじめ取得したクッキーを html内に表示させ、且つ他のページへ情報を送る 方法を調べていますがうまくいきません。 フォームのインプットタイプテキストを利用すれば、 表示されますが、それ以外の方法がございましたら、 ご教示いただければと思います。 よろしくお願いいたします。 <!-- 表示確認 --> <input type="text" id="id" value=""><br> <input type="text" id="url" value=""><br> <html> <head> <script type="text/javascript"> <!-- function load() { // クッキーから読み込んだ値を、『url』『id』要素に設定 document.getElementById("url").value = readCookie("url"); document.getElementById("id").value = readCookie("id"); } function readCookie(key) { if (key == "") return; // クッキーの文字列『key1=value; key2=value; …』から、 // 引数の『key』を元に、正規表現で値を検索 var re = new RegExp(escape(key) + "=(.*?)(?:;|$)"); if (document.cookie.match(re)) return unescape(RegExp.$1); return ""; } // --> </script> </head> <body onload="load();"> <!-- 表示確認 --> <input type="text" id="id" value=""><br> <input type="text" id="url" value=""><br> <br> <br> <!-- 表示確認できない --> <span id="id" value=""></span><br> <span id="url" value=""></span><br> </body> </html>
- 締切済み
- JavaScript
- vmlをJavascriptで操作
こんにちは。 vmlで描いた折れ線のpoints要素を、Javascriptで操作できなくて困っています；； 以下が、全ソースです。 ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html xmlns:v="urn:schemas-microsoft-com:vml"> <head> <META http-equiv="Content-Style-Type" content="text/css"> <style> v\:*{ behavior : url(#default#VML); } </style> <script type="text/javascript"> function c(){ var el = document.getElementById("a"); el.points = "0,0 100,100"; } </script> </head> <body> <v:polyline style="position:relative;" points="10,0 20,30 30,0 40,30" id="a" /><br /> <input type="button" value="click" onclick="c()"> </body> </html> ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ polylineのpointsだけ、できないんですよね…仕様でしょうか？ どなたか分かる人は、ご教示願います。
- ベストアンサー
- JavaScript
- 親フレームの変数にアクセス(JavaScript）
[index.html] <script src="script.js"></script> <frameset rows="50%,*" frameborder="1"> <frame src="content1.html"name="cont1"> <frame src="content2.html" name="cont2"> </frameset> [script.js] var test_text="てすと"; [content1.html] <form> <input type="text" name="in"> <input type="button" onClick="window.parent.test_text = document.forms[0].in.value;" value="IN"> </form> [content2.html] <form> <input type="text" name="out"> <input type="button" onClick="document.forms[0].out.value = window.parent.test_text;" value="OUT"> </form> のようになっています。 「index.html」の「script.js」の変数に、「content.1html」と「content2.html」からアクセスしたいです。 ですが、フレームになっているため、思うような動作をしてくれません。 よろしくお願いします。
- ベストアンサー
- JavaScript
- javascriptがFirefoxで効かない
いつもお世話になります。 見よう見まねでやっている初心者です。 下記のようなボタン2個とjavascript でpostする先をわけようと思っているのですが、 ＩＥですと動くのですが、FirefoxとGoogle Chrome では全く動きません。 これをFirefoxとGoogle Chromeでも動かせるのにはどう書けば宜しいのでしょうか？ できたら具体的に式を書いて頂けると大変助かります。 どうかご教授の程よろしくお願い致します。 <input type="button" value="new" onclick= "test_new()"> <input type="button" value="edit" onclick= "test_edit()"> function test_new(){ var postform = document.getElementById("register"); postform.action = './test_new.php'; postform.submit();} function test_edit(){ var postform = document.getElementById("register"); postform.action = './test_edit.php'; postform.submit();}
- ベストアンサー
- JavaScript
- javascript submit()の後の動作
scriptはjsファイルで分離しています。 送信ボタンをクリックした場合の動作は期待通りの動作をしています エンターキーを押したときの動作が、フォームの送信は正常に実行されるのですが、 document.getElementById('ctxt').value= '';が実行されません。 その後、試しにアラートも入れてみましたけど、動作していないようです document.forms[txt_submit].submit();の後の部分が実行されるようにするにはどうしたらいいのでしょうか？ function Key_on(){ if(window.event.keyCode == 13){ document.forms[txt_submit].submit(); document.getElementById('ctxt').value= ''; alert('ん？'); } } function send(){ document.txt_submit.submit(); document.getElementById('ctxt').value= ''; } ----------------- <form id="txt_submit" name="txt_submit" action="log.cgi" method="post" target="log" autocomplete="off"> <input type="text" id="ctxt" name="ctxt" size="20" value="" onkeydown="Key_on()"> <input type="button" value="送信" onclick="return send();"> </form>
- ベストアンサー
- JavaScript
- javascriptのtextbox
こんばんは。 <html> <body> <center> <br><br> <form name="fuji"> TEXT BOX<br> <input type="text" name="tex"> </form> <SCRIPT type="text/javascript"> var i; i="ABC" document.write("<input type='button' value='↑を変数iに代入' onClick='i=(document.fuji.tex);'>"); document.write("<br><input type='button' value='表示' onClick='document.write(i);'>"); </SCRIPT> </center> </body> </html> でテキストボックスの中身を表示させたいのですが、 上手くいきません。どうすればいいのでしょうか。 また、変数を使わずに直接テキストボックスの中身を 表示させる事はできるのでしょうか。 教えてください。
- ベストアンサー
- その他（インターネット・Webサービス）
- PHPのお問い合わせフォームが動かない
「ぶっとびねっと」というレンタルサーバーに以下の2つのファイルをアップしました。 ・contacts.html ・contacts.php しかしフォームに入力後、送信を押してもメールが指定したアドレスに届きません。 なぜでしょうか。。。 ソースを下に貼りますので、ご教授願います。 ----- contacts.html -------------------------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>メールフォーム</title> </head> <body> <form method="post" action="contacts.php"> お名前：<input type="text" name="namae" /><br /> メールアドレス：<input type="text" name="meado" /><br /> 件名：<input type="text" name="subject" /><br /> お問い合わせ内容：<textarea name="content" cols="50" rows="5"></textarea><br /> <input type="submit" name="submit" value="メール送信" /> </form> </body> </html> ------------------------------------------------------ ----- contacts.php -------------------------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>メールフォーム</title> </head> <body> <?php if ($_POST["submit"] == "メール送信") { mb_language("Ja") ; mb_internal_encoding("UTF-8") ; $mailto="○○○○@hotmail.co.jp"; $subject = $_POST["subject"]; $content = $_POST["content"]; $namae = $_POST["namae"]; $meado = $_POST["meado"]; $mailfrom="From:" .mb_encode_mimeheader($namae) ."<".$meado.">"; mb_send_mail($mailto,$subject,$content,$mailfrom); } ?> <form method="post" action=""> お名前：<input type="text" name="namae" /><br /> メールアドレス：<input type="text" name="meado" /><br /> 件名：<input type="text" name="subject" /><br /> お問い合わせ内容：<textarea name="content" cols="50" rows="5"></textarea><br /> <input type="submit" name="submit" value="メール送信" /> </form> </body> </html> ------------------------------------------------------
- ベストアンサー
- PHP
お礼
回答ありがとうございます！！！ ＞＞test() 中の、 document.forms は参考URLに載ってませんね。 IE依存かも。 いえ！IEだけではなく他のブラウザなどでも、 docuemnt.forms[0] 自体は、フォームとして認識されているので問題ないと思うのですが＞＜ 例えば test()のスクリプトを function test(){ document.forms[0].submit(); } ↓ function test(){ document.form1.submit(); } formタグを <form action="./" method="POST"> ↓ <form action="./" method="POST" name="form1"> に変更しても、 送信処理がおこなわれません。。。