jQuery AJAX schicken auch versteckte Felder auf Formularänderung

Question

Ich habe den ganzen Morgen nach diesem gesucht, aber fand nichts, das mir helfen könnte. Ich konnte das mit dem Handbuch nicht herausfinden ... Ich habe noch nie wirklich jQuery oder javaScript geschrieben, also sei bitte sanft.

Ich konnte herausfinden, wie man die Datenbank aktualisiert, wenn der Benutzer das Eingabefeld verlässt. :) Aber ich möchte auch die versteckten Eingabefelder senden.

Hier ist meine Form & Skript (die Formular-Elemente den gleichen Namen wie ID haben so für dieses Beispiel, das ich ihnen Dinge zu halten lesbar links aus)

<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- ich sehr dankbar bin zu die Hilfe, die ich von Axel bekam, aber das Skript schien meine Checkboxen zu durchbrechen.

Das ursprüngliche Formular wurde von onChange="document.Form.submit()" eingereicht, deshalb benötigte ich die ausgeblendeten Eingabefelder vor den Kontrollkästchen, um den Wert festzulegen, falls das Kontrollkästchen deaktiviert war.

Jetzt mit dem jQuery Teil hat das nicht funktioniert, also habe ich die versteckten Felder entfernt und das folgende Skript verwenden. Da ich bei jQuery völlig neu bin, gibt es wahrscheinlich einen besseren Weg, aber es scheint zu funktionieren.

$('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

Falls Sie nur Ihre geänderten Felder einreichen und die damit verbundene (nach Ablauf der jeweiligen Namensattribut identifiziert) versteckt diejenigen, können Sie etwas tun:

$('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() {} 
    }) 
}); 

Falls Sie wollen um das vollständige Formular zu senden - jQuery hat eine Funktion dafür: serialize. Sie können auch die native Methode FormData verwenden, die in neueren Browsern funktioniert:

// 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() {} 
    }) 
});