3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Ajaxで勝手にページ遷移される

Last updated at Posted at 2018-08-07

ページ遷移したくなくてAjaxに手を出したけど…
なぜかページ遷移されてはまったので、こうしたら治ったよっていうアレ

ド初心者なので、詳しいことは偉い人に教えてもらってください。

##解決策
フォームタブの外にajaxのonclickイベントとってるボタンを置くと解決します。
追記
ボタンタブのtypeをbuttonと明記してあげると解決します!(ご指摘頂いたy-tn先生に感謝です!!)
こんな感じ

<button id="ajax" type="button">ajax</button>

##うまくいかなかったコード
イベントとってる#ajaxのボタンがフォームタブの中にあります。

<form id="form" method="post" accept-charset="utf-8" return false>
    <p>名前<input type="text" name="userid" id="userid"></p>
    <p>パスワード<input type="text" name="passward" id="passward"> </p>
    <button id="ajax">ajax</button>
</form>

<script type="text/javascript">
        $(function(){
            // Ajax button click
            $('#ajax').on('click',function(){
            ...

##うまくいったコード非推奨
イベントとってる#ajaxのボタンがフォームタブの外にあります。
ボタンタブにtype="button"を追加してあげてください。

<form id="form" method="post" accept-charset="utf-8" return false>
    <p>名前<input type="text" name="userid" id="userid"></p>
    <p>パスワード<input type="text" name="passward" id="passward"> </p>
</form>
<button id="ajax">ajax</button>

<script type="text/javascript">
        $(function(){
            // Ajax button click
            $('#ajax').on('click',function(){
            ...
3
2
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?