Hướng dẫn get form values on submit javascript - nhận giá trị biểu mẫu khi gửi javascript

Làm thế nào tôi có thể nhận được giá trị của biểu mẫu HTML để chuyển sang JavaScript?

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

Credit Card Validation: 

Card Type: 
  Visa
  MasterCard
  Discover
  Amex
  Diners Club

Uwe keim

38.8K56 Huy hiệu vàng173 Huy hiệu bạc284 Huy hiệu Đồng56 gold badges173 silver badges284 bronze badges

Hỏi ngày 23 tháng 8 năm 2010 lúc 11:22Aug 23, 2010 at 11:22

user377419user377419user377419

4.38112 Huy hiệu vàng40 Huy hiệu bạc56 Huy hiệu Đồng12 gold badges40 silver badges56 bronze badges

5

HTML:

JS:

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

Đã trả lời ngày 23 tháng 8 năm 2010 lúc 11:28Aug 23, 2010 at 11:28

6

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

JavaScript

function getData(form) {
  var formData = new FormData(form);

  // iterate through entries...
  for (var pair of formData.entries()) {
    console.log(pair[0] + ": " + pair[1]);
  }

  // ...or output as an object
  console.log(Object.fromEntries(formData));
}

Ví dụ: https://codepen.io/kevinfarrugia/pen/wommgd?editors=1111

---

Ngoài ra, bạn có thể sử dụng các tùy chọn ít được đề xuất dưới đây:

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

serialize(document.forms[0]);

jQuery

$("form").serializeArray()

Đã trả lời ngày 21 tháng 12 năm 2016 lúc 12:33Dec 21, 2016 at 12:33

Kevin Farrugiakevin FarrugiaKevin Farrugia

5.7303 Huy hiệu vàng34 Huy hiệu bạc55 Huy hiệu Đồng3 gold badges34 silver badges55 bronze badges

7

Tôi tìm thấy đây là giải pháp thanh lịch nhất.

function handleSubmit(e) {
  e.preventDefault();
  const formData = new FormData(e.target);
  const formProps = Object.fromEntries(formData);
}

Đã trả lời ngày 28 tháng 2 năm 2021 lúc 8:25Feb 28, 2021 at 8:25

DEDADEVDEDADEVDedaDev

3,4971 Huy hiệu vàng18 Huy hiệu bạc26 Huy hiệu đồng1 gold badge18 silver badges26 bronze badges

6

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

Kaspar Lee

5.3264 Huy hiệu vàng30 Huy hiệu bạc54 Huy hiệu Đồng4 gold badges30 silver badges54 bronze badges

Đã trả lời ngày 7 tháng 8 năm 2016 lúc 5:20Aug 7, 2016 at 5:20

4

function getData(form) {
  var formData = new FormData(form);

  // iterate through entries...
  for (var pair of formData.entries()) {
    console.log(pair[0] + ": " + pair[1]);
  }

  // ...or output as an object
  console.log(Object.fromEntries(formData));
}

0 sẽ chứa một mảng các biểu mẫu trên trang của bạn. Bạn có thể lặp qua các hình thức này để tìm hình thức 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 qua để tìm dữ liệu mà 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);

Kaspar Lee

5.3264 Huy hiệu vàng30 Huy hiệu bạc54 Huy hiệu Đồng4 gold badges30 silver badges54 bronze badges

Đã trả lời ngày 7 tháng 8 năm 2016 lúc 5:20Aug 23, 2010 at 11:35

function getData(form) {
  var formData = new FormData(form);

  // iterate through entries...
  for (var pair of formData.entries()) {
    console.log(pair[0] + ": " + pair[1]);
  }

  // ...or output as an object
  console.log(Object.fromEntries(formData));
}

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

Mỗi biểu mẫu có một mảng phần tử mà sau đó bạn có thể lặp qua để tìm dữ liệu mà bạn muốn. Bạn cũng sẽ có thể truy cập chúng bằng tên25 silver badges29 bronze badges

2

Đã trả lời ngày 23 tháng 8 năm 2010 lúc 11:35

Codeaculacodeacula

0

2.25925 Huy hiệu bạc29 Huy hiệu đồng

