がどのようにJavaScriptの関数にフォームの入力値を渡すために

Question

私は1つのパラメータ

function foo(val) { ...} 

をとり、一般的なJavaScript関数を持っていると私はフォームを送信するときに、関数を呼び出したい

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

UPDATE：あなたのボタンを与えた場合

が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

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

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

return false;は、実際のフォームを提出しないようにすることである（wはあなたを想定しアリ）。

Answer 6

あなたはこのようにすることができます。そのための一例である

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

} 

。それが実行されます。