Store - save - fetch/retreive array value (php)

im having a hard time of thinking how am i going to save the values taken from the checkbox (came from "modalform"). i have 2 forms here. my "mainform" and "modalform".

this codes are similar to my program, i just replace the values.

my program works like this. i have searchbar before this searching unique id and after searching it, their details will be loaded here.

1. if you click the textbox, modal will pop up containing checkboxes. if 1 checkbox is check, its label beside it will be the one to be shown on the textbox but if 2 or more checkbox was checked, a word "multiple" will bo shown in the UI but the value will be sent to the database

in my case here, instead of label, value is the one showing inside the textbox.

2. can u help me how am i going to save the array that i used and store in the database and then how am i going to fetch their values once it was loaded again.

my working fiddle: http://ift.tt/2ieb2iY

im having a hard time here because it is 2 form

testing.php

<form method="post" name="mainform" action="">
    <label>Sports</label>
    <a href="#modal" id="done"> <!-- when the input textbox was clicked, modal will pop up -->
        <input disabled type="text" id="test" name="test" placeholder="test" value="">
        <input class="hb_button3" type="submit" id="modalbutton" value="save"> <!-- once submit value taken on the checkbox will be save to the system database -->
    </a>
</form>

<form method="post" name="modalForm" id="modalForm" action="testing.php">
    <div class="modalwrapper" id="modal">   <!-- modal -->
            <div class="modalcontainer">    
                <div class="modalcol1">
                    <label>Basketball </label>
                    <input type="checkbox" id="test_modal[]" name="test_modal[]" value="1">
                    <div class="clear"></div>
                    <label>Baseball </label>
                    <input type="checkbox" id="test_modal[]"  name="test_modal[]" value="2">
                    <div class="clear"></div>
                    <label>Soccer </label>
                    <input type="checkbox" id="test_modal[]" name="test_modal[]" value="3">
                    <div class="clear"></div>
                    <label>Volleyball </label>
                    <input type="checkbox" id="test_modal[]" name="test_modal[]" value="4">
                    <div class="clear"></div>
                    <label>DOTA :)</label>
                    <input type="checkbox" id="test_modal[]" name="test_modal[]" value="5">
                    <div class="clear"></div>

                    <div class="savebutton">
                        <input class="btn1" id="submit" type="submit" value="Submit"/>
                    </div>
                </div>
            </div>
        <div class="overlay"></div>
    </div>      
</form>

here is my styles.css

/* modal layout */
    .modalwrapper {
        top: 0;
        left: 0;
        opacity: 0;
        position: absolute;
        visibility: hidden;
        box-shadow: 0 3px 7px rgba(0,0,0,.25);
        box-sizing: border-box;
        transition: all .4s ease-in-out;
        -webkit-transition: all .4s ease-in-out;
        -moz-transition: all .4s ease-in-out;
    }

    .modalwrapper:target {
        opacity: 1;
        visibility: visible
    }

    .overlay {
        background-color: #000;
        background: rgba(0,0,0,.8);
        height: 100%;
        left: 0;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1;
    }

    .modalcontainer {
        display: table;
        background-color: #777;
        position: relative;
        z-index: 100;
        color: #fff;
        padding: 5px;
    }

    .modalcol1 { display: table-cell; }

    .clear { clear: both; }

    .modalwrapper input[type=checkbox] {
        float: right;
        margin-right: 20px;
    }

    .savebutton input[type=submit] {
        float: right;
        background-color: maroon;
        color: #fff;
        border: none;
        padding: 5px 10px;
        margin-top: 5px;
        margin-right: 20px;
    }
    /* modal layout ends here */

my javascript code

$(document).ready(function(){
        $("#done").click(function(e) {
                    // alert('ok');
                 $("#modal").fadeIn();
                // e.preventDefault();
                 });
            $("#submit").click(function(e) {

                var checked = [];
                i=0;
                temp=""
        $("input[name='test_modal[]']:checked").each(function ()
        {   temp=$(this).val();
            i++;
           checked.push($(this).val());
        });
        if (i==1)
              $("#test").val(temp);        
          else if (i>1)
              $("#test").val('multiple');
              else if (i==0)
              $("#test").val('nothing');
                         $("#modal").fadeOut();  
                        // alert($("#do").val())
            e.preventDefault();
        });
    });

Hope you can help me guys. if you guys can suggest to replace my javascript by using any php statement like if condition, i will try to test it if it works well. thanks and many thanks. Credits to: dimis283