1

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

Xem xét

Chúng ta hãy giả sử chúng ta muốn truy xuất đầu vào của tên

function getData(form) {
  var formData = new FormData(form);

  // iterate through entries...
  for (var pair of formData.entries()) {
    console.log(pair[0] + ": " + pair[1]);
  }

  // ...or output as an object
  console.log(Object.fromEntries(formData));
}

1. Điều này có thể được thực hiện bằng cách vượt qua

function getData(form) {
  var formData = new FormData(form);

  // iterate through entries...
  for (var pair of formData.entries()) {
    console.log(pair[0] + ": " + pair[1]);
  }

  // ...or output as an object
  console.log(Object.fromEntries(formData));
}

2 trong trường

function getData(form) {
  var formData = new FormData(form);

  // iterate through entries...
  for (var pair of formData.entries()) {
    console.log(pair[0] + ": " + pair[1]);
  }

  // ...or output as an object
  console.log(Object.fromEntries(formData));
}

3. Sau đó, chúng ta có thể sử dụng

function getData(form) {
  var formData = new FormData(form);

  // iterate through entries...
  for (var pair of formData.entries()) {
    console.log(pair[0] + ": " + pair[1]);
  }

  // ...or output as an object
  console.log(Object.fromEntries(formData));
}

4 để truy xuất các giá trị của biểu mẫu chính xác này bằng cách tham chiếu đối tượng

function getData(form) {
  var formData = new FormData(form);

  // iterate through entries...
  for (var pair of formData.entries()) {
    console.log(pair[0] + ": " + pair[1]);
  }

  // ...or output as an object
  console.log(Object.fromEntries(formData));
}

5.May 22, 2020 at 12:01

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

Nếu bạn muốn lặp lại các giá trị, tức là, nhận tất cả các giá trị, sau đó xem https://developer.mozilla.org/en-us/docs/web/api/formdata#methods6 silver badges11 bronze badges

2

Đã trả lời ngày 22 tháng 5 năm 2020 lúc 12:01

2

JhaavistjhaavistFeb 17, 2020 at 19:00

6416 Huy hiệu bạc11 Huy hiệu đồngKlesun

5 xu của tôi ở đây, sử dụng

function getData(form) {
  var formData = new FormData(form);

  // iterate through entries...
  for (var pair of formData.entries()) {
    console.log(pair[0] + ": " + pair[1]);
  }

  // ...or output as an object
  console.log(Object.fromEntries(formData));
}

6 cho phép bạn truy vấn từng trường bằng

function getData(form) {
  var formData = new FormData(form);

  // iterate through entries...
  for (var pair of formData.entries()) {
    console.log(pair[0] + ": " + pair[1]);
  }

  // ...or output as an object
  console.log(Object.fromEntries(formData));
}

7, không chỉ bằng cách lặp:5 gold badges55 silver badges47 bronze badges

1

Đã trả lời ngày 17 tháng 2 năm 2020 lúc 19:00

Klesunklesun

10,9k5 Huy hiệu vàng55 Huy hiệu bạc47 Huy hiệu đồng

5

Một lớp lót cho es6

3

4Mar 5 at 13:25

Xác định chức năng này trong JavaScript của bạn:smartexpert

Sau đó, chỉ cần gọi với bất kỳ bộ chọn nào, ví dụ:

function getData(form) {
  var formData = new FormData(form);

  // iterate through entries...
  for (var pair of formData.entries()) {
    console.log(pair[0] + ": " + pair[1]);
  }

  // ...or output as an object
  console.log(Object.fromEntries(formData));
}

83 gold badges22 silver badges37 bronze badges

Đã trả lời ngày 5 tháng 3 lúc 13:25

6

SmartExpertsMarTExpert

2.4073 huy hiệu vàng22 Huy hiệu bạc37 Huy hiệu đồngMar 17, 2020 at 10:06

Rusca8Rusca8Rusca8

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 getEuityByid để đạt được biểu mẫu. Trong một dòng:2 silver badges10 bronze badges

0

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 nó giống nhau ở đây.

Đã trả lời ngày 17 tháng 3 năm 2020 lúc 10:06

