通過 JavaScript 獲取所有表單值

Question

我有表格：

<form onchange="allvaluestostring()">
    <select name="status">
         <option value="*">All</option>
         <option value="1">Active</option>
         <option value="0">Inactive</option>
    </select>
    <select name="size">
          <option value="*">All</option>
          <option value="small">Small</option>
          <option value="big">Big</option>
    </select>
</form>

以及表單中任何輸入的 onchange 操作我需要獲得一個 JavaScript 字符串，例如在 httprequest 中使用的“ status=1&size=big ”。

當其中一個表單輸入被更改時，JavaScript 中是否存在將采用所有表單值的內容？

我使用<select name="status" onchange="showExporteditems(this.name,this.value)"> ，但這只需要一個輸入值來僅使用“ status=1 ”，但我需要在每個 onchage 上使用所有值來自字符串的所有輸入，如“ status=1&size=big&...etc.... ”。

不使用 jQuery。

Answer 1

對於輸入字段，您可以使用 ECMAScript 6，如下所示：

讓你的表格保持不變：

const form = document.querySelector('form')

獲取所有值：

Object.values(form).reduce((obj,field) => { obj[field.name] = field.value; return obj }, {})

上面的代碼片段將生成一個以輸入名稱作為鍵及其值的對象。

Answer 2

這是 vanilla JavaScript 中的一個工作小提琴，但您需要添加一個序列化實用程序函數。 這與 jQuery 中$('form').serialize()完全一樣。

JavaScript：

var data;

function serialize(form) {
    if (!form || form.nodeName !== "FORM") {
        return;
    }
    var i, j, q = [];
    for (i = form.elements.length - 1; i >= 0; i = i - 1) {
        if (form.elements[i].name === "") {
            continue;
        }
        switch (form.elements[i].nodeName) {
        case 'INPUT':
            switch (form.elements[i].type) {
            case 'text':
            case 'hidden':
            case 'password':
            case 'button':
            case 'reset':
            case 'submit':
                q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value));
                break;
            case 'checkbox':
            case 'radio':
                if (form.elements[i].checked) {
                    q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value));
                }
                break;
            }
            break;
        case 'file':
            break;
        case 'TEXTAREA':
            q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value));
            break;
        case 'SELECT':
            switch (form.elements[i].type) {
            case 'select-one':
                q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value));
                break;
            case 'select-multiple':
                for (j = form.elements[i].options.length - 1; j >= 0; j = j - 1) {
                    if (form.elements[i].options[j].selected) {
                        q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].options[j].value));
                    }
                }
                break;
            }
            break;
        case 'BUTTON':
            switch (form.elements[i].type) {
            case 'reset':
            case 'submit':
            case 'button':
                q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value));
                break;
            }
            break;
        }
    }
    data = q.join("&");
}

並將您的表格onchange更改為

<form onchange="serialize(this)">

我對其進行了測試，並在控制台中得到"size=small&status=0" 。

Answer 3

我想這將是一個不錯的 ECMAScript 6 vanilla 基於 JavaScript 的解決方案。

const form = document.getElementById("sampleForm");

form.addEventListener("submit", e => {
    e.preventDefault();
    let reqBody = {};
    Object.keys(form.elements).forEach(key => {
        let element = form.elements[key];
        if (element.type !== "submit") {
            reqBody[element.name] = element.value;
        }
    });
    submitForm(reqBody); // Call to function for form submission
});

Answer 4

當您將事件附加到表單本身時，可能會使用它。 我使用“提交”事件。 然后這是指表單本身。

2022版

const formData = new URLSearchParams(new FormData(this));

Answer 5

我不知道是否有更容易的等待來執行此操作，但這個僅使用 ECMAScript 的解決方案對我有用：

function getPlainObjectFromFormElement(form) {
    const elements = form.elements;
    return Object.keys(elements)
        .reduce((obj, field) => {
            if (isNaN(field)) {
                obj[field] = elements[field].value;
            }
            return obj;
        }, {});
}

document.querySelector("form").onsubmit = function (e) {
    alert(JSON.stringify(getPlainObjectFromFormElement(e.target)));
}

Answer 6

2021 版（打字稿）

  const onSubmit = (e: any) => {
    e.preventDefault();
    const form = e.target as HTMLFormElement;
    const values = Object.fromEntries(
      Array.from(form.elements).map((x: Element) => {
        const input = x as HTMLInputElement;
        console.log(input);
        return [input.name ?? input.id, input.value];
      })
    );
    console.log(values);
  };

