如何使用jQuery創建JSON的每個輸入值

Question

我想打印一些JSON格式的數據供其他應用程序使用。 我應該如何構造動態創建JSON格式的Javascript對象。

這是我的HTML代碼：

<div class="col-sm-6"> 
    <div class="form-group"> 
     <input type="text" class="form-control" name="frstname" data-conv="json"> 
     <input type="text" class="form-control" name="lastname" data-conv="json"> 
     <select name="gender" class="form-control" data-conv="json"> 
      <option value="male">Male</option> 
      <option value="female">Female</option> 
     </select> 
     <input type="date" class="form-control" name="dob" data-conv="json"> 
     <input type="text" class="form-control" name="email" data-conv="json"> 
    </div> 
    <div class="form-group"> 
     <button type="button" class="btn-action" class="btn btn-default">Create</button> 
    </div> 
</div> 

我有以下的jQuery代碼嘗試：

$(document).ready(function(){ 
    $('.btn-action').on('click', function(){ 

     var jsonObj = []; 
     $("input[data-conv=json]").each(function() { 
      var firstname = $(input[name=frstname]).val(); 
      var lastname = $(input[name=lastname]).val(); 
      var gender = $(input[name=gender]).val(); 
      var dob  = $(input[name=dob]).val(); 
      var email  = $(input[name=email]).val(); 

      item = {} 
      item ['firstname'] = firstname; 
      item ['lastname'] = lastname; 
      item ['gender']  = gender; 
      item ['dob']  = dob; 
      item ["email"]  = email; 

      jsonObj.push(item); 
     }); 
     var jsonString = JSON.stringify(jsonObj); 
     console.log(jsonString); 
    }); 
}); 

我得到錯誤：

Uncaught ReferenceError: input is not defined

任何幫助將不勝感激！

Answer 1

我得到錯誤：

Uncaught ReferenceError: input is not defined

你需要用每個輸入你的選擇與'或"：

var firstname = $('input[name=frstname]').val(); 
var lastname = $('input[name=lastname]').val(); 
var gender = $('input[name=gender]').val(); 
var dob  = $('input[name=dob]').val(); 
var email  = $('input[name=email]').val(); 

你在這裏做什麼一樣：

$("input[data-conv=json]").each(function() { 

雖然如果你有1個論壇與這些控制你不需要每個： -

$(document).ready(function(){ 
    $('.btn-action').on('click', function(){ 

     var jsonObj = []; 

     var firstname = $('input[name=frstname]').val(); 
     var lastname = $('input[name=lastname]').val(); 
     var gender = $('input[name=gender]').val(); 
     var dob  = $('input[name=dob]').val(); 
     var email  = $('input[name=email]').val(); 

     item = {} 
     item ['firstname'] = firstname; 
     item ['lastname'] = lastname; 
     item ['gender']  = gender; 
     item ['dob']  = dob; 
     item ["email"]  = email; 

     jsonObj.push(item); 

     var jsonString = JSON.stringify(jsonObj); 
     console.log(jsonString); 
    }); 
}); 

但如果你有數倍你需要給該組約於要素類： -

<div class="form-group inputs-group"> 
     <input type="text" class="form-control" name="frstname" data-conv="json"> 
     <input type="text" class="form-control" name="lastname" data-conv="json"> 

然後each過，使用find：

$(document).ready(function(){ 
    $('.btn-action').on('click', function(){ 

     var jsonObj = []; 
     $(".inputs-group").each(function() { 
      var firstname = $(this).find('input[name=frstname]').val(); 
      var lastname = $(this).find('input[name=lastname]').val(); 
      var gender = $(this).find('input[name=gender]').val(); 
      var dob  = $(this).find('input[name=dob]').val(); 
      var email  = $(this).find('input[name=email]').val(); 

      item = {} 
      item ['firstname'] = firstname; 
      item ['lastname'] = lastname; 
      item ['gender']  = gender; 
      item ['dob']  = dob; 
      item ["email"]  = email; 

      jsonObj.push(item); 
     }); 
     var jsonString = JSON.stringify(jsonObj); 
     console.log(jsonString); 
    }); 
});