4432 Huy hiệu bạc10 Huy hiệu đồng

7

Đây là câu trả lời của câu hỏi của bạn.

Bạn có thể chuyển các giá trị của các trường biểu mẫu cho hàm bằng cách sử dụng

function getData(form) {
  var formData = new FormData(form);

  // iterate through entries...
  for (var pair of formData.entries()) {
    console.log(pair[0] + ": " + pair[1]);
  }

  // ...or output as an object
  console.log(Object.fromEntries(formData));
}

9.Sep 5, 2020 at 10:35

Và cũng thay đổi đầu vào gửi vào nút. Được gọi là hàm từ hình thức.Ulvi

Về mặt kỹ thuật, bạn có thể làm điều đó trong chức năng của mình bằng cách sử dụng

serialize(document.forms[0]);

0. Nhưng giải pháp của anh ấy là quy tắc ngắn gọn và đơn giản.11 silver badges26 bronze badges

1

Đã trả lời ngày 5 tháng 9 năm 2020 lúc 10:35

8

9

UlviulviDec 2, 2020 at 5:52

82311 Huy hiệu bạc26 Huy hiệu đồngBlakeWebb

Tôi biết đây là một bài viết cũ nhưng có lẽ ai đó xuống dòng có thể sử dụng điều này.4 silver badges11 bronze badges

Đã trả lời ngày 2 tháng 12 năm 2020 lúc 5:52

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

0

BlakewebbblakewebbAug 8, 2020 at 9:09

0

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

1

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

2

4694 Huy hiệu bạc11 Huy hiệu đồngDec 10, 2020 at 8:48

Vui lòng cố gắng thay đổi mã như dưới đây:

Đã trả lời ngày 8 tháng 8 năm 2020 lúc 9:09

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

3

Đã trả lời ngày 10 tháng 12 năm 2020 lúc 8:48

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

4

Thật dễ dàng với một vòng lặp, bạn cũng có thể nhận được tất cả các giá trị trường ngay cả các giá trị hộp kiểm.Feb 26 at 7:33

Trong HTML của bạn, bạn nên liên kết

serialize(document.forms[0]);

1 trên các biểu mẫu của bạn

function getData(form) {
  var formData = new FormData(form);

  // iterate through entries...
  for (var pair of formData.entries()) {
    console.log(pair[0] + ": " + pair[1]);
  }

  // ...or output as an object
  console.log(Object.fromEntries(formData));
}

3 sự kiện

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

5

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

6

Trong JavaScript của bạn, mã của bạn sẽ áp dụng logic sau đây bất kể tên bạn được gán cho trường của bạn.May 19, 2020 at 7:50

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

7

Đã trả lời ngày 26 tháng 2 lúc 7:33Dec 20, 2021 at 18:04

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

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

8

Đã trả lời ngày 19 tháng 5 năm 2020 lúc 7:50

Đã trả lời ngày 20 tháng 12 năm 2021 lúc 18:04Jan 25 at 10:52

Một số câu trả lời ở trên không phục vụ cho các biểu mẫu có nhiều trường có cùng tên, ví dụ như

serialize(document.forms[0]);

3 vì vậy tôi đã thực hiện điều này nhanh chóng. Nó mong đợi trường có cùng tên mà bạn muốn thu thập như một mảng kết thúc vào

serialize(document.forms[0]);

4 dưới dạng quy ước nhưng có thể được cập nhật để xử lý các kịch bản khác.Jon Catmull

Các giá trị mang lại một cái gì đó như

serialize(document.forms[0]);

55 gold badges18 silver badges17 bronze badges

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

9

Đã trả lời ngày 13 tháng 12 năm 2017 lúc 4:59Dec 13, 2017 at 4:59

RandhawarandhawaRandhawa

2261 Huy hiệu bạc15 Huy hiệu đồng1 silver badge15 bronze badges

Làm thế nào để bạn nhận được dữ liệu biểu mẫu khi gửi bằng JavaScript?

Làm cách nào để nhận được giá trị biểu mẫu trong gửi?

Làm cách nào để nhận được giá trị của một yếu tố biểu mẫu?

Tôi có thể gửi biểu mẫu với phương thức Get không?