I’m working on web application project (clinic & laboratory) it’s all about sending tests. i used code below to select the test category first then the test name which related in this category. but when i moving to another category. the old one with selected input will reset . who to save them temporary before sending it to data base? i’m still newbie at ajax.
<?php // Dashboard page include('CONFIG.PHP'); $query = "SELECT * FROM `test_categories` ORDER BY `test_categories`.`CATEGORY_ID` DESC"; $statement = $connect->prepare($query); $statement->execute(); $result = $statement->fetchAll(); foreach($result as $row) { ?> <div class=""> <label> <input type="checkbox" class="common_selector category" value="<?php echo $row['CATEGORY_NAME']; ?>"> <?php echo $row['CATEGORY_NAME']; ?></label> </div> <?php } ?> =============================================== <script> $(document).ready(function(){ filter_data(); function filter_data() { $('.filter_data').html('<div id="loading" style="" ></div>'); var action = 'fetch_data'; var brand = get_filter('category'); $.ajax({ url:"FUNCTIONS.PHP", method:"POST", data:{action:action, category:category}, success:function(data){ $('.filter_data').html(data); } }); } function get_filter(class_name) { var filter = []; $('.'+class_name+':checked').each(function(){ filter.push($(this).val()); }); return filter; } $('.common_selector').click(function(){ $('input').not(this).prop('checked', false); filter_data(); }); }); </script> ========================================== // FUNCTIONS PAGE if(isset($_POST["action"])) { include 'CONFIG.PHP'; $query = ""; if(isset($_POST["category"])) { $category_filter = implode("','", $_POST["category"]); $query .= " SELECT * FROM `tests` WHERE TEST_CATEGORY = ('".$category_filter."') ORDER BY `tests`.`TEST_ID` DESC "; } $statement = $connect->prepare($query); $statement->execute(); $result = $statement->fetchAll(); $total_row = $statement->rowCount(); $output = ''; if($total_row > 0) { foreach($result as $row) { $output .= " <div class='TEST'> <input id='toggle". $row['TEST_ID']."' name='REQUESTED_TEST[]' type='checkbox' value='" . $row['TEST_NAME'] . "'> <label for='toggle". $row['TEST_ID']."'>" . $row['TEST_NAME'] . "</label> </div> "; } } else { $output = '<h3 class="text-center">'. LANG('NO_DATA_FOUND').'</h3>'; } echo $output; }
Advertisement
Answer
As per your requirement you have to do below changes.
In function file add onchange event
<input class='selected_test' id='toggle". $row['TEST_ID']."' name='REQUESTED_TEST[]' type='checkbox' value='toggle" . $row['TEST_ID'] . "' onchange="updatetests()">
In Dashboard file add that javascript function
function updatetests(){ var oldval = $('input[name=seltests]').val(); var seltests = []; if( oldval != "" ) { seltests = $('input[name=seltests]').val().split(','); } jQuery.each( jQuery('.selected_test:checked'), function( i, val ) { seltests.push($(this).val()); }); seltests = seltests.filter((v, i, a) => a.indexOf(v) === i); $('input[name=seltests]').val( seltests.join(",") ); }