如何获取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>
use*_*632 90
HTML:
<input type="text" name="name" id="uniqueID" value="value" />
JS:
var nameValue = document.getElementById("uniqueID").value;
Kev*_*gia 44
如果要检索表单值(例如可以使用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()
Cod*_*ula 25
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);
小智 23
以下是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);
}
该演示可以在这里找到.
Ded*_*Dev 15
我发现这是最优雅的解决方案。
function handleSubmit(e) {
e.preventDefault();
const formData = new FormData(e.target);
const formProps = Object.fromEntries(formData);
}
Art*_*sun 13
我的 5 美分在这里，使用form.elements它允许您通过it'sname查询每个字段，而不仅仅是通过迭代：
const form = document.querySelector('form[name="valform"]');
const ccValidation = form.elements['cctextbox'].value;
const ccType = form.elements['cardtype'].value;
tol*_*uso 12
这是/sf/answers/2888405341/的开发示例
考虑
<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/en-US/docs/Web/API/FormData#Methods
ES6 的单衬
getFormData = (selector) => Object.fromEntries(new FormData(document.querySelector(selector)))
console.log('Output of getFormData:')
console.log(getFormData('#myTargetForm'))<!DOCTYPE html>
<html>
<body>
<h2>Get Form Data as Javascript Object</h2>
<form id="myTargetForm">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>在 Javascript 中定义此函数：
getFormData = (selector) => Object.fromEntries(new FormData(document.querySelector(selector)))
然后只需使用任何选择器进行调用即可，例如：
getFormData('#myTargetForm')
扩展 Atrur Klesun 的想法...如果您使用 getElementById 访问表单，则可以通过名称访问它。一行：
document.getElementById('form_id').elements['select_name'].value;
我像单选按钮一样使用它并且工作得很好。我想这里也是一样的。
| 归档时间： |
|
| 查看次数： |
389376 次 |
| 最近记录： |