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

Posted 2023-05-09

【中文标题】如何将表单输入值传递给 JavaScript 函数

【英文标题】：How to pass a form input value into a JavaScript function

【发布时间】：2011-12-04 17:38:53

【问题描述】：

我有一个通用的 javascript 函数，它接受一个参数

function foo(val)  ... 

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

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

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

我可以在中间创建一个辅助函数以使用 jQuery（例如）获取表单值，然后调用该函数，但我想知道是否可以不使用辅助函数。

【问题讨论】：

这可能是你的答案。演示：jsbin.com/icikav/5/edit#javascript,html您尝试调用的方法未定义。

请注意，可以通过在文本字段中按 Enter 来提交此表单（虽然不是在 IE 中），并且不会触发您的按钮单击。

【参考方案1】：

取出你的内联点击处理程序并这样做可能会更干净：

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

【参考方案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);

【讨论】：

我们可以使用onclick="foo(valueId.value)"来代替onclick="foo(this.form.valueId.value)"。它有效......

【参考方案3】：

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

【参考方案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());
    );
);

【参考方案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"/>

Java 脚本

function showAddress(address)

    alert("This is address :"+address)

这是一个例子。这将运行。

【讨论】：

请同时添加java脚本

【参考方案6】：

更稳定的方法：

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

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