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

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

ただいまの
回答率

89.06%

モーダルウィンドウのフォームでのPOST、元のFORMの値が消えてしまう。誰か教えてください!

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 6,390

SUZUSUZU

score 12

現在PHPで検索フォームを製作しているのですが、検索項目が複数アリ、チェックボックスやセレクトタグで選択項目を作っています。
こだわり検索の項目をクリックすることでモーダルウィンドウが開きモーダルウィンドウ内の選択項目から選び元のフォームに値をセットしたいのですがどういったロジックが必要かがしりたいです。
現在モーダルからPOSTすることによってもとの検索フォームの値が消えます。
元フォームの値を保持した状態でモーダルのフォームの値を受け取りたいです。
教えていただけませんでしょうか。
PHP初心者です。
AJAXなどでしょうか?
教えてくださいお願いします。

//追加記述です

<script type="text/javascript" src="modal.js"></script>
<table>

<tr>
<th>国を選択</th>
<td>
<input type="checkbox" name="kuni[]" value="日本">日本 
<input type="checkbox" name="kuni"[] value="アメリカ">アメリカ
<input type="checkbox" name="kuni[]" value="中国">中国
/*ここで選んだ項目がモーダルで選択した後初期値になってしまう*/
</td>
</tr>

<tr>
<th>名前を入力</th>
<td>
<input type="text" name="name" >

/*ここで入力した名前がモーダルで選択した後、初期値になってしまう*/
</td>
</tr>

<tr>
<th>こだわり</th>
<td>
<a data-target="con3" class="modal-open">
<img src="IMG">
</a>
/*ここにモーダルウィンドウで選択した値を表示する、ここにモーダルからの値をセットして値をPOSTしたいです*/
</td>
</tr>

<div id="con3" class="modal-content">
<a class="modal-close">
<img src="CLOSE_IMG_BTN">
</a>

<div class="modal_body">
 <div class="modal_body1">
            <form method="post" action="">
            <div class="modal_check_head">
            こだわり条件は複数選択していただくことができます。
            </div>
            <ul>
            <li><label><input type="checkbox" name="M_checkbox[]" value="A">A項目</label></li>
           <li><label><input type="checkbox" name="M_checkbox[]" value="B">B項目</label></li>
       <li><label><input type="checkbox" name="M_checkbox[]" value="C">C項目</label></li>
        </ul>
            </div>
            <div>
            <input type="submit" name="submit"  value="以上の特徴で登録">
            </div>
            </form>
            <p><a class="modal-close">閉じる</a></p>
         </div>
</div>/*モーダルウィンドウここまで*/
$(function(){
    // 「.modal-open」をクリック
    $('.modal-open').click(function(){
        // オーバーレイ用の要素を追加
        $('body').append('<div class="modal-overlay"></div>');
        // オーバーレイをフェードイン
        $('.modal-overlay').fadeIn('slow');

        // モーダルコンテンツのIDを取得
        var modal = '#' + $(this).attr('data-target');
        // モーダルコンテンツの表示位置を設定
        modalResize();
         // モーダルコンテンツフェードイン
        $(modal).fadeIn('slow');

        // 「.modal-overlay」あるいは「.modal-close」をクリック
        $('.modal-overlay, .modal-close').off().click(function(){
            // モーダルコンテンツとオーバーレイをフェードアウト
            $(modal).fadeOut('slow');
            $('.modal-overlay').fadeOut('slow',function(){
                // オーバーレイを削除
                $('.modal-overlay').remove();
            });
        });

        // リサイズしたら表示位置を再取得
        $(window).on('resize', function(){
            modalResize();
        });

        // モーダルコンテンツの表示位置を設定する関数
        function modalResize(){
            // ウィンドウの横幅、高さを取得
            var w = $(window).width();
            var h = $(window).height();

            // モーダルコンテンツの表示位置を取得
            var x = (w - $(modal).outerWidth(true)) / 2;
            var y = (h - $(modal).outerHeight(true)) / 2;

            // モーダルコンテンツの表示位置を設定
            $(modal).css({'left': x + 'px','top': y +'px'});
        }

    });
});

以上のようなHTMLでモーダルから値を受け取って、こだわり条件としてフォームを送りたいです。
国選択項目と名前選択の項目を入力した状態を保持したままモーダルからの値を受け取りたいです。
/*POSTについて*/
モーダルからのPOSTをこのページで受け取るのか違うページで受け取るかが分かっていません
どういう形にすればよいか教えていただければありがたいです。
スイマセン...

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/10/30 20:18

    ご自身で書かれたコードを質問文に追記いただいたほうが回答を得られやすいと思います。

    キャンセル

  • kei344

    2016/10/30 20:58

    モーダルをどうやって実装しているかもわかりませんし、どのようにデータをPOSTしているかも書かれているコードからはわかりません。また、コードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

    キャンセル

回答 1

checkベストアンサー

+1

  1. formタグをモーダルから出して、全体を包むように設定する
  2. <input type="submit"もモーダルから出す

それだけでモーダルの内容も他の内容も一緒にPOSTできると思います。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/10/30 23:40

    kei344様、何とかできました。
    ありがとうございます!

    キャンセル

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

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

関連した質問

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

  • トップ
  • PHPに関する質問
  • モーダルウィンドウのフォームでのPOST、元のFORMの値が消えてしまう。誰か教えてください!