如何使用PHP,jQuery和AJAX提交复选框值以及现有表单数据(即在检查任何复选框后避免表单重新加载)？

Question

我在智能模板中有一个过滤器表单,如下所示:

<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>    

正好在这个表单标签完成之下,我添加了四个复选框.它的代码如下:

<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>

为了更好地理解该场景,请按以下方式查找上述HTML的屏幕截图:

通过单击提交按钮提交过滤器表单,我通过上述过滤器表单中用户输入/选择的值提供一些搜索条件.获取与给定搜索条件匹配的数据并将其显示到网格中.直到这里一切正常.它的PHP代码如下:

<?php
/*Below is the function call which fetches all the matching data with the 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 two statements are used to assign the fetched data to smarty template*/
$smarty->assign('user_transactions', $grid_data);
$smarty->assign('user_transactions_count', $transaction_count_data);
?>

现在,当用户第一次来到这个页面时,网格中就会显示出来.然后他/她提供一些过滤标准并提交表格.然后获取匹配的数据并将其显示在复选框下方的网格中.

现在我的要求是在所有匹配记录被提取并显示到网格中之后,如果用户选中任何一个复选框(比如标题为"Inprocess"的复选框).然后在网格中只显示状态为"Inprocess"的事务.

并且这些交易应该是用户通过提交表单之前提供搜索条件而搜索的交易.如果用户选择一个或多个复选框,则所有匹配的数据应显示在所获取的数据中,并且当用户取消选择所有复选框时,则最初显示的最初匹配的数据应该显示.

简而言之,我认为这可以通过使用jQuery和AJAX将选定的复选框数据与过滤条件表单数据一起提交来实现.这样就可以提交表单并显示所需的数据而无需重新加载表单.获得所有必要的数据后,我可以自己管理更多的事情.任何人都可以帮助我使用jQuery和AJAX一起提交所有数据吗？

Answer 1

您可以单独获取和处理复选框的值，但最简单的选择是将您的输入包装在一个元素中（您也不一定需要这样做，但我在这里让自己的生活更轻松）

<html>
  <div id="myWrapper">
    <form id="view-questions-form">
      ...... Form elements here
    </form>
    <div class="trans_menu">
      ...... Some checkboxes here
    </div>
  </div>
<html>

JavaScript 提交

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!!, do some stuff here');
            },
            error: function( response ) {
                // alert('noooo');
            }
        });
    });
}

$(document).ready(function () {
    myProductsPage.prepareCheckboxes();
});