Как отправить значения флажка вместе с существующими данными формы с помощью PHP, jQuery и AJAX (т.е. избежать перезагрузки формы после проверки любого из флажков)?

У меня есть форма фильтра в умном шаблоне следующим образом:

<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);
?>

Теперь, когда пользователь впервые заходит на эту страницу, в сетке отображается пометка. Затем он/она предоставляет некоторые критерии фильтрации и отправляет форму. Затем совпадающие данные извлекаются и отображаются в сетке под флажками.

Теперь мое требование состоит в том, что после того, как все совпадающие записи будут выбраны и отображены в сетке, если пользователь установит какой-либо из флажков (скажем, флажок с заголовком «В процессе»). Тогда в сетке должны отображаться только транзакции со статусом «В обработке».

И эти транзакции должны быть среди транзакций, которые пользователь искал, предварительно указав критерии поиска, отправив форму. Если пользователь устанавливает один или несколько флажков, то все совпадающие данные должны отображаться среди извлеченных данных, а когда пользователь снимает все флажки, должны отображаться первоначально совпадающие данные, которые отображались изначально.

Короче говоря, я думаю, что это может быть достигнуто путем отправки выбранных данных флажка вместе с данными формы критериев фильтра вместе с использованием jQuery и AJAX. Так что форма должна быть отправлена, и нужные данные должны отображаться без перезагрузки формы. После получения всех необходимых данных я могу управлять дальнейшими делами самостоятельно. Может ли кто-нибудь помочь мне отправить все данные вместе с помощью jQuery и AJAX?


person PHPLover    schedule 31.01.2014    source источник
comment
Короче скрипка пожалуйста..   -  person Deepak Ingole    schedule 31.01.2014


Ответы (3)


Вы можете получать и обрабатывать значения флажков по отдельности, но самый простой вариант - обернуть ваши входные данные в один элемент (вам это тоже не обязательно нужно, но я облегчаю себе жизнь здесь)

<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();
});
person kali    schedule 03.02.2014
comment
разве не должно быть function() { вместо function {? - person Oliver Ni; 09.02.2014

Это будет работать для вас, я добавил больше переменных для вашего понимания, вы можете уменьшить использование переменных, если хотите

Это ваш код 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);
person Sundar    schedule 08.02.2014

Вы можете использовать JavaScript для отправки формы и использовать return false;, если вы не хотите перезагружать страницу/форму. return false; запрещает форме выполнять действие по умолчанию.

Если вы хотите использовать jQuery, вы можете передать e в качестве параметра анонимной функции и выполнить e.preventDefault(). Это приведет к тому же результату, что и return false;.

Дополнительные сведения о return false; и e.preventDefault() см. в этом вопросе.

person Oliver Ni    schedule 09.02.2014