За последние 24 часа нас посетили 22193 программиста и 1158 роботов. Сейчас ищут 729 программистов ...

Запись в БД при нажатие на checkbox

Тема в разделе "JavaScript и AJAX", создана пользователем sokol86922, 18 окт 2017.

Метки:
  1. sokol86922

    sokol86922 Активный пользователь

    С нами с:
    3 мар 2017
    Сообщения:
    46
    Симпатии:
    2
    Подскажите плиз как записать данные из value если отметили checkbox или на оборот если сняли галочку.
    Но не через кнопку submit , а с помощью JavaScript/jquery не перезагружая страницу .


    Вот есть пример, но без записи в БД и он использует все checkbox которые есть на стр и если checkbox отмечен все равно сразу не видит и пишет что выключен....
    Подскажите более короткий вариант чем этот с записью в БД. Спасибо

    <input type="checkbox" name="cb1" id="check1" value="qwerty1"/>
    <input type="checkbox" name="cb2" id="check2" value="qwerty2" />

    Код (Javascript):
    1. var boxes = $("input:checkbox");
    2. $("input:checkbox").on("change", function(){
    3.   var theArray = new Array();
    4.   for (var i=0;i<boxes.length;i++) {
    5.    var box = boxes[i];
    6.    if ($(box).prop('checked')) {
    7.       theArray[theArray.length] = $(box).val();
    8.    }
    9. }
    10.   showValues(theArray);
    11. });
    12.  
    13. var showValues = function(array) {
    14.   var text = "";
    15.   if(array.length == 0) text += "чекбокс не выбран";
    16.   for(var i = 0; i < array.length; i++) {
    17.      text += "Чекбокс "+array[i]+" выбран!<br />";
    18.    }
    19.   $(".values").html(text);
    20. }
     
    #1 sokol86922, 18 окт 2017
  2. ADSoft

    ADSoft Старожил

    С нами с:
    12 мар 2007
    Сообщения:
    3.825
    Симпатии:
    738
    Адрес:
    Татарстан
    как то так
    HTML:
    1. <input type="checkbox" value="1" data-id="тут ид какой надо">
    Код (Javascript):
    1. $("input:checkbox").on("change", function(){
    2.   var val = ($(this).prop('checked'));
    3.   var id = ($(this).data('id'))  
    4.   ajax(..... шлем куда надо id элемента и его значение)
    5. })
     
    #2 ADSoft, 18 окт 2017
  3. sokol86922

    sokol86922 Активный пользователь

    С нами с:
    3 мар 2017
    Сообщения:
    46
    Симпатии:
    2
    Спасибо я немного разобрался.
    у меня получилось обработать в php в другом файле.
    Если пишу в том файле где скрипт ajax то не выполняется. Подскажите возможно выполнить запрос в этом же файле чтобы не плодить еще доп. файлы. и напр вывести надпись "выполнено"

    вот так работает с доп.файлом
    Код (Javascript):
    1.       $.ajax({
    2.             type: "POST",
    3.             url: "result.php",
    4.             data: $('#ajaxForm').serialize(),
    5.             cache:false,
    6.             success: function(html){
    7.                 alert(html);
    8.  
    9.             }
    10.         });
    11.    
    и еще плиз как от сюда var id = ($(this).data('id')) передать id в php скрипт для обработки ...
    сори я только начал с ajax разбираться. C php нет проблем
     
    #3 sokol86922, 18 окт 2017
  4. Каменьвогород

    Каменьвогород Новичок

    С нами с:
    19 окт 2017
    Сообщения:
    12
    Симпатии:
    1
    Создайте папку для ajax и в ней храните все свои ajax.php файлы.

    Сам php код будет выглядеть как-то так (ajax.php):

    Код (Text):
    1. $id= $_POST['id'];
    2. $value= $_POST['value'];
    3.  
    4. ...
    5. проводим необходимые манипуляции с id и value
    6. ...
    7.  
    8. if('что-то там...') {
    9.     //когда у нас ошибка
    10.     echo json_encode(array('ok' => false, 'msg' => 'Что-то пошло не так'));
    11. } else {
    12.     //когда у нас все хорошо
    13.     echo json_encode(array('ok' => true, 'msg' => 'Все отлично'));
    14. }

    Сам ajax-запрос
    Код (Text):
    1.     $("input:checkbox").on("change", function () {
    2.  
    3.         var id, val, data;
    4.  
    5.         id = $(this).data('id');
    6.         val = $(this).val();
    7.  
    8.         data = {
    9.             id: id,
    10.             value: val
    11.         };
    12.  
    13.         $.ajax({
    14.             type: "post", //в каком формате отправляем данные
    15.             dataType: "json", //в каком формате принимаем данные
    16.             url: "ajax/ajax.php", //в данном случае url будет выглядеть так: http://домен/папка ajax/файл ajax.php
    17.             data: data, //передаваемые данные
    18.             success: function(response) { //ответ от ajax.php
    19.  
    20.                 if(typeof response === 'undefined') { //если пришел ответ, который мы не можем прочесть
    21.                     console.error('Скрипт не работает!');
    22.                 } else {
    23.                     if(response.ok) {//если все хорошо
    24.                         alert(response.msg);
    25.                     } else { //если есть ошибки
    26.                         alert(response.msg);
    27.                     }
    28.                 }
    29.  
    30.             }
    31.         });
    32.  
    33.     });
     
    #4 Каменьвогород, 22 окт 2017
(Вы должны войти или зарегистрироваться, чтобы разместить сообщение.)