質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.91%

要素を与えて、jQueryで別ページに遷移したい

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 978

ky_46

score 93

前提・実現したいこと

ボタン代わりにDIVのクリックで要素を与えて、別のphpを呼び出したいのですが、うまく行かずに困っております。

該当のソースコード

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<script src="../common/jquery/jquery-3.1.1.min.js"></script>
    <style type="text/css">
        div.test{
            background-color:aquamarine;
            height: 50px;
            width: 200px;
            border: 1px solid #f00;
        }
        div.ps{
            cursor: pointer;
            cursor: hand;
            height: 50px;
            width: 400px;
            border: 1px solid #f00;
        }
    </style>
</head>

<body>
    <div class="ps" >モビルスーツ1(model_number":"RX-78)</div>
    <div class="ps">モビルスーツ2(model_number":"RX-77)</div>
    <div class="ps">モビルスーツ3(model_number":"RX-78)</div>
</body>

<!-- ここにjQuery -->
    <script>
        $('div.ps').on('click', function(){
            var postData = {"model_number":"RX-78"};
            jQuery.post("./b.php", postData);
        });
    </script>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
</head>

<body>
<?php
    $model_number=$_POST['model_number'];
    $model_name='';
    switch($model_number)
            {
                case 'RX-78':
                    $model_name='ガンダム';
                break;

                case 'RX-77':
                    $model_name .='ガンキャノン';
                break;

                case 'RGM-79':
                    $model_name .='GM';
                break;

                case '':
                    $model_name .='なし';
                break;
            }
    print $model_name;
?>    
</body>
</html>

動作の希望

1.最初のHTMLで、DIVで指定したどれかをクリックすると、phpへジャンプしたい。
2.3つのDIVタグのそれぞれをクリックすると、()内のように要素を指定して、その要素を与えたい

このためいろいろと調べて、このような試作品をつくってみたのですが、現状では、DIVをクリックしても、b..phpへ遷移しません。
また、それぞれのDIVに要素を指定する方法も判らず、現在は直書きしてしまっています。

なぜこのような事がしたいのか、ですが、実は元のHTMLは、全体部分を別のphpに飛ばすフォームがあり、このDIVの部分は、いってみてはFORMの入れ子です。HTMLのサブミットボタンを押すと、Aのphpに、このDIVのリストをクリックするとBのphpにリストの要素を持たせてジャンプさせたいのです。

。ajaxを使っていないのは、このHTMLそのものに書き戻ししたいのではなく、a.php、b.phpへ」それぞれ飛ばしたいからです。

何か不足している情報や、まちがって認識しているところがありましたら、おしえていただきたいと思います。

よろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

html 要素 直下に script要素は文法違反です。最後に書くのであれば </body>の直前に書きましょう。

で、data-* 属性で内容を指定して、formを作成して、POST(submit)するとかどうでしょう。

<div class="ps" data-model="RX-78">モビルスーツ1</div>

【【PHP/jQuery】要素クリック時にformを生成しPOST/GETする - B-Teck!】
http://beatdjam.hatenablog.com/entry/2014/10/10/024553

【jQueryでformを作成してPOST(submit)する | 黒川仁の文具堂ブログ三昧】
http://blog.bungu-do.jp/archives/3215

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/03/26 15:25

    ご回答ありがとうございました。

    div の data-* 属性の件は大変助かりました。
    下記のようにHTMLを書き直したところ、b.phpを呼び出し、モビルスーツ1をクリックすると、phpに遷移して、「ガンダム」と表示されました。

    これで遷移先のphpでデータベースでの処理が可能になります。

    ありがとうございました。

    ```HTML
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>無題ドキュメント</title>
    <script src="../common/jquery/jquery-3.1.1.min.js"></script>

    <style type="text/css">
    div.test{
    background-color:aquamarine;
    height: 50px;
    width: 200px;
    border: 1px solid #f00;
    }
    div.ps{
    cursor: pointer;
    cursor: hand;
    height: 50px;
    width: 400px;
    border: 1px solid #f00;
    }
    </style>
    </head>

    <body>
    <div class="ps" data-model="RX-78">モビルスーツ1</div>
    <div class="ps" data-model="RX-77">モビルスーツ2</div>
    <div class="ps" data-model="RGM-79">モビルスーツ3</div>


    <!-- ここにjQuery -->
    <script>
    $('div.ps').on('click', function(){
    var number = jQuery(this).attr('data-model');
    $('<form/>', {action: 'b.php', method: 'post'})
    .append($('<input/>', {type: 'hidden', name: 'model_number', value: number}))
    .appendTo(document.body)
    .submit();
    });

    </script>
    </body>
    </html>
    ```

    キャンセル

0

aタグじゃダメなんでしょうか?
divで遷移するようにつくっても、クロールされない可能性があります。
遷移先がSEO的にどうでもいいなら考えなくてよいですが。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/03/26 15:08

    ご回答ありがとうございます

    >遷移先がSEO的にどうでもいいなら考えなくてよいですが。

    まさにその通りで、遷移先は編集用のページになる為、SEOを考慮する必要が無いのです。a.phpは全体の修正を、b.phpはその全体データを元にした、別リストの修正ページへ飛ばしたいのですが、全体修正へ飛ばす部分は既にFORMで飛ばしているため、FORMの入れ子になってしまい、困っていました。

    Aタグも考慮したのですが、スイッチとして判りにくいと言われまして…

    解決出来まして助かりました。ありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.91%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る