JavaScript - 获取HTML表单值

时间:2010-08-23 11:22:11

标签: javascript html

如何获取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>

15 个答案:

答案 0 :(得分:78)

HTML:

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

JS:

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

答案 1 :(得分:32)

如果要检索表单值(例如那些将使用HTTP POST发送的表单值),您可以使用

<强>的JavaScript

new FormData(document.querySelector('form'))

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

serialize(document.forms[0]);

<强>的jQuery

$("form").serializeArray()

答案 2 :(得分:23)

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

答案 3 :(得分:19)

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

可以找到演示here

答案 4 :(得分:10)

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

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

答案 5 :(得分:7)

我在这里使用form.elements的5美分,可让您通过it's name而不是仅通过迭代查询每个字段:

const form = document.querySelector('form[name="valform"]');
const ccValidation = form.elements['cctextbox'].value;
const ccType = form.elements['cardtype'].value;

答案 6 :(得分:6)

这是https://stackoverflow.com/a/41262933/2464828

的改进示例

考虑

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

让我们假设我们要检索名称为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/en-US/docs/Web/API/FormData#Methods

答案 7 :(得分:3)

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

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

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

答案 8 :(得分:2)

请尝试如下更改代码:

<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>

答案 9 :(得分:1)

这是您问题的答案。

您可以使用this.<<name of the field>>.value将表单字段的值传递给函数。

并且还将输入提交更改为按钮提交。从表单调用了函数。

<body>
   <form name="valform" method="POST" onsubmit="isValidCreditCard(this.cctextbox.value, this.cardtype.value)">
   Credit Card Validation: <input type="text" id="cctextboxid" name="cctextbox"><br/>
   Card Type: 
   <select name="cardtype" id="cardtypeid">
      ...
   </select>
   <br/>
   <button type="submit">Verify Credit Card</button>
</body>

从技术上讲,您可以使用document.getElementById("cctextboxid")在函数中执行此操作。但是他的解决方案是简洁明了的代码。

答案 10 :(得分:0)

<input type="text" id="note_text" />

let value = document.getElementById("note_text").value;

答案 11 :(得分:0)

几个易于使用的表单序列化程序,具有良好的文档。

按照Github明星的顺序,

  1. jquery.serializeJSON

  2. jquery-serialize-object

  3. form2js

  4. form-serialize

答案 12 :(得分: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>

答案 13 :(得分:0)

我知道这是一篇过时的文章,但也许​​有人可以使用此内容。

// use document.form["form-name"] to reference the form
const ccForm = document.forms["ccform"];

// bind the onsubmit property to a function to do some logic
ccForm.onsubmit = function(e) {

  // access the desired input through the var we setup
  let ccSelection = ccForm.ccselect.value;
  console.log(ccSelection);

  e.preventDefault();
}
<form name="ccform">
  <select name="ccselect">
    <option value="card1">Card 1</option>
    <option value="card2">Card 2</option>
    <option value="card3">Card 3</option>
  </select>
  <button type="submit">Enter</button>
</form>

答案 14 :(得分:0)

<form id='form'>
    <input type='text' name='title'>
    <input type='text' name='text'>
    <input type='email' name='email'>
</form>
const element = document.getElementByID('#form')
const data = new FormData(element)
const form = Array.from(data.entries())
/*
form = [
    ["title", "a"]
    ["text", "b"]
    ["email", "c"]
]
*/
for (const [name, value] of form) {
    console.log({ name, value })
    /*
    {name: "title", value: "a"}
    {name: "text", value: "b"}
    {name: "email", value: "c"}
    */
}