2010-08-23 41 views
39

Làm cách nào để lấy giá trị của biểu mẫu HTML để chuyển sang JavaScript?JavaScript - Nhận các giá trị dạng HTML

Điều này có đúng không? Kịch bản của tôi lấy hai đối số một từ hộp văn bản, một từ hộp thả xuống.

<body> 
<form name="valform" action="" method="POST"> 

Credit Card Validation: <input type="text" id="cctextboxid" name="cctextbox"><br/> 
Card Type: <select name="cardtype" id="cardtypeid"> 
    <option value="visa">Visa</option> 
    <option value="mastercard">MasterCard</option> 
    <option value="discover">Discover</option> 
    <option value="amex">Amex</option> 
    <option value="diners">Diners Club</option> 
</select><br/> 
<input type="button" name="submit" value="Verify Credit Card" onclick="isValidCreditCard(document.getElementById('cctextboxid').value,document.getElementById('cardtypeid').value)" /> 
</body> 
+1

Ý anh là gì bởi "giá trị của một hình thức trong HTML" chính xác? –

Trả lời

54

HTML:

<input type="text" name="name" id="uniqueID" value="value" /> 

JS:

var nameValue = document.getElementById("uniqueID").value; 
+6

@ shorty876: Bạn đã tự mình thử nghiệm chưa? o_0 Đó sẽ là một cách khá hay để xác định xem bạn có làm đúng không. –

+0

Vâng, nhưng nó chỉ trả về một true/false và im không chắc chắn làm thế nào để xác định xem các chức năng thậm chí còn được gọi là. Vì vậy, bạn có thể giúp đỡ. – user377419

+0

Tôi đã thử điều này, nhưng 'nameValue' là giá trị mặc định chứ không phải những gì người dùng đã nhập. –

-3

đối số javascript có nghĩa là đối số hàm javascript? Nếu Có:

Bạn có thể viết một số chức năng. Mà serialize hình thức của bạn trong đối tượng như {"name":"value"} và tiếp theo bạn có thể vượt qua đối tượng này trong chức năng.

20

document.form sẽ chứa một loạt các hình thức trên trang của bạn. Bạn có thể lặp qua các biểu mẫu này để tìm biểu mẫu cụ thể mà bạn mong muốn.

var form = false; 
var length = document.forms.length; 
for(var i = 0; i < length; i++) { 
    if(form.id == "wanted_id") { 
     form = document.forms[i]; 
    } 
} 

Mỗi biểu mẫu có một mảng yếu tố mà bạn có thể lặp qua để tìm dữ liệu bạn muốn. Bạn cũng sẽ có thể truy cập chúng bằng tên

var wanted_value = form.someFieldName.value; 
jsFunction(wanted_value); 
8

Dưới đây là một ví dụ từ W3Schools:

function myFunction() { 
    var elements = document.getElementById("myForm").elements; 
    var obj ={}; 
    for(var i = 0 ; i < elements.length ; i++){ 
     var item = elements.item(i); 
     obj[item.name] = item.value; 
    } 

    document.getElementById("demo").innerHTML = JSON.stringify(obj); 
} 

Bản demo có thể được tìm thấy here.

+3

Chỉ là cảnh báo, nếu có ai muốn nhận được các giá trị được chọn của các loại đầu vào khác như nút radio hoặc hộp kiểm, điều này sẽ không làm những gì bạn muốn. – Sean

8

Nếu bạn muốn lấy các giá trị hình thức (ví dụ như những người sẽ được gửi bằng HTTP POST), bạn có thể sử dụng

Javascript

new FormData(document.querySelector('form')) 

form-serialize (https://code.google.com/archive/p/form-serialize/)

serialize(document.forms[0]); 

jQuery

$("form").serializeArray() 
+5

Ví dụ đầu tiên của bạn 'FormData' chính nó không làm bất cứ điều gì .. bạn vẫn cần phải nhận được các giá trị từ biểu mẫu. – putvande

+1

Tôi tin rằng điều đó là không chính xác. Nếu khi khởi tạo FormData bạn chỉ định một phần tử biểu mẫu thì nó sẽ lấy ra các giá trị một cách chính xác. http://codepen.io/kevinfarrugia/pen/Wommgd –

+1

Đối tượng FormData không phải là giá trị mặc dù. Bạn vẫn cần gọi và lặp lại thông qua 'FormData.entries() 'để lấy các giá trị. Ngoài ra, 'FormData.entries()' không có sẵn trong Safari, Explorer hoặc Edge. https://developer.mozilla.org/en-US/docs/Web/API/FormData – dave

1
<input type="text" id="note_text" /> 

let value = document.getElementById("note_text").value; 
Các vấn đề liên quan