bootstrap stacked modal input - php

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();
}
});
});
});