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

現在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をこのページで受け取るのか違うページで受け取るかが分かっていません
どういう形にすればよいか教えていただければありがたいです。
スイマセン...

kei344

2016/10/30 11:18

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

kei344

2016/10/30 11:58

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