JavaScriptを使用して他のJavaScriptに連携させる方法

2023/09/06 02:10

このQ&Aのポイント

JavaScriptを使用してiPhoneアプリを作成していますが、サーバー側のMySQLとの通信に問題があります。
form要素のsubmitイベントをキャンセルし、jQueryのajaxメソッドを使用してサーバーにデータを送信しています。
自動実行されるJavaScriptの問題について、修正方法を教えてください。

ベストアンサー

読み込み後発動するjsを他のjsに連携させたい

2015/06/14 16:44

javascriptを使ってiPhoneアプリを作っています。サーバー側のmysqlと交信させるようにしているのですが、下記のように単純にpostすると、post後に表示されるのはサーバー側のhoge.ne.jp/usr_in.phpです。【iphone側　index.html】 <script type="text/javascript" src="js/jquery.js"></script> <form name="form1" id="form1" method="POST" name="form1" action="https://hoge.ne.jp/usr_in.php"> <input type=“hidden” name="myname" value="" /> <input type="hidden" name="pass" value="" /> <button class="button8">購入</button> </form> そこで、下記のような【遷移JS】を用い、ボタンを押すと、サーバー側にpostしたあと、【iphone側のfinish.html】に遷移するようにしました。ここまではうまくいきました。【遷移JS】 <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('購入できませんでした。再度お試しください'); } }); }); }); </script> <form name="form1" id="form1" method="POST" name="form1" action="https://hoge.ne.jp/usr_in.php"> <input type=“hidden” name="myname" value="" /> <input type="hidden" name="pass" value="" /> <button class="button8">登録</button> </form> 次に、このmysqlへの会員登録機能を自動化するために、読み込み後に自動的にsubmitされる【自動実行JS】を組み、<body onLoad="loadHello()"></body>で囲んだ後、<form></form>の最底辺に挿入しました。【自動実行JS】 <SCRIPT language="JavaScript"> function loadHello(){ document.form1.submit(); } </script> 結果、自動登録機能は機能するのですが、サーバー側のhoge.ne.jp/usr_in.phpが表示されてしまい、【iphone側のfinish.html】に遷移してくれません。 bodyをloadした後、【自動実行JS】が実行された時に、【遷移JS】にトスされずにそのまま送信されてしまうようです。どこをどう修正すればいいかご教授願います。

tajix14
お礼率72% (175/242)

JavaScript
回答数1
ありがとう数2

みんなの回答 （1）
専門家の回答

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

ベストアンサー

noname#212058

2015/06/14 17:43 回答No.1

document.form1.submit(); で送信を実行した場合は、form の onsubmit イベント ($('#form1').submit に指定した関数) は動きません。form の onsubmit イベントは type="submit" のボタンがクリックされたときに動く仕様ですから、自動実行JS をこの仕様に沿うような実装にしなくてはなりません。具体的には、 1. <button class="button8">登録</button> を　<button type="submit" id="submitbutton" class="button8">登録</button> 　になおす。 2. document.form1.submit(); を　document.getElementById('submitbutton').click(); 　になおす。で行けると思います。

質問者

お礼 2015/06/14 18:32

できました!! 有難うございました。深く御礼申し上げます。

