如何使用 PHP、jQuery 和 AJAX 提交复选框值以及现有表单数据（即避免在选中任何复选框后重新加载表单）？答案

【问题标题】：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)?如何使用 PHP、jQuery 和 AJAX 提交复选框值以及现有表单数据（即避免在选中任何复选框后重新加载表单）？
【发布时间】：2014-01-31 15:57:07
【问题描述】：

我在 smarty 模板中有一个过滤表单，如下所示：

<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”的复选框），则在获取所有匹配记录并将其显示到网格中之后。然后在网格中只显示状态为“进行中”的交易。

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

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

【问题讨论】：

请简而言之..

标签： php jquery forms smarty ajaxform

【解决方案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();
});

【讨论】：

不应该是function() {而不是function {吗？

【解决方案2】：

这对你有用，我添加了更多变量以便你理解，如果你愿意，你可以减少变量的使用

这是您的 jquery 代码。 e.preventDefault() 将保护表单提交/页面重定向

$(document).ready(function () {

    //you submit button click handler - please change the selector as you implemented
    $('#submit-button').click(function(e){

        //prevent the form changes
        e.preventDefault();

        //from date
        var from_date1 = $('#frmDate').val();

        //transaction number
        var transaction_no1 = $('#transaction_no').val();

        //to date
        var to_date1 = $('#toDate').val();

        //username
        var userName1 = $('#userName').val();

        //declare a variable
        var checkbox_selection = '';

        //find the check box selection
        if($('#cancelled').prop('checked'))
        {
            //set the value
            checkbox_selection = 'cancelled';
        }
        else if($('#success').prop('checked'))
        {
            //set the value
            checkbox_selection = 'success';
        }
        else if($('#inprocess').prop('checked'))
        {
            //set the value
            checkbox_selection = 'inprocess';

        }
        else if($('#failed').prop('checked'))
        {
            //set the value
            checkbox_selection = 'failed';        
        }


        //use ajax to post the content
        $.ajax({
            type: "POST",
            dataType:'json',
            url: "post_url_location.php", //change your post location URL
            data: {from_date:from_date1,
                   transaction_no:transaction_no1,
                   to_date:to_date1,
                   userName:userName1,
                   checkbox_select:checkbox_selection},
            success: function(response)
            {
                alert('submit success');

            },
            error: function(response)
            {
                alert('submit error');
            }
        }); 

    });

});

如果您想从流程文件中返回任何成功或失败，您可以使用 json 数据

<?php 
    //variable array
    $data = array();
    $data['status'] = TRUE;
    $data['msg'] = 'success/failure';

    //return json
    echo json_encode($data);

【讨论】：

【解决方案3】：

如果您不想重新加载页面/表单，您可以使用 JavaScript 提交表单并使用return false;。 return false; 阻止表单执行默认操作。

如果你想使用 jQuery，你可以将e 作为参数传递给匿名函数并执行e.preventDefault()。这将实现与return false; 相同的效果。

有关return false; 和e.preventDefault() 的更多信息，请查看this question。

【讨论】：