jQuery AJAXはフォーム変更時に隠しフィールドも送信します

Question

私は今朝このことを探していますが、私を助けてくれるものは何も見つかりませんでした。私はマニュアルでこれを理解することができませんでした...私は本当にどんなjQueryやjavaScriptも書かなかったので、優しくしてください。

ユーザーが入力フィールドを離れるときにデータベースを更新する方法を知ることができました。 :)しかし、私はまた、隠された入力フィールドを送信したい。ここで

は私のフォームは、&スクリプト（私は読みやすいものを維持するためにそれらを残し、この例のように、フォーム要素は、IDと同じ名前を持つ）

<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- 私はに非常に感謝していますです私がAxelから手伝ったのは、スクリプトが自分のチェックボックスを壊してしまったようだ。

最初のフォームはonChange="document.Form.submit()"で送信されました。これはチェックボックスの前に非表示の入力フィールドが必要なため、ボックスがチェックされていない場合の値を設定するためです。

jQueryの部分ではこれはうまくいかなかったので、隠しフィールドを削除して次のスクリプトを使用しました。私がjQueryで全く新しいので、おそらくもっと良い方法ですが、うまくいくようです。あなたがしたい場合には

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

：あなたは自分の変更フィールドプラス（各name属性の終了によって識別される）関連隠されたものを提出し、あなたがこのような何かを行うことができますしたい場合は

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

完全なフォームを送信する - jQueryはこのための関数を持っています：serialize。私は変更されているフィールドに加えて隠しフィールドを送りたい、

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