如何基於表單的文本輸入準備值列表？

Question

鑑於以下形式：

<form class="email-form" action="" method="PUT" data-remote="true" data-method="put"> 
    <ul> 
    <li> 
     <label for="sEmail1"> 
     <input type="text" id="sEmail1" name="emails[]" value="d@google.com" 
       placeholder=""> 
     </label> 
    </li> 
    <li> 
     <label for="sEmail2"> 
     <input type="text" id="sEmail2" name="emails[]" value="d2@google.com" 
       placeholder=""> 
     </label> 
    </li> 
    <li> 
     <label for="sEmail3"> 
     <input type="text" id="sEmail3" name="emails[]" value="d3@google.com" 
       placeholder=""> 
     </label> 
    </li> 
    </ul> 
    <button type="submit">Continue</button> 
</form> 

如何使用查詢來獲取郵件的完整清單，並張貼如下，以軌道：

Parameters: {"emails"=>{"list"=>["d@google.com", "d2@google.com","d2@google.com"]}} 

我有以下幾點：

$.ajax({ 
     type: 'POST', 
     url: '/send_invites', 
     data: { 
      emails : { 
       list : $('.email-form').serialize() 
      }, 
      _method : 'PUT' 
     }, 
     success : function() { 
     } 
    }); 

Answer 1

試試這個：

emails = new Object(); 
emails.list = []; 
i = 0; 

$("input[name^='email']").each(function(){ 
    if(i < 3) { 
    emails.list[i] = $(this).val(); 
    i++ 
    } 

}) 

alert(JSON.stringify(emails)); 

或：

parameters = new Object(); 
parameters.emails = new Object() 
parameters.emails.list= []; 
i = 0; 

$("input[name^='email']").each(function(){ 
    if(i < 3) { 
    parameters.emails.list[i] = $(this).val(); 
    i++ 
    } 

}) 

alert(JSON.stringify(parameters)); 

http://jsfiddle.net/jgjpD/1/

Answer 2

這裏通過擴展jQuery和添加serializeObject方法是一個quick way to serialize a form。

$(function() { 

    //form to object 
    $.fn.serializeObject = function() { 
     var o = {}; 
     var a = this.serializeArray(); 
     $.each(a, function() { 
      if (o[this.name] !== undefined) { 
       if (!o[this.name].push) { 
        o[this.name] = [o[this.name]]; 
       } 
       o[this.name].push(this.value || ''); 
      } else { 
       o[this.name] = this.value || ''; 
      } 
     }); 
     return o; 
    }; 

    //test it out 
    $('form').on('submit', function() { 
     var serialized = $(this).serializeObject(); 

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

     return false; 
    }); 

});​ 

Answer 3

這裏是一個辦法做到這一點

var listval = []; 
$("input['name=emails\[\]']").each(function() { 
    listval.push($(this).val()); 
}