Связать PHP и запуск действия через JS

310

16 марта 2017, 21:50

Здравствуйте.

Пожалуйста подскажите с какой стороны подступить к решению такой задачи:

Есть конструкция в HTML:

<input type="checkbox" name="1">
<input type="checkbox" name="2">
<input type="checkbox" name="3">
<input type="checkbox" name="4">

Есть массивы в PHP (их конечно можно переименовать):

<? 
 $id_1 = array(1,2,3);
 $id_2 = array(5,6,7);
 $id_3 = array(8,9,10);
 $id_4 = array(11,12,13);
?>

с помощью следующего JS кода при включении двух любых checkbox запускается определеное действие:

$("input[type='checkbox']").change(function(){
var checked = $("input[type='checkbox']:checked").length;
if (checked == 2) {
 ---действие---;
}
});

Как сделать так, чтобы действием стал запуск отдельного кода PHP в котором бы использовались массивы, соответсвующие именам checkbox?

P.s. Поясню для чего все делается. Есть таблица с перечнем банков и условиями их кредитования. Кроме того, созданы массивы в которых записаны переплаты по месяцам по каждому банку (т.е. [0] - переплата по кредиту в первый месяц по данному банку, [1] - во второй и так далее. Хочу сделать так, чтобы по выбору двух банков через checkbox появлялось окно, в котором через google chart построится график с переплатами обоих банков. Как-то так...

Answer 1

$("input[type='checkbox']").change(function(){ 
  var checked = $("input[type='checkbox']:checked"); 
  if (checked.length == 2) { 
    var names = $.map(checked, function(ch){ 
      return $(ch).attr('name'); 
    }); 
     
    // Далее выполняем ajax запрос к php скрипту, куда и передаём names 
    $.ajax({ 
      url : 'https://httpbin.org/post', 
      method : 'post', 
      contentType: "application/json; charset=utf-8", 
      // data : {names: names}, автоматически выполнится $.param, будет names[]=3&names[]=4 
      data : JSON.stringify({names: names}), 
      dataType: 'json', 
      success : function(res){ 
        var form = JSON.parse(res.data); 
        console.log(form.names); 
      } 
    }); 
 
  } 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
 
<input type="checkbox" name="1"> 
<input type="checkbox" name="2"> 
<input type="checkbox" name="3"> 
<input type="checkbox" name="4">

В php вы получите массив ['names'] вида [1, 3] в json теле запроса:

<?php
// Обратите внимание, данные не в форме `$_POST`, а в теле запроса, их нужно распарсить вручную.
$input = json_decode(file_get_contents('php://input'), TRUE);
$names = $input['names'];
// Имитируем ответ от httpbin.org, чтобы не менять js
header('Content-type: application/json; charset=UTF-8');
echo json_encode(['data' => json_encode(['names' => $names])]);
exit();

Чтобы получить данные в массив $_POST нужно отправлять x-www-formurlencoded запрос:

$("input[type='checkbox']").change(function(){ 
  var checked = $("input[type='checkbox']:checked"); 
  if (checked.length == 2) { 
    var names = $.map(checked, function(ch){ 
      return $(ch).attr('name'); 
    }); 
     
    // Далее выполняем ajax запрос к php скрипту, куда и передаём names 
    $.ajax({ 
      url : 'https://httpbin.org/post', 
      method : 'post', 
      data : {names: names}, 
      // data : $.param({names: names}), // это выполнится автоматически 
      success : function(res){ 
        console.log(res.form['names[]']); 
      } 
    }); 
 
  } 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
 
<input type="checkbox" name="1"> 
<input type="checkbox" name="2"> 
<input type="checkbox" name="3"> 
<input type="checkbox" name="4">

PHP в этом случае:

<?php
$names = $_POST['names'];
// Имитируем ответ от httpbin.org, чтобы не менять js
header('Content-type: application/json; charset=UTF-8');
echo json_encode(['form' => ['names[]' => $names]]);
exit();

Answer 2

Используйте ajax. С использованием jQuery.ajax это будет выглядеть, примерно, так:

$.ajax({
    method: "POST",
    url: "../your_file.php",
    data: $('#form').serialize(), // Сериализация формы
    complete: function(data) {
        // Получаем ответ сервера
    },
    error: function(jqXHR, textStatus) {
        // Если при обработке запроса возникла ошибка
    }
});

В PHP получаете данные и обрабатываете их в соответствии с Вашими требованиями.

Документация jQuery.ajax()

Answer 3

Можно так http://codepen.io/keesik/pen/xqLorw

$("input[type='checkbox']").change(function(){
  var checked = $("input[type='checkbox']:checked");
  if (checked.length > 1) {
    var data = [];
    checked.each(function(){
        data.push($(this).attr('name'))
    });
    $.ajax({
      url : '/Путь к скрипту на сервере',
      method : 'get', // или post
      data : 'checked=' + data.join(','), // данные в php скрипте будут достпны в переменной $_REQUEST['checked']. Все выбранные пункты будут перечислены через запятую. 
      success : function(res){
        console.log(res); // ответ от сервера
        alert('Ajax request done');
      }
    })
  }
});

Answer 4

Во время генерации страницы передавайте массивы связанным инпутам в атрибуты data и потом тяните их через js по условию.

В php файле массивы объединяйте в строки, эти строки присваивайте атрибутам data

somewhere in your.php
...
$id1 = implode(',' , array(1,2,3));
...
?>
<input type="checkbox" name="1" data-array="<?=$id1;?>" />
...

var checkTocheck = function(){ 
    var checked = $("input:checked").attr('name'); 
    var url, data; 
    switch(checked){ 
            case '1': 
            case '2': 
            case '3': 
            case '4': 
                url = "4.php" 
            break; 
    } 
    data = $("input:checked").data('array').split(','); 
    $.ajax({ 
        url: url, 
        data: data, 
        success: function(data){ 
            $('body').append(data); 
        } 
    }) 
}; 
 
checkTocheck(); 
 
$("input[type=checkbox]").on("click",checkTocheck);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input type="checkbox" name="1" data-array="1,2,3" /> 
<input type="checkbox" name="2" data-array="5,6,7" /> 
<input type="checkbox" name="3" data-array="8,9,10" /> 
<input type="checkbox" name="4" data-array="11,12,13" /> 
<div id="console"></div>