JavaScript - Nhận các giá trị biểu mẫu HTML

112

Làm cách nào để lấy giá trị của một biểu mẫu HTML để chuyển sang JavaScript?

Điều này có chính xác? Tập lệnh 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>
javascript  html 
— người dùng377419
nguồn
2
Chính xác thì "giá trị của một biểu mẫu trong mã HTML" có nghĩa là gì?
— Pekka
7
câu hỏi khá rõ ràng
— laurentngu
1
@laurentngu câu hỏi là ông có nghĩa là "một giá trị của một hình thức HTML", có nghĩa là một giá trị ra của nhiều giá trị, hoặc anh ấy có nghĩa là " giá trị của toàn bộ hình thức HTML", có nghĩa là tất cả các giá trị trong một lớn "serialized "value
— bluejayke
Câu hỏi rõ ràng ... nhưng rõ ràng là không có ý nghĩa gì khi chuyển giá trị của một biểu mẫu.
— Matthew

Câu trả lời:

112

HTML:

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

JS:

var nameValue = document.getElementById("uniqueID").value;
— người dùng406632
nguồn
7
@ shorty876: Bạn đã tự kiểm tra nó chưa? o_0 Đó sẽ là một cách khá tốt để xác định xem bạn có làm đúng hay không.
— Jeff Rupert
1
Vâng, nhưng nó chỉ trả về true / false và tôi không chắc làm thế nào để xác định xem hàm thậm chí còn được gọi hay không. Vì vậy, bạn có thể giúp đỡ.
— user377419
Tôi đã thử điều này, nhưng nameValuelà giá trị mặc định và không phải là những gì người dùng đã nhập.
— James T.
tại sao tên = "name", và điều gì xảy ra nếu nó không có ID?
— bluejayke
65

Nếu bạn muốn truy xuất các giá trị biểu mẫu (chẳng hạn như những giá trị sẽ được gửi bằng HTTP POST), bạn có thể sử dụng:

JavaScript

const formData = new FormData(document.querySelector('form'))
for (var pair of formData.entries()) {
  // console.log(pair[0] + ': ' + pair[1]);
}

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

serialize(document.forms[0]);

jQuery

$("form").serializeArray()
— Kevin Farrugia
nguồn
12
FormDataBản thân ví dụ đầu tiên của bạn không làm được gì cả .. bạn vẫn cần lấy các giá trị từ biểu mẫu.
— putvande 21/12/16
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ẽ truy xuất chính xác các giá trị. codepen.io/kevinfarrugia/pen/Wommgd
— Kevin Farrugia
2
Tuy nhiên, đối tượng FormData không phải là các giá trị. Bạn vẫn cần gọi và lặp lại FormData.entries()để lấy các giá trị. Ngoài ra, FormData.entries()không có sẵn trong Safari, Explorer hoặc Edge. developer.mozilla.org/en-US/docs/Web/API/FormData
— dave
1
Đúng về khả năng tương thích của trình duyệt, tuy nhiên có nhiều polyfills . Về việc lặp lại formData.entries(), nó phụ thuộc vào những gì bạn đang tìm kiếm. Nếu bạn đang tìm kiếm giá trị của một trường duy nhất mà bạn có thể sử dụng formData.get(name). Tham chiếu: get () .
— Kevin Farrugia
Vâng, tôi không thể FormDataxuất bất kỳ thứ gì trên Chrome.
— Atav32
33

Đâ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 ở đây .

— Trần Nguyễn Nhật Thủy
nguồn
12
Chỉ là một cảnh báo, nếu bất kỳ ai muốn nhận các giá trị đã 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 được điều bạn muốn.
— Sean
Tôi đã phải thay đổi var obj = {};thành var obj = [];.
— Daniel Williams
@Sean tại sao nó không hoạt động cho các nút radio? Chúng cũng xuất hiện dưới thuộc tính phần tử
— bluejayke
@bluejayke Mã sẽ xoay vòng qua tất cả các đầu vào nút radio và sẽ lưu 'giá trị' của nút radio CUỐI CÙNG obj, bất kể cái nào được chọn. Vấn đề này được thể hiện ở đây (chọn 'Tùy chọn 1') w3schools.com/code/tryit.asp?filename=GEZXJXBBI7AW
— Sean
29

document.formssẽ chứa một loạt các biểu mẫu trên trang của bạn. Bạn có thể lặp lại 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 phần tử mà sau đó bạn có thể lặp lại để tìm dữ liệu bạn muốn. Bạn cũng có thể truy cập chúng bằng tên