関連する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
スマートフォンからMySQLサーバーにインサート
「HTML+javascript」のスマートフォンアプリから別サーバーのMySQLと連携させることを考えています。サーバーの情報を取得することは問題なくできたのですが、サーバーにインサートする方法で悩んでいます。【post.html】では、mysqlにインサートはされるものの、端末にはサーバーのinsert.phpがそのまま表示されてしまいます。【post_kai.html】でfunction Check()を試したところ、送信ボタンを押した後に端末内のfinish.htmlが表示されましたが、残念ながらインサートが出来ていませんでした。サーバーにインサートを完了させながら、その後は端末内のfinish.htmlを表示させるためにはどうすればいいでしょうか? ****************************** 端末側 ****************************** 【post.html】 <form name="form1" id="form1" method="POST" name="form1" value="form1" action="http://hoge.ne.jp/insert.php"> <input type="hidden" name="id" value="100" /> <input type="hidden" name="pw" value="12zdD3fw" /> <input type="button" name="button" value="送信" /> <input type="hidden" name="MM_insert" value="form1" /> </form> 【post_kai.html】 <form name="form1" id="form1" method="POST" name="form1" value="form1" action="http://hoge.ne.jp/insert.php"> <input type="hidden" name="id" value="100" /> <input type="hidden" name="pw" value="12zdD3fw" /> <script> function Check(){ document.form1.submit(); location.href="finish.html"; } </script> <input type="button" name="button" value="送信" onClick="Check();" /> <input type="hidden" name="MM_insert" value="form1" /> </form> 【finish.html】 <html> OKです <html> ****************************** サーバー側(mysql側)　http://hoge.ne.jp/ ****************************** 【insert.php】省略
- ベストアンサー
- JavaScript
AJAXで新規表示されたボタンが稼働しない
下記のようなものを作りました。 1 通常は下記のような　<100購入>というボタンが表示されています。 <button class="button8" type="submit" name="volume" value="100">100購入</button> 2 <追加表示ボタン>を押すと、 <button class="button8" type="submit" name="volume" value="500">500購入</button>という<500購入>ボタンが新たに追加されます。 3 <100購入>ボタンか<500購入>ボタンを押すと、お好きな数値が購入できます。前提条件 <100購入>ボタンは、当初から<form></form>内に直接記載されているボタンです。 <500購入>ボタンは、<追加表示ボタン>を押した際、AJAXにより、<form></form>内に新たに設置されるボタンです。問題点 <100購入>ボタンは問題なく稼働します。しかしながら、AJAXにより新たに設置された<500購入>ボタンを押しても、Formが稼働しません。どのようにすれば、AJAXにより新たに設置された<500購入>ボタンが稼働するようになるでしょうか? よろしくお願いいたします。 +++++++++++++++++++++++++++++++++++++++++++++++++++ 当方が作ったソース <script type="text/javascript" src="./js/jquery.js"></script> <form action="abc.cgi" method="post" name="form1" id="form1"> <div id="msg">ここへ出力</div> <button class="button8" type="submit" name="volume" value="100">100購入</button </form> <BR> <button id="btn0">追加表示</button> <script type="text/javascript"> jQuery(function($){ $("#btn0") .click(function () { $.ajax({ beforeSend:function(BTN){ $("#msg").append("<BR>新規ボタンを表示します<BR>"); }, complete: function (BTN, textStatus) { $("#msg").append("<button class=\"button8\" type=\"submit\" name=\"volume\" value=\"500\">500購入</button><BR>"); } }); }); }); </script>
- ベストアンサー
- JavaScript
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()とかでできるのでしょうか？？すみませんがよろしくお願い致します。
- ベストアンサー
- JavaScript
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
外部.jsの内容を一部置き換えて読み込む方法
お世話になります。 index.htmlに AAA.js という外部.jsを読み込ませてフォーム送信させようとしています。 AAA.jsには document.write("<INPUT NAME=\"return_url\" TYPE=\"hidden\" VALUE=\"http://www.my-site.com/p-123.html\"><INPUT NAME=\"to_do\" TYPE=\"hidden\" VALUE=\"touroku\"><input type=\"submit\" name=\"comm1\"/>" value=\"書き込む\""); というソースが入っており、 index.htmlには <INPUT NAME="return_url" TYPE="hidden" VALUE="http://www.my-site.com/p-456.html"> というタグが含まれています。この場合、1組の<form></form>内に、同じ「return_url」で、片や p-123.html、片や p-456.html と、矛盾する２つの指定をしてしまっていることになりますから、これではフォームが成り立ちません。都合により、このindex.htmlの<form></form>内にはどうしても AAA.js を読み込ませなければならないのですが、「return_url」だけはp-456.html に書き直してフォームを送信しなければなりません。 AAA.jsは私が作ったものではなく、他ページでも読み込むので、AAA.js は<INPUT NAME=\"return_url\" TYPE=\"hidden\" VALUE=\"http://www.my-site.com/p-123.html\">という記述を外すことも他のソースを付け加えることも出来ないのですが、 index.html側に何か手を加えることで、この AAA.js で指定されているp-123.htmlをp-456.html に置き換えてフォームを送信するようにすることは出来ないでしょうか？方法をご存知の方がいらっしゃいましたら、どうかよろしくお願い致します。
- ベストアンサー
- JavaScript
ｊｓでhtmlを書き換えるときのセキュリティ
フォームのセキュリティについて質問です。 <input type="hidden" name="hidden_form" id="hidden_id"> というhiddenの項目があり、その値をjqueryで、他の項目に打ち込んだ内容をリアルタイムで書き換えようと思っています。つまり <input type="text" name="result" id="result_id"> という項目を用意して、この項目の入力欄に例えば「あああ」と打ち込んだとします。そのときに、 $("#hidden_id").val($("#result_id").val()); というスクリプトを動かそうと思っています。（jqueryのイベントをキーのタイプ時などに設定して）このとき、入力欄に例えば " ><script>（何か危険な処理)</script>" と入力すれば、htmlの hiddenの部分がクロスサイトスクリプティングの基本的な手口のように <input type="hidden" name="hidden_form" id="hidden_id" val="" ><script>（何か危険な処理)</script>""> というように、スクリプトを走らせられるのかなと思ったのですが、これは現実的には起こりえるのでしょうか？ firefoxで少しやってみても、懸念している動作は起こらず、そのまま送信しても、送信もうまくいったように見えたのですが、これは危険な処理でしょうか？また、危険な処理だとしたらどのような方法で、 hiddenの値をリアルタイムに自由に書き換えることが可能でしょうか？
- ベストアンサー
- JavaScript
リンクでPOST送信
http://www.kojikoji.net/pso/javascript.asp こちらにその方法がのっていて、 Windows IE 6.0 Windows Opera 7.13 では動作を確認しました。ですが、 Windwos Netscape 7.1 で動作しません。Netscapeにも対応した書き方で、<a href=...>を用いてPOST送信することは可能でしょうか？ *****以下引用*********************************** リンクやボタンを使って「xxx.asp」へPOST送信 <html> <head> <script language="JavaScript">  </script> </head> <body> <a href="javascript:wPost("text1","text2")">送信</a> <input type="button" OnClick="wPost('text3','text4')" value="送信"> <form name="form1" method="post" action="err.html"> <input type="hidden" name="text1"> <input type="hidden" name="text2"> </form> </body> </html>
- ベストアンサー
- JavaScript
JavaScript＋PHPでのボタンの値について
お世話になります。現在下記のようなコードです。＃Html側 <script language="JavaScript"></script> <form name="Form1" action="tesuto1.php" > 中略 </form> <form name="Form2" action="tesuto2.php" > 中略 </form> <form> <input type="button" name="botan" value="送信" onClick="send1()"> </form> <form> <input type="button" name="botan" value="取消" onClick="send2()"> </form> <form> <input type="button" name="botan" value="確認" onClick="send1()"> </form> #PHP側 tesuto1.php echo "値は".@$_POST["botan"]."です"; という感じで、どのボタンがクリックされたか判別するために、ボタンの値を取得したいのですが。よろしくお願いします。
- ベストアンサー
- JavaScript
formのボタンをsubmitしたときにアラート
javascript で、formのボタンをsubmitしたときにアラートが出るようにしたいと思います。下記のように作ってみましたが、うまく動きません。どのようにすれば動くでしょうか? ご教示いただきたくお願いいたします。 <script type="text/javascript"> function(){ $('form1').submit(function(){ $.ajax({ type: 'POST', data: postData, url: 'buy.php', success: function(data){alert("購入できました");} error: function(){alert('購入できませんでした。再度お試しください');} }); return false; }); } </script> <form name="form1" id="form1" method="POST" name="form1" value="form1" action="buy.php"> <input type="hidden" name="id" value="100" /> <input type="hidden" name="name" value="高橋" /> <input type="submit" value="Save"> <form/>
- ベストアンサー
- JavaScript

JavaScriptを使用して他のJavaScriptに連携させる方法

読み込み後発動するjsを他のjsに連携させたい

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

お礼 2015/06/14 18:32

関連するQ&A

注目のQ&A

カテゴリ
一覧

専門家に質問してみよう
専門家登録

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

JavaScriptを使用して他のJavaScriptに連携させる方法

読み込み後発動するjsを他のjsに連携させたい

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

お礼 2015/06/14 18:32

関連するQ&A

注目のQ&A

カテゴリ 一覧

専門家に質問してみよう 専門家登録

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

カテゴリ
一覧

専門家に質問してみよう
専門家登録