Cómo pasar un valor formulario de entrada en una función de JavaScript

Question

Tengo una función JavaScript genérico que toma un parámetro

function foo(val) { ...} 

y quiero llamar a la función cuando enviar un formulario

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

pero la expresión foo (this.formValueId) no funciona (no me sorprendió, fue un intento desesperado), Entonces la pregunta es, ¿cómo puedo pasar un valor de formulario a la función javascript. Como mencioné, el javascript es genérico y no quiero manipular el formulario que contiene.

Podría crear una función de ayuda en el medio para obtener los valores de formulario con jQuery (por ejemplo) y luego llamar a la función, pero me preguntaba si puedo hacerlo sin la función de ayuda.

Answer 1

Podría ser más limpio para sacar el controlador de línea clic y hacerlo de esta manera:

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

Answer 2

Dé a sus entradas de nombres que hará que sea más fácil

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

ACTUALIZACIÓN:

Si indica su botón de un ID cosas pueden ser aún más fácil:

<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

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

Answer 4

Hay varias maneras de abordar esto. Personalmente, lo haría avoid in-line scripting. Como ha etiquetado jQuery, usemos eso.

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

enfoque más estable:

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

El return false; es impedir forma real presentara (suponiendo que w hormiga que).

Answer 6

Bueno, puedes hacerlo de esta manera.

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

} 

Eso es un ejemplo de la misma. y eso correrá