Essence of the question. There is a div that is based on an ajax request. Form is sent with parameters and on the basis of them I get the answer - Form with checkboxes and "Save" button

index.php:

<div class="1"> <form id="get_tasks_form"> <input type="hidden" name="obname" value="Name1"> <input type="hidden" name="obid" value="333"> <div class="paddingBottom"> <input type="button" class="btn btn-default" id="btnObject333" value="Name1"> </div> </form> </div> <div id="objectinfo"> <p>DIV куда выводится ajax</p> </div>

ajax-button:

 $( document ).ready(function() { $('#btnObject333').click( function(){ sendAjaxForm('objectinfo', 'get_tasks_form', '/core/ajax/ajax_monitoring.php'); return false; }); });

Function sendAjaxForm-

 function sendAjaxForm(result_form, ajax_form, url) { jQuery.ajax({ url: url, //url страницы (action_ajax_form.php) type: "POST", //метод отправки dataType: "html", //формат данных data: jQuery("#"+ajax_form).serialize(), // Сеарилизуем объект beforeSend: funcBefore, success: function(response) { //Данные отправлены успешно result = jQuery.parseJSON(response); document.getElementById(result_form).innerHTML = result; }, error: function(response) { // Данные не отправлены document.getElementById(result_form).innerHTML = "Ошибка. Данные не отправленны."; } });

The following form returns to my Ajax request:

 <form method="POST" id="savePform"> <div class="form-group"> <input type="checkbox" name="pz" id="task_pz" value="1" checked=""> <label class="bg-success" for="task_pz">Пояснительная Записка</label> </div> <div class="form-group"> <input type="checkbox" name="pl" id="task_pl" value="1" checked=""> <label class="bg-success" for="task_pl">Планы</label> </div> <div class="form-group"> <input type="checkbox" name="fs" id="task_fs" value="1"> <labelfor="task_fs">Фасады</labelfor="task_fs"> </div> <div class="form-group"> <input type="checkbox" name="razrez" id="task_razrez" value="1" checked=""> <label class="bg-success" for="task_razrez">Разрезы</label> </div> <div class="form-group"> <input type="checkbox" name="boxnotuse" id="notuseid" class="notuse" value="1"> <label class="btn btn-danger btn-sm" for="notuseid">Том не нужен</label> </div> <input name="task_id" type="hidden" value="1817"> <input name="pos_num" type="hidden" value="3"> <input name="object_id" type="hidden" value="79"> <div class="form-group text-right"> <input type="submit" class="btn btn-success" id="btnsaveP" value="Сохранить"> </div> </form>

Next, in the same answer, I write a handler for the "Save" button by analogy with the first button: -

  $( document ).ready(function() { $('#btnsaveP').click( function(){ sendAjaxForm('objectinfo', 'savePform', '/core/ajax/ajax_save.php'); return false; }); });

I expect <div class="objectinfo"> be replaced by the answer from ajax_save.php , but when you click it, the page index.php just ajax_save.php . How to correctly implement the second ajax request to save changes to checkboxes?

    2 answers 2

    objectinfo is a class , not an id .

     function sendAjaxForm(resultSelector, ajaxFormId, url) { jQuery.ajax({ url: url, //url страницы (action_ajax_form.php) type: "POST", //метод отправки dataType: "html", //формат данных data: jQuery("#" + ajaxFormId).serialize(), // Сеарилизуем объект beforeSend: funcBefore, success: function(response) { //Данные отправлены успешно result = jQuery.parseJSON(response); document.querySelector(resultSelector).innerHTML = result; }, error: function(response) { // Данные не отправлены document.querySelector(resultSelector).innerHTML = "Ошибка. Данные не отправленны."; } }); } sendAjaxForm('.objectinfo', 'get_tasks_form', '/core/ajax/ajax_monitoring.php');

    Not to mention that the html question does not contain an element with id="btnObject0" .

    • I am extremely sorry for misleading. Of course, this id="objectinfo" This is what I made here while I was mistaken. All corrected. And I also corrected the button) - Nikolay Gabaraev

    In general, the problem was in my carelessness, and adding the handler of the '#btnsaveP' button to the wrong place. Eventually. Button handler looks like:

     $(document).on("click" , "#btnsaveP", function(e) { sendAjaxForm1('objectinfo', 'savePform', '/core/ajax/ajax_mon_save.php'); });

    And added to the file with js-code, which is loaded when accessing index.php, and not in the ajax response, as it was before.