- ベストアンサー
サブミットで送信させない方法とは？
- ジャバスクリプトやサーブレットの勉強をしている中で、サブミットで送信した際に画面が飛んでしまう問題に直面しました。
- 様々な方法を試しましたが、ジャバスクリプトが機能しなくなったり、ページが遷移してしまったりとうまくいきませんでした。
- 空の場合はアラートを表示し、それ以外の場合には画面遷移を行わずにデータを送信したいと考えています。アドバイスをお願いします。
- gomadango27
- お礼率31% (15/47)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
あーごめん。 データ送信だけってそういうことね。俺こそ良く見ろって話だ・・・ で、それはJavaScriptでAjaxという技術を使わないと駄目。 Ajaxを簡単に利用するためにjQueryというライブラリを利用するのが早いかな。 これを追加 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> function ajaxTest() { $.get ( '../HelloWeb', { aaa: '送信される内容' }, function ( response ) { alert ( '送信したよ'); } ); } </script> ajaxTest()を呼び出すと../HelloWebに対してgetにてaaaというパラメータ名でリクエストを投げる。 このとき画面の遷移はされないよ。 また違った技術を学ばないとだから大変かも
その他の回答 (2)
- Taiyonoshizuku
- ベストアンサー率37% (183/489)
よく見てね。 <form method="get" action="../HelloWeb" onsubmit="return sta()">とするべき。
お礼
勉強になりました ありがとうございます
補足
<%@page contentType="text/html; charset=Windows-31j"%> <html> <head> <H1>入力画面</H1> <script type='text/javascript'> <!-- function sta() { var naiyou = document.getElementsByName('aaa')[0].value; if(naiyou == '') { alert('空です'); return false; } } // --></script> </head> <body> <form method="get" action="../HelloWeb" onsubmit="return sta()"> <INPUT type='text' name='aaa'> <INPUT type='submit' value='クエリ送信' ><br> <br> </form> </body></html> にしたところ アラートがバッチリ表示されます!!すごい・・・ まだまだ勉強不足ですね。 文字を入力すると やっぱり画面遷移が行われます・・・ if(naiyou == '') { alert('空です'); return false; } else { return false; } としても画面はHelloWebにいってしまいます。 データだけ送信とは可能なのですか？？
- Taiyonoshizuku
- ベストアンサー率37% (183/489)
まずsubmitはページが遷移するのは当たり前という認識を持ってね。 次に<input type="submit">は既にsubmitの機能を持ってるからonclickで指定しちゃダメ。 <form method="get" action="../HelloWeb" onsubmit="return sta()">とするべき。 でJavaScriptでは if ( naiyou === '' ) { alert ( '空です' ); return false; } とし、エラーがあった場合はreturn false;をするようにすること。 そうするとonsubmitでその戻り値を使用しているのでfalseが返ってくればsubmitは実行されない。
お礼
勉強になりました ありがとうございます
補足
回答ありがとうございます ソース変更して実行してみました <%@page contentType="text/html; charset=Windows-31j"%> <html> <head> <H1>入力画面</H1> <script type='text/javascript'> <!-- function sta() { var naiyou = document.getElementsByName('aaa')[0].value; if(naiyou == '') { alert('空です'); return false; } } // --></script> </head> <body> <form method=get action="../HelloWeb"> <INPUT type='text' name='aaa'> <INPUT type='submit' value='クエリ送信' onsubmit='return sta()'><br> <br> </form> </body></html> このように変更してみたのですが 画面遷移がおこなわれ ページ移動してしまいます・・・ onsubmitにすると アラートが表示されなくなり 今まで使っておりませんでした データだけ送信とはこんなに難しいものなんですね＞＜勉強不足です
補足
ありがとうございます!! まだまだ勉強しないとってことですね＞＜ 根本的に考え方が違っているのかもです・・・ もう一度考え直して だめそうだったら 新たにAjax勉強したいと思います!ありがとうございました＾＾