如何获取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>
答案 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明星的顺序,
答案 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"}
*/
}