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

How to pass a form input value into a JavaScript function

本文关键字：JavaScript 函数 值传 输入 表单      更新时间：2023-09-26

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

function foo(val) { ...}

，我想在提交表单时调用这个函数

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

，但表达式foo(this.formValueId)不起作用(不奇怪，这是一个绝望的尝试)，所以问题是，我怎么能传递一个表单值给javascript函数。正如我提到的javascript是通用的，我不想操纵它里面的形式!

我可以在中间创建一个辅助函数，以获得与jQuery的表单值(例如)，然后调用该函数，但我想知道我是否可以做到没有辅助函数。

这样做可能会更简洁:

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

给你的输入命名，这样会更容易

<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(document.getElementById('formValueId').value)"

有几种方法可以做到这一点。就我个人而言，我会避免使用内联脚本。既然你已经标记了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());
    });
});

你可以这样做。

    <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)
}

这是一个相同的例子。它会运行

更稳定的方法:

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

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

相关文章：