获取 HTML 表单值

IT技术 javascript html
2021-01-12 09:12:52

如何获取要传递给 JavaScript 的 HTML 表单的值？

这个对吗？我的脚本需要两个参数，一个来自文本框，一个来自下拉框。

<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>
6个回答

HTML：

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

JS：

var nameValue = document.getElementById("uniqueID").value;
@bluejayke 还有其他 javascript 方法可以从 HTML 标签中获取数据，例如getElementsByClassName. 在这种情况下，“名称”只是一个通用属性占位符。
2021-03-15 09:12:52
是的，但它只返回一个真/假，我不确定如何确定该函数是否被调用。这样你就可以帮忙了。
2021-03-18 09:12:52
我试过了，但这nameValue是默认值，而不是用户输入的值。
2021-03-24 09:12:52
为什么 name="name"，如果它根本没有 ID 呢？
2021-03-28 09:12:52
@shorty876：你自己测试过吗？o_0 这将是确定您是否做对的一个很好的方法。
2021-04-03 09:12:52

如果要检索表单值（例如使用 HTTP POST 发送的值），可以使用：

JavaScript

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

表单序列化（https://code.google.com/archive/p/form-serialize/）

serialize(document.forms[0]);

jQuery

$("form").serializeArray()
你的第一个例子FormData本身没有做任何事情......你仍然需要从表单中获取值。
2021-03-17 09:12:52
我相信这是不正确的。如果在初始化 FormData 时指定了一个表单元素，那么它将正确检索值。 codepen.io/kevinfarrugia/pen/Wommgd
2021-03-18 09:12:52
虽然 FormData 对象本身不是值。您仍然需要调用和迭代FormData.entries()以检索值。此外，FormData.entries()在 Safari、Explorer 或 Edge 中不可用。developer.mozilla.org/en-US/docs/Web/API/FormData
2021-03-25 09:12:52
在浏览器兼容性方面是正确的，但是有polyfills。关于迭代formData.entries()，这取决于你在寻找什么。如果您正在寻找单个字段的值，您可以使用formData.get(name). 参考：get()。
2021-03-25 09:12:52
是的，我无法FormData在 Chrome 上输出任何内容。
2021-04-10 09:12:52

以下是 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);
}

可以在此处找到演示。

@bluejayke 代码将循环遍历所有单选按钮输入，并将保存最后一个单选按钮的“值” obj，无论选择了哪个。该问题在此处演示（选择“选项 1”）w3schools.com/code/tryit.asp?filename=GEZXJXBBI7AW
2021-03-16 09:12:52
只是一个警告，如果有人想获取其他类型的输入（如单选按钮或复选框）的选定值，这不会做你想要的。
2021-03-23 09:12:52
@Sean 为什么它不适用于单选按钮？它们也出现在元素属性下
2021-03-24 09:12:52
我不得不更改var obj = {};为var obj = [];.
2021-03-28 09:12:52

document.forms将在您的页面上包含一系列表单。您可以遍历这些表格以找到所需的特定表格。

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

每个表单都有一个元素数组，您可以循环遍历该数组以查找所需的数据。您还应该能够按名称访问它们

var wanted_value = form.someFieldName.value;
jsFunction(wanted_value);
为什么没有首先提到较短的方法？=-D
2021-03-20 09:12:52
@ArturKlesun 我猜是因为十年前我开始输入答案，OP 还没有更新，所以我写了 for 循环来处理大多数情况。我想当时我也在确保浏览器与 IE7 的兼容性，因为我们没有今天拥有的更好的景观。
2021-03-27 09:12:52

我发现这是最优雅的解决方案。

function handleSubmit(e) {
  e.preventDefault();
  const formData = new FormData(e.target);
  const formProps = Object.fromEntries(formData);
}
像魅力一样工作，你成功了！@DedaDev
2021-03-19 09:12:52
@Radek 示例： const loginForm = document.getElementById("login-form"); loginForm.addEventListener("submit", handleSubmit);
2021-04-01 09:12:52
函数是如何从 HTML 调用的？
2021-04-09 09:12:52
其它你可能感兴趣的问题
上一篇Javascript：使用 Ajax 发送 JSON 对象？ 下一篇如何使用 UI-router 将对象传递到状态？