JSのhtmlフォームデータを取得

Question

些細なようなにおいがしますが、それは分かりません。私は、JSによって動的に生成され、サーバから取得された初期データで満たされたdisplayResFormのパラメータとして渡されたDBをhtmlという形にしています。塗りつぶされたデータと共にフォームが正しく表示されます。今私はこのフォームを介してこのデータを変更して、JSON形式としてDBにポストすることができますが、問題は私がJavaScriptにhtmlフォームデータをキャプチャすることができないことです。

フォームベースは次のとおりです。

<form method="POST" id="res-form" name="modForm" onSubmit="modSubmit()"> 
     {% csrf_token %} 
</form> 

、それがで構築されます：あなたは、私がmodSubmitの2つのコール（formタグ内の1つ、持って見ることができるように

function displayResForm(results) { 
    var form = document.getElementById("res-form"); 

    for (var i = 0; i < results.length; i++) { 
     var input = document.createElement("input"); 
     input.setAttribute("type", "number"); 
     input.setAttribute("value", results[i][1]); 
     input.setAttribute("id", toString(i)); 
     var label = document.createElement("label"); 
     label.setAttribute("for", toString(i)); 
     label.appendChild(document.createTextNode(results[i][0])); 

     form.appendChild(label); 
     form.appendChild(input); 
     form.appendChild(document.createElement("br")); 
    } 

    var mod = document.createElement("input"); 
    mod.setAttribute("class", "btn btn-info"); 
    mod.setAttribute("type", "submit"); 
    mod.setAttribute("value", "Modify"); 
    mod.setAttribute("onclick", "modSubmit()"); 
    form.appendChild(mod); 
} 

送信ボタンでは他）、どちらも機能しません。 そして、私は（まだ実装されていない、サーバーへのPOSTリクエストを送信するために）それをつかむしたい：

function modSubmit() { 
    //var formData = JSON.stringify($("modForm").serializeArray()); 
    var formData = $('modForm').serializeArray() 
    console.log("formData=", formData); 
    alert(formData); 
    // todo POST back to server 
    return false; 
} 

問題は私が空formData ...

EDIT取得し続けている：

を

私は簡単に手動で

var x = document.getElementById("res-form"); 
var el = x.elements[1].value; 
alert(el); 

によって要素の値を取得することができますしかし、私はワンライナーを希望しました。あなたがきた

Answer 1

問題は、次の行で使用されるセレクタである：

var formData = $('modForm').serializeArray() 
__________________^^^^^^^ 

この行ではなくmodFormに等しい名前を持つ要素のmodFormと呼ばれるタグを選択することがtrys。

その代わりに、使用してフォームを選択できます。

var formData = $('[name="modForm"]').serializeArray(); 
//Or also using the id attribute 
var formData = $('#res-form').serializeArray(); 

は、この情報がお役に立てば幸いです。