JavaScript-获取HTML表单值

112

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

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

<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 
— 用户名
source
2
确切地说，“ HTML代码中表单的值”是什么意思？
— Pekka
7
问题很明确
— laurentngu '18
1
@laurentngu的问题是，他的意思是“一个值的 HTML表单”，意思是一个值出的许多价值观，或者他是否意味着“ 值整个HTML形式的”，这意味着所有在一个大的价值观“连载“值
— bluejayke
这个问题很明显……但是显然传递一个表单的值没有多大意义。
— 马修

Answers:

112

HTML：

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

JS：

var nameValue = document.getElementById("uniqueID").value;
— 用户名
source
7
@ shorty876：您自己测试过吗？o_0这将是确定您是否做对的一种很好的方法。
— 杰夫·鲁珀特
1
是的，但是它只是返回一个true / false，我不确定如何确定该函数是否被调用。因此，您可以提供帮助。
— user377419 2010年
我尝试了这个，但nameValue它是默认值，而不是用户输入的值。
— James T.
为什么说name =“ name”，如果根本没有ID怎么办？
— bluejayke
65

如果要检索表单值（例如使用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()
— 凯文·法鲁吉亚（Kevin Farrugia）
source
12
您的第一个示例FormData本身什么也不做..您仍然需要从表单中获取值。
— putvande '16
1
我相信那是不正确的。如果在初始化FormData时指定了表单元素，则它将正确检索值。 codepen.io/kevinfarrugia/pen/Wommgd
— Kevin Farrugia
2
虽然FormData对象本身不是值。您仍然需要调用并遍历FormData.entries()以便检索值。此外，FormData.entries()在Safari，Explorer或Edge中不可用。developer.mozilla.org/zh-CN/docs/Web/API/FormData
— dave
1
关于浏览器兼容性，是正确的，但是有polyfills。关于遍历formData.entries()，这取决于您要查找的内容。如果您要查找单个字段的值，则可以使用formData.get(name)。参考：get（）。
— 凯文·法鲁吉亚
是的，我无法FormData在Chrome上输出任何内容。
— Atav32 '18
33

这是来自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);
}

演示可以在这里找到。

— Tran Nguyen Nhat Thuy
source
12
只是警告，如果有人想要获取其他类型的输入（例如单选按钮或复选框）的选定值，则将无法完成您想要的操作。
— 肖恩
我不得不var obj = {};改为var obj = [];。
— 丹尼尔·威廉姆斯
@Sean为什么对单选按钮不起作用？它们也出现在elements属性下
— bluejayke
@bluejayke该代码将循环遍历所有单选按钮的输入，并且将LAST单选按钮的“值”保存为obj，而不管选择了哪个。该问题在此处得到了证明（选择“选项1”）w3schools.com/code/tryit.asp?filename=GEZXJXBBI7AW
— 肖恩
29

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

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

var wanted_value = form.someFieldName.value;
jsFunction(wanted_value);
— Codeacula
source
为什么没有首先提到较短的方法？= -D
— Klesun
2
@ArturKlesun我想这是因为十年前我开始输入答案，OP没有更新，所以我编写了for循环来处理大多数情况。我想当时我还确保浏览器与IE7兼容，因为我们没有今天更好的环境。
— Codeacula
5

我在这里的5毛钱，使用form.elements它可以查询每个字段它name，不仅迭代：

const form = document.querySelector('form[name="valform"]');
const ccValidation = form.elements['cctextbox'].value;
const ccType = form.elements['cardtype'].value;
— 克莱森
source
2

扩展Atrur Klesun的想法...如果使用getElementById到达表单，则可以按其名称进行访问。一行：

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

我像单选按钮一样使用它，并且效果很好。我想这里是一样的。

— 鲁斯卡8号
source
2

这是https://stackoverflow.com/a/41262933/2464828的已开发示例

考虑

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

让我们假设我们要检索name的输入formula。可以通过event在onsubmit字段中传递来完成。然后，我们可以FormData通过引用该SubmitEvent对象来检索此精确形式的值。

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

然后，上面的JavaScript代码将输入的值输出到控制台。

如果要迭代这些值，即获取所有值，请参阅https://developer.mozilla.org/zh-CN/docs/Web/API/FormData#Methods

— 贾维斯特
source
大！。这正是我所需要的。谢谢。
— 党从阳
1

请尝试更改代码，如下所示：

<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>
— МаксимЩирый
source
谢谢，您的完美代码对我有用！
— 李何谭
0

快速解决方案，无需任何库即可序列化表单

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>
展开摘要

— 蓝鸟
source
-1 
<input type="text" id="note_text" />

let value = document.getElementById("note_text").value;
— 兰达瓦
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.