如何将表单输入值传递给JavaScript函数

Question

我有一个通用的JavaScript函数,它接受一个参数

function foo(val) { ...} 

我想在提交表单时调用该函数

<form>
<input type="text" id="formValueId"/>
<input type="button" onclick="foo(this.formValueId)"/>
</form>

但表达式foo(this.formValueId)不起作用(并不惊讶,这是一次绝望的尝试),所以问题是,如何将表单值传递给javascript函数.正如我所提到的,javascript是通用的,我不想操纵其中的表单!

我可以在中间创建一个辅助函数来获取jQuery的表单值(例如),然后调用该函数,但我想知道如果没有辅助函数我是否可以这样做.

Answer 1

取出内联点击处理程序可能会更清晰,并按照以下方式执行:

$(document).ready(function() {
    $('#button-id').click(function() {
      foo($('#formValueId').val());
    });
});

Answer 2

提供您的输入名称,这将使其更容易

<form>
<input type="text" id="formValueId" name="valueId"/>
<input type="button" onclick="foo(this.form.valueId.value)"/>
</form>

更新:

如果你给你的按钮一个id,事情可以更容易:

<form>
<input type="text" id="formValueId" name="valueId"/>
<input type="button" id="theButton"/>
</form>

使用Javascript:

var button = document.getElementById("theButton"),
value =  button.form.valueId.value;
button.onclick = function() {
    foo(value);
}

Answer 3

使用 onclick="foo(document.getElementById('formValueId').value)"

Answer 4

有几种方法可以解决这个问题.就个人而言,我会避免内联脚本.既然你已经标记了jQuery,那就让我们使用它吧.

HTML:

<form>
    <input type="text" id="formValueId" name="valueId"/>
    <input type="button" id="myButton" />
</form>

JavaScript的:

$(document).ready(function() {
    $('#myButton').click(function() {
      foo($('#formValueId').val());
    });
});