Come passare un valore di ingresso modulo in una funzione JavaScript

Question

Ho una funzione generica JavaScript che prende un parametro

function foo(val) { ...} 

e voglio chiamare la funzione quando inviare un modulo

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

ma l'espressione foo (this.formValueId) non funziona (non è sorpreso, è stato un tentativo disperato), quindi la domanda è, come posso passare un valore di form alla funzione javascript. Come ho già detto il javascript è generico e non voglio manipolare il modulo al suo interno!

Potrei creare una funzione di supporto nel mezzo per ottenere i valori del modulo con jQuery (ad esempio) e quindi chiamare la funzione, ma mi chiedevo se posso farlo senza la funzione di supporto.

Answer 1

Potrebbe essere più pulito di prendere il vostro gestore linea clic e fare in questo modo:

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

Answer 2

Lascia la tua ingressi nomi che renderà più facile

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

UPDATE:

caso in cui il pulsante di un ID cose possono essere ancora più facile:

<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

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

Answer 4

Ci sono diversi modi per affrontare questo. Personalmente, vorrei avoid in-line scripting. Dato che hai taggato jQuery, usiamolo.

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

approccio Più stabile:

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

Il return false; è quello di prevenire forma attuale submit (supponendo che w e che)).

Answer 6

Beh, puoi farlo in questo modo.

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

} 

Questo è un esempio per la stessa. e questo funzionerà.