Colorbox and ajax, send and receive data

Question

I have a website that needs to query a database, see the results in colorbox (or a bootstrap modal will work too), select data from the results, and send those selections back to the main page to populate a bootstrap text area.

Here's what I have so far.

html: Form submit to colorbox

<div class="form-group col-sm-4">
    <button type="button" id="pairsub" class="btn-sm-primary form-control"
     data-toggle="modal" data-target="#pairFind" onclick="submitForm">Pair Find</button>
</div>

colorbox JS:

 $(document).ready(function(){
     $("#pairsub").click(function (){
         $.post("pairfind.php",
              $("#form1").serialize(),
              function(data){
                 $.fn.colorbox({
                 html: data,
                 open: true,
                 iframe: false,
                 width: "500",
                 height: "500px",
                });
              },
             "html");
          });
      });

html textarea to receive selected data:

<div class="form-group col-md-8">
     <textara class="form-control" name="IID" id="IID2">/textarea>
</div>

Submitting the form and getting the colorbox works perfectly. Right now, the "submit" button with the colorbox results sends the information back by php echos and refreshes the mainpage. I want to send the selected data back to the mainpage without having to refresh it. Ideas?

Answer 1

So I gave up on colorbox and when with pure bootstrap. This code works like a charm.

$(document).ready(function() {   
       $('#formbtn').click(function(e) {
            $.ajax({
                url: 'pairFind.php',
                type: 'POST',
                data: $('#form1').serialize(),
                async:true,
          beforeSend: function () {
             $('#spin').modal('show');
             }
          success: function(data) {
             $('#pairFr .modal-body').html(data);
             $('#pairFr').modal('show');
             $('#spin').modal('hide');
             }
        });
    });  
});