bootstrap stacked modal input

Question

I create two modal window. First is contains some list, and have input field for searching. My Idea is on next modal window to show results of searching. How I can use value from input in first modal and run in query of second modal window ?

<!--Modal cal list-->
<div id="modalCal" class="modal" role="dialog">
  <div class="modal-dialog" style="overflow-y: scroll; max-height: 85%;margin-top: 50px;margin-bottom: 50px;" >
    <!--Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
        <h4 class="modal-title">Lista CAL-ova</h4>
        <input type="text" placeholder="cal x color" name="cal" id="cal" />
        <button class="btn" data-toggle="modal" href="#src">Pretraga</button>
      </div>
      <div class="modal-body">
        <?php
        $result = $objCal->ListCal();
        echo '<ul class="list-group">';
        while($row = mssql_fetch_array($result)) {
          echo '<li id="cals" class="list-group-item">'.$row['cal'].'</li>';
        }
        echo '</ul>';
        ?>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<!--Modal cal list-->
<div id="src" class="modal" role="dialog">
  <div class="modal-dialog" style="overflow-y: scroll; max-height: 85%;margin-top: 50px;margin-bottom: 50px;" >
    <!--Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
        <h4 class="modal-title">Lista CAL-ova</h4>
      <div class="modal-body">
        <?php
        $result = $objCal->FindCalByName('input from first modal');
        echo '<ul class="list-group">';
        while($row = mssql_fetch_array($result)) {
          echo '<li class="list-group-item">'.$row['cal'].'</li>';
        }
        echo '</ul>';
        ?>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Answer 1

You create file modal2.php like:

<?php $calName = $_GET['input_by_first_modal']; ?>
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
    <h4 class="modal-title">Lista CAL-ova</h4>
    <input type="text" placeholder="cal x color" name="cal" />
    <button class="btn" data-toggle="modal" href="#pretraga">Pretraga</button>
</div>
<div class="modal-body">
    <ul class="list-group">
    <?php
    $result = $objCal->FindCalByName($calName);
    while($row = mssql_fetch_array($result)) {
      echo '<li class="list-group-item">'.$row['cal'].'</li>';
    }
    ?>
    </ul>
 </div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>

JS in modal1 page should be something like this

var $modal = $('#src');

$('#modalCal').on('click', '#your-ul > li', function(){
  var name = $(this).val();

  setTimeout(function(){
     $modal.load('modal2.php?input_by_first_modal='+name, '', function(){
      $modal.modal();
    });
  }, 1000);
});

Answer 2

Thanks everyone on help. I found better solution. Instead to open two modal window, with js I made to search directly inside ul li elements.

$(document).ready(function(){
$("#cal").keyup(function(){

    // Retrieve the input field text and reset the count to zero
    var filter = $(this).val(), count = 0;

    // Loop through the comment list
    $("ul li").each(function(){

        // If the list item does not contain the text phrase fade it out
        if ($(this).text().search(new RegExp(filter, "i")) < 0) {
            $(this).fadeOut();

        } 
    });
});

});