web-dev-qa-db-ja.com

フォーム入力値をJavaScript関数に渡す方法

1つのパラメーターを取る汎用JavaScript関数があります

function foo(val) { ...}

フォームを送信するときに関数を呼び出したい

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

しかし、式foo（this.formValueId）は機能しません（驚くことではありませんが、必死の試みでした）。そのため、質問は、フォーム値をjavascript関数に渡す方法です。前述したように、javascriptはジェネリックであり、その中のフォームを操作したくありません！

途中でヘルパー関数を作成して（たとえば）jQueryでフォームの値を取得し、その関数を呼び出すことができますが、ヘルパー関数なしで実行できるかどうか疑問に思っていました。

javascriptjqueryhtmlforms
23
nightograph

インラインクリックハンドラーを取り出して次のように実行すると、よりクリーンになる場合があります。

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

入力名を付けると簡単になります

<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);
}
19
Ibu

onclick="foo(document.getElementById('formValueId').value)"を使用します

6
Saket

これにアプローチする方法はいくつかあります。個人的には、私は インラインスクリプトを避ける にします。 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());
    });
});
6
James Hill

ええ、この方法でそれを行うことができます。

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

}

それは同じことの一例です。それが実行されます。

2
Krishna

より安定したアプローチ：

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

return false;は、実際のフォームの送信を防止するためのものです（必要な場合）。

1
Ilia G