如何獲取鍵值對中輸入的名稱和值

Question

我想在按鈕單擊時將輸入元素的名稱和值存儲在數據庫中。所以我想要得到這個名字作爲價值的關鍵和價值。

<form id="form"> 
     <input type="text" name="fname" value="a"> 
     <input type="text" name="lname" value="b"> 
     <input type="button" value="submit"> 
    </form> 

我在按鈕上使用此jQuery代碼點擊獲取值。

$('#form input').each(function(key, value) { 
     alert(this.value); 
    }); 

請幫助獲取作爲鍵值對（json格式）的名稱和值。

Answer 1

試試這個：

var obj = {}; 
$('#new_user_form input, #new_user_form select').each(function(key, value) { 
    obj[this.name] = this.value; 
}); 

Answer 2

如果希望每個輸入使用JSON.sringify()和對象文字的個別JSON字符串。

$('input[type="text"]').each(function() { 
 
    var obj = {}; 
 
    obj[$(this).attr('name')] = $(this).val(); 
 
    alert(JSON.stringify(obj)); 
 
});

<form> 
 
    <input type="text" name="fname" value="a"> 
 
    <input type="text" name="lname" value="b"> 
 
</form> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

---

可替代地，創建對象文字的陣列。

DEMO

var inputs = []; 

$('input[type="text"]').each(function() { 
    var obj = {}; 
    obj[$(this).attr('name')] = $(this).val(); 
    inputs.push(obj); 
}); 

console.log(JSON.stringify(inputs)); 

Answer 3

$('#form').submit(function(e) { 
 
     e.preventDefault(); // prevent form from submission. 
 
     var $form = $(this); 
 
     var url = $form.attr("action"); 
 
     console.log(url); 
 
     var data = $form.serializeArray(); // check out this console log everything is in key-value pair. 
 
     console.log(data); 
 
     var $divDisplay = $("#key-value-display"); 
 
     $divDisplay.html(data); 
 

 

 
     $.ajax({ 
 
     url: url, 
 
     data: data, 
 

 
     }).done(function(response) { 
 
     //work with response here. 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="form" action="url.php or asp.net whereever you are processing" method="post"> 
 
    <input type="text" name="fname" value="a"> 
 
    <input type="text" name="lname" value="b"> 
 
    <input type="submit" value="submit"> 
 
</form> 
 
<div id="key-value-display"></div>