如何将表单输入值传递给 JavaScript 函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7716848/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to pass a form input value into a JavaScript function
提问by nightograph
I have a generic JavaScript function which takes one parameter
我有一个通用的 JavaScript 函数，它接受一个参数
function foo(val) { ...}
and I want to call the function when submit a form
我想在提交表单时调用该函数
<form>
<input type="text" id="formValueId"/>
<input type="button" onclick="foo(this.formValueId)"/>
</form>
but the expression foo(this.formValueId) does not work (not surprised, it was a desperate attempt), So the question is, how can I pass a form value to the javascript function. As I mentioned the javascript is generic and I don't want to manipulate the form inside it!
但是表达式 foo(this.formValueId) 不起作用（并不惊讶，这是一次绝望的尝试），所以问题是，如何将表单值传递给 javascript 函数。正如我提到的 javascript 是通用的，我不想操纵其中的表单！
I could create a helper function in the middle to get the form values with jQuery (for example) and then call the function but I was wondering if I can do it without the helper function.
我可以在中间创建一个辅助函数以使用 jQuery（例如）获取表单值，然后调用该函数，但我想知道我是否可以在没有辅助函数的情况下做到这一点。
采纳答案by Clive
It might be cleaner to take out your inline click handler and do it like this:
取出您的内联点击处理程序并这样做可能会更干净：
$(document).ready(function() {
$('#button-id').click(function() {
foo($('#formValueId').val());
});
});
回答by Ibu
Give your inputs names it will make it easier
给你的输入名称它会更容易
<form>
<input type="text" id="formValueId" name="valueId"/>
<input type="button" onclick="foo(this.form.valueId.value)"/>
</form>
UPDATE:
更新：
If you give your button an id things can be even easier:
如果你给你的按钮一个 id 事情会更容易：
<form>
<input type="text" id="formValueId" name="valueId"/>
<input type="button" id="theButton"/>
</form>
Javascript:
Javascript：
var button = document.getElementById("theButton"),
value = button.form.valueId.value;
button.onclick = function() {
foo(value);
}
回答by Saket
Use onclick="foo(document.getElementById('formValueId').value)"
用 onclick="foo(document.getElementById('formValueId').value)"
回答by James Hill
There are several ways to approach this. Personally, I would avoid in-line scripting. Since you've tagged jQuery, let's use that.
有几种方法可以解决这个问题。就个人而言，我会避免内嵌脚本。既然你已经标记了 jQuery，让我们使用它。
HTML:
HTML：
<form>
<input type="text" id="formValueId" name="valueId"/>
<input type="button" id="myButton" />
</form>
JavaScript:
JavaScript：
$(document).ready(function() {
$('#myButton').click(function() {
foo($('#formValueId').val());
});
});
回答by Krishna
Well ya you can do that in this way.
好吧，你可以通过这种方式做到这一点。
<input type="text" name="address" id="address">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
<input type="button" onclick="showAddress(address.value)" value="ShowMap"/>
Java Script
Java脚本
function showAddress(address){
alert("This is address :"+address)
}
That is one example for the same. and that will run.
这是一个例子。这将运行。
回答by Ilia G
More stable approach:
更稳定的方法：
<form onsubmit="foo($("#formValueId").val());return false;">
<input type="text" id="formValueId"/>
<input type="submit" value="Text on the button"/>
</form>
The return false;is to prevent actual form submit (assuming you want that).
这return false;是为了防止实际提交表单（假设您想要）。