var wanted_value = form.someFieldName.value;
jsFunction(wanted_value);
— Codeacula
nguồn
Tại sao phương pháp ngắn hơn không được đề cập đầu tiên? = -D
— Klesun
2
@ArturKlesun Tôi đoán đó là vì vào thời điểm cách đây một thập kỷ tôi bắt đầu nhập câu trả lời, OP chưa cập nhật, vì vậy tôi đã viết vòng lặp for để xử lý hầu hết các tình huống. Tôi nghĩ rằng hồi đó tôi cũng đang đảm bảo khả năng tương thích của trình duyệt với IE7 bởi vì chúng tôi không có cảnh quan tốt hơn như hiện nay.
— Codeacula
5

5 xu của tôi ở đây, bằng cách sử dụng form.elementscho phép bạn truy vấn từng trường theo nóname , không chỉ bằng cách lặp lại:

const form = document.querySelector('form[name="valform"]');
const ccValidation = form.elements['cctextbox'].value;
const ccType = form.elements['cardtype'].value;
— Klesun
nguồn
2

Mở rộng ý tưởng của Atrur Klesun ... bạn chỉ có thể truy cập nó bằng tên của nó nếu bạn sử dụng getElementById để truy cập biểu mẫu. Trong một dòng:

document.getElementById('form_id').elements['select_name'].value;

Tôi đã sử dụng nó như vậy cho các nút radio và hoạt động tốt. Tôi đoán ở đây cũng vậy.

— Rusca8
nguồn
2

Đây là một ví dụ được phát triển của https://stackoverflow.com/a/41262933/2464828

Xem xét

<form method="POST" enctype="multipart/form-data" onsubmit="return check(event)">
    <input name="formula">
</form>

Giả sử chúng tôi muốn truy xuất đầu vào của tên formula. Điều này có thể được thực hiện bằng cách vượt qua eventhiện onsubmittrường. Sau đó, chúng ta có thể sử dụng FormDatađể truy xuất các giá trị của dạng chính xác này bằng cách tham chiếu đến SubmitEventđối tượng.

const check = (e) => {
    const form = new FormData(e.target);
    const formula = form.get("formula");
    console.log(formula);
    return false
};

Đoạn mã JavaScript trên sau đó sẽ in giá trị của đầu vào vào bảng điều khiển.

Nếu bạn muốn lặp lại các giá trị, tức là lấy tất cả các giá trị, hãy xem https://developer.mozilla.org/en-US/docs/Web/API/FormData#Methods

— jhaavist
nguồn
Tuyệt quá!. Đây chính là thứ tôi cần. Cảm ơn bạn.
— Đặng Công Dương
1

Vui lòng thử thay đổi mã như sau:

<form
   onSubmit={e => {
     e.preventDefault();
     e.stopPropagation();

     const elements = Array.from(e.currentTarget) as HTMLInputElement[];

     const state = elements.reduce((acc, el) => {
       if (el.name) {
         acc[el.name] = el.value;
       }

       return acc;
     }, {});

     console.log(state); // {test: '123'}
   }}
>
   <input name='test' value='123' />
</form>
— Максим Щирый
nguồn
Cảm ơn, mã hoàn hảo của bạn và làm việc cho tôi!
— LI HO TAN
0

Giải pháp nhanh chóng để tuần tự hóa một biểu mẫu mà không cần bất kỳ thư viện nào

function serializeIt(form) {
  return (
    Array.apply(0, form.elements).map(x => 
      (
        (obj => 
          (
            x.type == "radio" ||
            x.type == "checkbox"
          ) ?
            x.checked ? 
              obj
            : 
              null
          :
            obj
        )(
          {
            [x.name]:x.value
          }
        )
      )
    ).filter(x => x)
  );
}

function whenSubmitted(e) {
  e.preventDefault()
  console.log(
    JSON.stringify(
      serializeIt(document.forms[0]),
      4, 4, 4
    )
  )
}
<form onsubmit="whenSubmitted(event)">
<input type=text name=hiThere value=nothing>
<input type=radio name=okRadioHere value=nothin>
<input type=radio name=okRadioHere1 value=nothinElse>
<input type=radio name=okRadioHere2 value=nothinStill>

<input type=checkbox name=justAcheckBox value=checkin>
<input type=checkbox name=justAcheckBox1 value=checkin1>
<input type=checkbox name=justAcheckBox2 value=checkin2>

<select name=selectingSomething>
<option value="hiThere">Hi</option>
<option value="hiThere1">Hi1</option>
<option value="hiThere2">Hi2</option>
<option value="hiThere3">Hi3</option>
</select>
<input type=submit value="click me!" name=subd>
</form>
Mở rộng đoạn mã

— bluejayke
nguồn
-1 
<input type="text" id="note_text" />

let value = document.getElementById("note_text").value;
— Randhawa
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.