Answer 7

截至 2022 年底，現在有更好的方法可以做到這一點，並且所有現代瀏覽器都支持它。 使用FormData構造函數。

tldr;

console.log(Object.fromEntries(new FormData(form)));
// or
console.log(Object.fromEntries(new FormData(e.target)));

例子

以下是如何使用FormData構造函數從表單獲取數據的完整示例。 你可以 在這里看到一個活生生的例子。

<!DOCTYPE html>
<html>
  <head>
    <title>FormData Example</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <form id="form">
      <input type="text" name="a" value="foo" />
      <input type="text" name="b" value="bar" />
      <input type="text" name="c" value="baz" />
      <input type="checkbox" name="check" checked disabled />
      <button>Submit</button>
    </form>

    <script>
      const form = document.getElementById("form");

      form.addEventListener("submit", (e) => {
        // this is used only for this example, 
        // to prevent submission of the form
        // so you can inspect the data below
        e.preventDefault();

        // you can pass "form" or "e.target" to FormData
        console.log(Object.fromEntries(new FormData(e.target)));
        console.log(Object.fromEntries(new FormData(form)));
        // { a: "foo", b: "bar", c: "baz" }
      });
    </script>
  </body>
</html>

Answer 8

當您使用方法 GET 請求類型時。 您已經在使用將表單數據附加到 URL 的默認方法。

因此，您將獲得與名稱一起附加的選擇元素的值。

但是，如果要動態更改 URL。 然后你可以試試：

function allvaluestostring() {
  var sts = document.getElementById("status").value;
  var size = document.getElementById("size").value;
  history.pushState("", "Title", "new_URL");
}

在上述語句中，值存儲在變量中，並調用了history.pushState()方法，它會動態更改 URL 的字符串。

歷史 API

我可以防止 history.popstate 在初始頁面加載時觸發嗎？

Answer 9

戴夫的回答（ https://stackoverflow.com/a/65383511/2740403 ）是完美的，但你需要稍微擴展它才能為多選工作......

    function getPlainObjectFromFormElement(form) {
    const elements = form.elements; 
    return Object.keys(elements).reduce((obj, field) => { 
        if (isNaN(field)) {

            // NEW SECTION
            if(elements[field].classList.contains("multiselect") ){ 
                var selected = [];
                for (var option of elements[field].options){
                    if (option.selected) {
                        selected.push(option.value);
                    }
                }
                obj[field] = selected.toString(); 
            // END NEW SECTION

            }else{
                obj[field] = elements[field].value;
            }
        }
        return obj;
    }, {});
}

Answer 10

2023版

（因為我們在這里命名年份，哈哈）

function onSubmit(e: Event) {

  const form = new FormData(e.target as HTMLFormElement);
  const { name, email } = Object.fromEntries(form);

  // do something with data

}

這是一個Record類型的示例，假設鍵/值都是字符串類型：

const { name } = Object.fromEntries(form) as Record<string, string>;

傑

Answer 11

如果你想要所有元素都帶有特定的 class（例如：step1）：

var dataform = new FormData;
 var elemSteps = document.querySelectorAll('#frm-checkout .step1');
 elemSteps.forEach(elemStep => {
     dataform.append(elemStep.getAttribute('name'), elemStep.value)
 });
  var params = new URLSearchParams(dataform);
 params = params.toString();

//to get all data
var form = document.getElementById('frm-checkout');
 var dataform = new FormData(form); 
  var params = new URLSearchParams(dataform);
 params = params.toString();

Answer 12

我有表格：

<form onchange="allvaluestostring()">
    <select name="status">
         <option value="*">All</option>
         <option value="1">Active</option>
         <option value="0">Inactive</option>
    </select>
    <select name="size">
          <option value="*">All</option>
          <option value="small">Small</option>
          <option value="big">Big</option>
    </select>
</form>

以及任何形式的輸入的onchange動作，我都需要獲取一個JavaScript字符串，例如要在httprequest中使用的“ status=1&size=big ”。

當更改表單輸入之一時，JavaScript中是否存在可以采用所有表單值的內容？

我使用了<select name="status" onchange="showExporteditems(this.name,this.value)"> ，但是僅使用“ status=1 ”將只需要一個輸入值，但是我需要在每個onchage中使用所有值從所有輸入中獲取字符串，例如“ status=1&size=big&...etc.... ”。

不使用jQuery。