jQuery AJAX также присылайте скрытые поля при изменении формы

Question

Я искал это все утро, но не нашел ничего, что могло бы мне помочь. Я не мог понять это с помощью руководства ... Я никогда не писал jQuery или javaScript, поэтому, пожалуйста, будьте осторожны.

Мне удалось выяснить, как обновить базу данных, когда пользователь покидает поле ввода. :) Но я также хочу отправить скрытые поля ввода.

Вот моя форма & скрипт (элементы формы имеет такое же имя, как идентификатор, так для этого примера я оставил их, чтобы держать вещи читаемыми)

<form id="Form"> 
    <input id='idA01-01-2017' type='hidden' value="1234"/> 
    <input id='idB01-01-2017' type='hidden' value="5678"/> 

    <input id='fromA01-01-2017' type='text' value=""/> 
    <input id='toA01-01-2017' type='text' value=""/> 
    <input id='fromB01-01-2017' type='text' value=""/> 
    <input id='toA01-01-2017' type='text' value=""/> 
    <input id="checkA01-01-2017" type="checkbox" value="1"> 
    <input id="checkB01-01-2017" type="checkbox" value="1"> 
    <input id='suggestion01-01-2017' type='text' value=""/> 
</form> 


<script> 
    $('input, select', $('#Form')).change(function(){ 
     var dataFields = $(this).attr('id')+$(this).val(); 
    $.ajax({ 
      url: 'update.php', 
      type: 'POST', 
      data: dataFields, 
      dataType: "json", 
      success: function() {} 
     }) 
    }); 
</script> 

-edit- Я очень благодарен помощь, которую я получил от Акселя, но сценарий, казалось, сломал мои флажки.

Исходная форма была отправлена ​​onChange="document.Form.submit()". Из-за этого мне нужно было спрятать поля ввода перед флажками, чтобы установить значение на случай, если поле не было снято.

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

$('input, select', $('#Form')).change(function(){ 

    var FORMdata = {}, 

    // get current name 
    currName = $(this).attr('name'), 
    // extract the date 
    sDate = currName.substr(currName.length - 10); 

    //check if a checkbox is changed 
    if (currName.indexOf("checker") >= 0){ 
     if($(this).is(":checked")) { 
      FORMdata[currName] = '1'; 
     } 
     else { 
      FORMdata[currName] = '0'; 
     } 
    }else{ 
     // no checkbox was changed so it was a input field 
     // add current field to data object 
     FORMdata[currName] = $(this).val(); 
     } 

    $.ajax({ 
      url: 'update.php', 
      type: 'POST', 
      data: FORMdata, 
      success: function() { 
      } 
     }) 
    }); 

Answer 1

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

$('input, select').on('change, input', function(){ 
    var data = {}, 
     // get current name 
     currName = $(this).attr('name'), 
     // extract the date 
     sDate = currName.substr(currName.length - 10); 

    // add current field to data object 
    data[currName] = $(this).val(); 

    // loop over all hidden fields ending with the same 
    // identifier (date) add them to data 
    $('#Form').find("input[type='hidden'][name$='"+ sDate+"']").each(function(){ 
     data[$(this).attr('name')] = $(this).val(); 
    }); 
    $.ajax({ 
     url: 'update.php', 
     type: 'POST', 
     data: data, 
     dataType: "json", 
     success: function() {} 
    }) 
}); 

В случае, если вы хотите для отправки полной формы - у jQuery есть функция для этого: serialize. Вы также можете использовать нативный метод FormData, который работает в последних версиях браузеров:

// also use input event to handle pasting of data 
$('input, select').on('change, input', function(){ 
    // jQuery way (strings only) 
    var formData = $('#Form').serialize(); 
    // or native javascript (older browsers not supported) 
    // var formData = new FormData(document.getElementById("Form")); 
    $.ajax({ 
     url: 'update.php', 
     type: 'POST', 
     data: formData, 
     dataType: "json", 
     success: function() {} 
    }) 
});