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

有几种方法可以解决这个问题。就个人而言，我会avoid in-line scripting。既然你已经标记了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());
    });
});

Answer 5

嗯，你可以这样做。

    <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"/>

的Javascript

function showAddress(address){

    alert("This is address :"+address)

}

这是同样的一个例子。那将会运行。

Answer 6

更稳定的方法：

<form onsubmit="foo($("#formValueId").val());return false;">
<input type="text" id="formValueId"/>
<input type="submit" value="Text on the button"/>
</form>

return false;是为了防止提交实际表单（假设您需要）。

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

6 个答案: