web-dev-qa-db-fra.com

Comment passer une valeur d'entrée de formulaire dans une fonction JavaScript

J'ai une fonction JavaScript générique qui prend un paramètre

function foo(val) { ...}

et je veux appeler la fonction lorsque je soumets un formulaire

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

mais l'expression foo (this.formValueId) ne fonctionne pas (pas surpris, c'était une tentative désespérée), donc la question est, comment puis-je transmettre une valeur de formulaire à la fonction javascript. Comme je l'ai mentionné, le javascript est générique et je ne veux pas manipuler le formulaire qu'il contient!

Je pouvais créer une fonction d'aide au milieu pour obtenir les valeurs du formulaire avec jQuery (par exemple), puis appeler la fonction mais je me demandais si je pouvais le faire sans la fonction d'aide.

javascriptjqueryhtmlforms
23
nightograph

Il pourrait être plus propre de retirer votre gestionnaire de clics en ligne et de le faire comme ceci:

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

Donnez à vos entrées des noms, cela vous facilitera la tâche

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

MISE À JOUR:

Si vous donnez à votre bouton un identifiant, les choses peuvent être encore plus faciles:

<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

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

6
Saket

Il existe plusieurs façons d'aborder cela. Personnellement, je voudrais éviter les scripts en ligne . Puisque vous avez marqué jQuery, utilisons-le.

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

Eh bien, vous pouvez le faire de cette façon.

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

}

C'est un exemple pour le même. et cela fonctionnera.

2
Krishna

Approche plus stable:

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

Le return false; sert à empêcher l'envoi du formulaire (en supposant que vous le vouliez).

1
Ilia G