使用jQuery或JavaScript訪問表單（或其他包含元素）中的元素

Question

我有一個包含一堆input元素的form元素（但是，如果輸入不是在form ，而是在給定的div中，我希望它是相同的）。 JavaScript多次需要表單中的值。 而不是使用一堆var id=$('#id').val(); 腳本，我該如何獲取表單中的所有內容，然后使用諸如mainForm.id之類的值？

<form method="post" id="mainForm">
    <input id="id" name="id" type="hidden" value="1" />
    <input id="cid" name="cid" value="pages" type="hidden" />
    <input id="task" name="task" value="delete" type="hidden" />
    <input id="controller" name="controller" value="display" type="hidden" />
    <input id="CSRF" name="CSRF" value="123" type="hidden">
</form>

編輯

不完美，但也許僅僅是：

var obj=document.getElementById('mainForm');

console.log(obj.id.value);

Answer 1

嘗試創建一個空的對象，利用$.each()來填充對象財產id的input ，與對象值value的input

 var obj = {}; $.each($("#mainForm input"), function(key, val) { obj[val.id] = val.value }); console.log(obj) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <form method="post" id="mainForm"> <input id="id" name="id" type="hidden" value="1" /> <input id="cid" name="cid" value="pages" type="hidden" /> <input id="task" name="task" value="delete" type="hidden" /> <input id="controller" name="controller" value="display" type="hidden" /> <input id="CSRF" name="CSRF" value="123" type="hidden"> </form> 

---

沒有jQuery

 var obj = {}; var inputs = document.querySelectorAll("#mainForm input"); [].forEach.call(inputs, function(val, key) { obj[val.id] = val.value; }); console.log(obj) 

 <form method="post" id="mainForm"> <input id="id" name="id" type="hidden" value="1" /> <input id="cid" name="cid" value="pages" type="hidden" /> <input id="task" name="task" value="delete" type="hidden" /> <input id="controller" name="controller" value="display" type="hidden" /> <input id="CSRF" name="CSRF" value="123" type="hidden"> </form> 

Answer 2

$('#mainForm input').each(function() {
    // do what you want with the input here 
    // console.log($(this).attr('id')); will print the id of every input for example
});