Passer la valeur de la variable de formulaire en javascript

Disent que je suis un formulaire HTML comme ci-dessous et que vous souhaitez transmettre les valeurs de la textfields JS variables.

<form name="testform" action="" method="?"
<input type="text" name="testfield1"/>
<input type="text" name="testfield2"/>
</form>

J'ai seulement passé des valeurs à des variables en PHP avant. Quand le faire en javascript, j'ai besoin d'une méthode? Et la question principale, comment est-il fait?

OriginalL'auteur Simon Carlson | 2012-12-02

  1. 3

    Voici quelques exemples:

    Javascript:

    document.getElementById('name_of_input_control_id').value;

    jQuery:

    $("#name_of_input_control_id").val();

    Fondamentalement, vous procédez à l'extraction de la valeur de l'entrée de contrôle de la DOM en Javascript/jQuery.

    Notez la façon dont les contrôles à l'OP de l'exemple n'avez pas d'IDENTIFIANT ...
    Vrai. OP devrez ajouter un ID à ses contrôles de saisie.
    Mon point est: pas nécessairement. À l'aide d'un nom est tout simplement parfait, et depuis les éléments de formulaire besoin d'un nom, de toute façon (au moins quand ils communiquent également par le biais du formulaire avec un serveur), pourquoi ne pas l'utiliser?
    Dépend de ce que l'OP veut faire avec cette valeur. Peut-être qu'il/elle veut faire certains navigateur de validation côté ou un peu de fantaisie UI/UX en fonction de l'entrée.
    Ça ne change rien.

    OriginalL'auteur Lowkase

  2. 0

    les réponses sont correctes mais vous pouvez rencontrer des problèmes si vous ne mettez pas votre code dans un document.prêt de la fonction ... si votre codeblock est au-dessus de la partie html, vous ne trouverez pas de champ de saisie de l'id, parce que dans ce moment il n'existent pas...

    document.addEventListener('DOMContentLoaded', function() {
   var input = document.getElementById('name_of_input_control_id').value;
}, false);

    jQuery

    jQuery(document).ready(function($){
    var input = $("#name_of_input_control_id").val();
});

    OriginalL'auteur Mik

  3. 0

    Vous n'avez pas vraiment besoin d'un method ou un action attribut si vous êtes tout simplement en utilisant les champs de texte en Javascript

    Ajouter un submit bouton et un onsubmit gestionnaire de la forme de ce genre,

    <form name="testform" onsubmit="return processForm(this)">
    <input type="text" name="testfield1"/>
    <input type="text" name="testfield2"/>
    <input type="submit"/>
</form>

    Puis dans votre code Javascript que vous pourriez avoir ce processForm fonction

    function processForm(form) {
    var inputs = form.getElementsByTagName("input");
    //parse text field values into an object
    var textValues = {};
    for(var x = 0; x < inputs.length; x++) {
        if(inputs[x].type != "text") {
            //ignore anything which is NOT a text field
            continue;
        }

        textValues[inputs[x].name] = inputs[x].value;
    }

    //textValues['testfield1'] contains value of first input
    //textValues['testfield2'] contains value of second input

    return false;  //this causes form to NOT 'refresh' the page
}

    OriginalL'auteur lostsource

  4. 0

    Essayez les solutions suivantes dans votre "soumettre":

    var input = $("#testfield1").val();

    OriginalL'auteur ffffff01