2010-08-23 83 views
39

如何获取HTML表单的值以传递给JavaScript?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> 
+1

你说的正是“在HTML代码的形式价值”呢? – 2010-08-23 11:24:28

回答

54

HTML:

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

JS:

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

@ shorty876:你自己测试过吗? o_0这是确定你是否做得对的一个很好的方法。 – 2010-08-23 11:46:54

+0

是的,但它只是返回一个真/假,我不知道如何确定函数是否被调用。因此你可以提供帮助。 – user377419 2010-08-23 13:00:21

+0

我试过了,但'nameValue'是默认值,而不是用户输入的内容。 – 2017-12-12 20:54:09

-3

javascript参数表示javascript函数参数吗?如果是:

你可以写一些函数。它将对象序列化为对象,如{"name":"value"},接下来您可以在函数中传递此对象。

20

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

这里来访问它们是从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

+3

只是一个警告,如果任何人想要得到其他类型的输入,如单选按钮或复选框的选定值,这将不会做你想要的。 – Sean 2016-11-23 05:59:31

8

如果你想获取表单值(例如那些将使用HTTP POST发送),你可以使用

的JavaScript

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

形式的序列化(https://code.google.com/archive/p/form-serialize/

serialize(document.forms[0]); 

jQuery

$("form").serializeArray() 
+5

您的第一个示例'FormData'本身不会执行任何操作..您仍然需要从窗体中获取值。 – putvande 2016-12-21 12:39:27

+1

我认为这是不正确的。如果在初始化FormData时指定了一个表单元素,那么它将正确地检索这些值。 http://codepen.io/kevinfarrugia/pen/Wommgd – 2016-12-21 13:34:42

+1

尽管FormData对象本身不是数值。你仍然需要调用并遍历FormData。entries()'为了检索值。另外,'FormData.entries()'在Safari,Explorer或Edge中不可用。 https://developer.mozilla.org/en-US/docs/Web/API/FormData – dave 2017-10-11 21:08:33

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

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