nasıl bir JavaScript işlevi içine form girdi değeri geçmesine

Question

Ben bir parametre

function foo(val) { ...} 

alan bir jenerik JavaScript işlevi var ve form gönderildiğinde işlevi çağırmak istiyorum

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

ama foo (this.formValueId) ifadesi işe yaramıyor (şaşırmadım, çaresiz bir girişimdi), yani soru, bir form değerini javascript işlevine nasıl iletebilirim. Bahsettiğim gibi javascript geneldir ve içindeki formu değiştirmek istemiyorum!

Form değerlerini jQuery (örneğin) ile almak için ortada bir yardımcı işlev oluşturabilir ve sonra işlevi çağırabilirim ancak yardımcı işlev olmadan bunu yapıp yapamayacağımı merak ediyorum.

Answer 1

sizin inline tıklama işleyicisi almaya daha temiz ve böyle yapacağım:

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

Answer 2

o yapacaktır ölçüm girişlerini adlar verin daha kolay

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

GÜNCELLEME: Eğer düğmesini verirsen

bir kimlik işler daha da kolay olabilir:

<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

Kullanım onclick="foo(document.getElementById('formValueId').value)"

Answer 4

bu yaklaşım çeşitli yolları vardır. Şahsen ben avoid in-line scripting. JQuery etiketlendiğinden, bunu kullanalım.

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

Daha kararlı yaklaşım:

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

return false; gerçek form gönderme önlemektir (w size varsayarak karınca bu).

Answer 6

Peki ya bunu bu şekilde yapabilirsiniz. Aynı için bir örnektir

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

function showAddress(address){ 

    alert("This is address :"+address) 

} 

. ve bu koşacak.