Nhận mảng giá trị từ nhiều đầu vào bằng cách sử dụng jQuery

Question

Ai đó có thể vui lòng cho tôi biết cách nhận giá trị từ một số trường nhập liệu không?

tôi có một danh sách với một số nguyên liệu đầu vào như thế này:

<li> 
<label>Additional Title: </label><input type='text' name='additionaltitlename' ... /> 
</li> 
<li> 
<label>Additional Title: </label><input type='text' name='additionaltitlename' ... /> 
</li> 

tôi có một giải pháp trong Javascript (vào mẫu nộp):

... 
var extratitles = document.getElementsByName('additionaltitlename'); 
var str = ''; 
     for (var i = 0; i < extratitles.length; i++) { 
     str = str + '|' + extratitles.item(i).value; 
    } 
} 

Làm thế nào để làm điều tương tự trong JQuery? mẹ đẻ serialize chức năng

Answer 1

Không hợp lệ để có hai yếu tố đầu vào cùng tên. Nếu bạn muốn làm điều này, bạn có thể sử dụng <input name="titles[]">

Bạn có thể thử này:

<input name="titles[]"> 
<input name="titles[]"> 
​<button>submit</button>​​​​​​​​​​​​​​​​​​​​​​​ 

Với jQuery này

// click handler 
function onClick(event) { 
    var titles = $('input[name^=titles]').map(function(idx, elem) { 
    return $(elem).val(); 
    }).get(); 

    console.log(titles); 
    event.preventDefault(); 
} 

// attach button click listener on dom ready 
$(function() { 
    $('button').click(onClick); 
}); 

See it working here on jsFiddle

EDIT

Câu trả lời này cho bạn các tiêu đề trong một mảng thay vì một chuỗi usin g a separator |. Cá nhân, tôi nghĩ điều này dễ sử dụng hơn nhiều.

Nếu bạn chỉ cần nộp mẫu đơn và bạn muốn hỗ trợ nhiều giá trị, sử dụng phương pháp .serialize như mô tả trong câu trả lời khác

Answer 2

Sử dụng jQuery:

var data = $('input[name="additionaltitlename"]').serialize(); 

docs

Phương pháp .serialize() tạo ra một chuỗi văn bản trong ký hiệu URL mã hóa tiêu chuẩn. Nó hoạt động trên một đối tượng jQuery đại diện cho một tập các phần tử biểu mẫu.

Answer 3

Phương tiện:

str = ''; 
$("input[type='text']").each(function() { 
str = str + '|' + $(this).val(); 
}); 

hoặc

str = ''; 
$("input[name='additionaltitlename']").each(function() { 
str = str + '|' + $(this).val(); 
}); 

?

Answer 4

Ngoài câu trả lời của @ gdoron hoặc @ macek có lẽ là cách để đi, tôi muốn thêm rằng tất cả những gì sai với mã bạn đã đăng là bạn có một số } quá nhiều. Này hoạt động (mặc dù nó vẫn có chỗ cho cải tiến):

$('#getpreviewbutton').click(function(){ 

    var extratitles = document.getElementsByName('additionaltitlename'); 
    var str = ''; 
      for (var i = 0; i < extratitles.length; i++) { 
      str = str + '|' + extratitles.item(i).value; 
      } 

});​ 

Xem: http://jsfiddle.net/8XJcc/

Tôi không biết trình duyệt mà bạn đang sử dụng nhưng sử dụng sth như Firebug hoặc Tools Chrome Dev có thể được khá tiện dụng để phát hiện những sai lầm đơn giản như thế này. Xem this reference cho Chrome hoặc this one cho Firefox. Ngay cả IE có một - chỉ cần nhấn F12.