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字符串，例如“status=1&size=big”，以便在httprequest中使用。

在javascript中存在哪些内容会在其中一个表单输入被更改时获取所有表单值？

我使用了<select name="status" onchange="showExporteditems(this.name,this.value)">但是这只使用一个输入值只能使用“status=1”，但我需要在每个onchage上输入所有字符串中的值，如“status=1&size=big&...etc....”

谢谢！

编辑：不使用jquery。

Answer 1

在vanilla JS中工作fiddle ...但你需要的是添加serialize utility function。这与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 2

对于输入字段，您可以使用ECMA6，如下所示：

让您的表格保持不变

const form = document.querySelector('form')

抓住所有价值观：

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

上面的代码片段将生成一个对象，其输入名称为键及其值。

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

当您使用方法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的字符串。

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

Can I prevent history.popstate from triggering on initial page-load?

Answer 5

如果你可以使用jQuery及其serializeArray方法，那么将this参数传递给onchange函数

<form onchange="allvaluestostring(this)">

看起来像

function allvaluestostring(that) {
    var out = "",
        delim = "";

    // Loop through the serialized fields of a form
    $.each($(that).serializeArray(), function (idx, el) {
        out += delim + el.name + '=' + el.value;
        delim = "&"; // Trick to correctly append delimiter
    });

    alert(out);
};

Answer 6

我不知道是否有更简单的等待来执行此操作，但是这个仅使用 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 7

2021 版 (TypeScript)

  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);
  };

通过javascript获取所有表单值

7 个答案: