Q&A
大変申し訳ありません。。
私の単なるコードミスでした。
早急なご回答ありがとうございました。
※event.preventDefault() については勉強になりました。ありがとうございます。
###前提・実現したいこと
HTML,Javascript(jQuery) を勉強しています。
Javascriptによるリダイレクト(location.href)でハマりまして、動くようにはなったのですが、
挙動の理由について分からない為、ご教授頂ければ幸いです。
###発生している問題・エラーメッセージ
- buttonを押下すると、index.htmlへリダイレクトしたいのですが、
結果は「jquery_test.html?」へリダイレクトされます。
- <form>タグを外すと、index.htmlへリダイレクトされます。
-
1点目、この理由についてご教授頂けませんでしょうか？
-
2点目、<form>タグがある場合に、Javascriptでリダイレクトさせるには
どうすればいいか、ご教授お願い致します。
<jquery_test.html>
HTML
1<html> 2<head> 3 <meta charset="utf-8" /> 4 <title>jQuery Test</title> 5 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 6 <script type="text/javascript" src="jquery_test.js"></script> 7</head> 8<body> 9 <form> 10 <button type-"button" class="btn-group-code">テスト</button> 11 </form> 12</body> 13</html>
<jquery_test.js>
Javascript
1$(document).ready(function(){ 2 $(".btn-group-code").click(function() { 3 window.location.href = "index.html"; 4 }); 5});
回答2件
0
ベストアンサー
その1とその2まとめてですが、teratailでの色付けを見てもわかるように、<button>内のtype="button"となるべきところが、type-"button"となってしまっています。
そのために、<button>のtypeが設定されていない=submitという扱いになって、フォーム送信が動いてしまっています。
正しくtype="button"とすれば、JavaScriptだけ働くはずです。
投稿2016/06/05 02:47
総合スコア145183
0
フォーム内のボタンを押した時に、リダイレクトがかかる前に、フォームの内容がsubmitされてしまうからだと思います。
jqueryならevent.preventDefault()でsubmitをキャンセルして、その後でリダイレクトすれば上手く行くのではないですかね。
試してないので間違っていたらごめんなさい。
投稿2016/06/05 02:48
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/06/05 03:01
2016/06/05 03:03
2016/06/05 03:13