How to submit checkbox values alongwith existing form data using PHP, jQuery and AJAX(i.e. avoid form reloading after checking any of the checkboxes)? -
i've filter form in smarty template follows:
<form id="view-questions-form" name="user_transactions" action="{$control_url}modules/transactions/view_transactions.php" method="post"> <div class="w50"> <ul> <li> <label>from date</label> <div class="form-element"> <input type="text" class="cal fl-left" id="frmdate" name="from_date" value="{if $from_date}{$from_date}{else}{$today_date}{/if}" maxlength="10"> </div> </li> <li> <label>transaction no.</label> <div class="form-element"> <input type="text" name="transaction_no" id="transaction_no" class="" value="{if $transaction_no}{$transaction_no}{/if}" maxlength="50"> </div> </li> </ul> </div> <div class="w50"> <ul> <li> <label>to date</label> <div class="form-element"> <input type="text" name="to_date" id="todate" class="cal" value="{if $to_date}{$to_date}{else}{$today_date}{/if}" maxlength="10"> </div> </li> <li> <label>discount code</label> <div class="form-element"> <input type="text" name="username" id="username" class=""> </div> </li> </ul> </div> <div class="w50"> <ul> <li> <label>status</label> <div class="form-element"> <select name="transaction_status" id="transaction_status"> <option value="">all</option> <option value="success" {if $transaction_status=='success'} selected="selected" {/if}>success</option> <option value="inprocess" {if $transaction_status=='inprocess'} selected="selected" {/if}>inprocess</option> <option value="cancelled" {if $transaction_status=='cancelled'} selected="selected" {/if}>cancelled</option> <option value="fail" {if $transaction_status=='fail'} selected="selected" {/if}>fail</option> </select> </div> </li> </ul> </div> <div class="fl-right"> <div class="form-element"> <span class="c-bl-btn c-search-btn-another"><input type="submit" name="submit" id="" value="search" onclick="get_user_filter_data(); return false;"></span> </div> </div> </form> exactly below form tag completion i've added 4 checkboxes. code follows:
<div class="trans_menu"> <ul class="trans_menuul"> <li> <a href="#" class="blue_active"> <div> <div class="checkbxd"><input class="custom-check" type="checkbox" name="cancelled" id="cancelled"> </div> <div class="checkbxd_txt">cancelled : {$user_transactions_count.cancelled_transaction_count}</div> </div> </a> </li> <li> <a href="#" class="green"> <div> <div class="checkbxd"><input class="custom-check" type="checkbox" name="success" id="success"></div> <div class="checkbxd_txt">success : {$user_transactions_count.success_transaction_count}</div> </div> </a> </li> <li> <a href="#" class="yellow"> <div> <div class="checkbxd"><input class="custom-check" type="checkbox" name="inprocess" id="inprocess"></div> <div class="checkbxd_txt">inprocess : {$user_transactions_count.inprocess_transaction_count}</div> </div> </a> </li> <li> <a href="#" class="red"> <div> <div class="checkbxd"><input class="custom-check" type="checkbox" name="failed" id="failed"></div> <div class="checkbxd_txt">failed : {$user_transactions_count.failed_transaction_count}</div> </div> </a> </li> </ul> </div> for better understanding of scenario find the screenshot of above html follows: 
by submitting filter form clicking on submit button i'm providing search criteria means of values entered/selected user in above filter form. data matching given search criteria fetched , displayed grid. till here works fine. php code follows:
<?php /*below function call fetches matching data given search criteria*/ list( $grid_data, $transaction_count_data, $sort_status, $sort_link_array, $pag_link_array ) = get_all_user_transactions($request,$cur_page, $sort_col_id ,$desc_or_asc, $where_str, $query_string); /*below 2 statements used assign fetched data smarty template*/ $smarty->assign('user_transactions', $grid_data); $smarty->assign('user_transactions_count', $transaction_count_data); ?> now when user first time comes page there noting in grid display. he/she provides filter criteria , submits form. matched data fetched , displayed grid below checkboxes.
now requirement after matching records fetched , displayed grid, if user checks 1 of check boxes (say checkbox title "inprocess"). in grid transactions status "inprocess" should display.
and these transactions should amongst transactions searched user providing search criteria submitting form. if user selects 1 or more checkboxes matched data should display amongst fetched data , when user deselects of checkboxes matched data displayed should display.
that in short, think can achieved submitting selected checkbox data along filter criteria form data using jquery , ajax. form should submitted , desired data should displayed without reloading form. after getting necessary data can manage further things on own. can me in submitting data using jquery , ajax?
you can , handle values of check boxes individually easiest option wrap inputs in 1 element (you not need either i'm making life easier myself here)
<html> <div id="mywrapper"> <form id="view-questions-form"> ...... form elements here </form> <div class="trans_menu"> ...... checkboxes here </div> </div> <html> javascript submit
window.myproductspage = {}; myproductspage.preparecheckboxes() = function() { var $wrapper = $('#mywrapper'); $wrapper.find('.custom-check').on('click',function(event) { event.preventdefault(); var searchstring = $wrapper.serialize(); var url = '/submit/to/here?' + searchstring; $.ajax({ url : url, datatype: 'json', success : function (response) { // alert('yay!!, stuff here'); }, error: function( response ) { // alert('noooo'); } }); }); } $(document).ready(function () { myproductspage.preparecheckboxes(); }); 
Comments
Post a Comment