JavaScript - Obtention des valeurs de formulaire HTML

112

Comment puis-je faire passer la valeur d'un formulaire HTML à JavaScript?

Est-ce correct? Mon script prend deux arguments, un de la zone de texte, un de la liste déroulante.

<body>
<form name="valform" action="" method="POST">

Credit Card Validation: <input type="text" id="cctextboxid" name="cctextbox"><br/>
Card Type: <select name="cardtype" id="cardtypeid">
  <option value="visa">Visa</option>
  <option value="mastercard">MasterCard</option>
  <option value="discover">Discover</option>
  <option value="amex">Amex</option>
  <option value="diners">Diners Club</option>
</select><br/>
<input type="button" name="submit" value="Verify Credit Card" onclick="isValidCreditCard(document.getElementById('cctextboxid').value,document.getElementById('cardtypeid').value)" />
</body>
javascript html utilisateur377419
la source
2
Qu'entendez-vous exactement par «valeur d'un formulaire en code HTML»?
Pekka
7
la question est assez claire
laurentngu
1
@laurentngu la question est - t - il signifie « une valeur d' un formulaire HTML », ce qui signifie une valeur hors des nombreuses valeurs, ou veut - il dire la « valeur de la totalité du formulaire HTML », ce qui signifie toutes les valeurs dans un grand « sérialisé "value
bluejayke
La question est claire ... mais il est clair que cela n'a pas beaucoup de sens de transmettre la valeur d'un formulaire.
Matthew le

Réponses:

112

HTML:

<input type="text" name="name" id="uniqueID" value="value" />

JS:

var nameValue = document.getElementById("uniqueID").value;
utilisateur406632
la source
7
@ shorty876: L'avez-vous testé vous-même? o_0 Ce serait une très bonne façon de déterminer si vous l'avez fait correctement.
Jeff Rupert
1
Ouais, mais il renvoie juste un vrai / faux et je ne sais pas comment déterminer si la fonction a même été appelée. Ainsi, vous pouvez aider.
user377419
J'ai essayé cela, mais nameValuec'est la valeur par défaut et non ce que l'utilisateur a entré.
James T.
pourquoi name = "name", et que faire s'il n'a pas du tout d'identifiant?
bluejayke
65

Si vous souhaitez récupérer les valeurs du formulaire (telles que celles qui seraient envoyées à l'aide d'un HTTP POST), vous pouvez utiliser:

JavaScript

const formData = new FormData(document.querySelector('form'))
for (var pair of formData.entries()) {
  // console.log(pair[0] + ': ' + pair[1]);
}

form-serialize ( https://code.google.com/archive/p/form-serialize/ )

serialize(document.forms[0]);

jQuery

$("form").serializeArray()
Kevin Farrugia
la source
12
Votre premier exemple FormDatalui-même ne fait rien ... vous devez toujours obtenir les valeurs du formulaire.
putvande
1
Je pense que c'est incorrect. Si lors de l'initialisation de FormData vous spécifiez un élément de formulaire, il récupérera correctement les valeurs. codepen.io/kevinfarrugia/pen/Wommgd
Kevin Farrugia
2
L'objet FormData n'est cependant pas lui-même les valeurs. Vous devez toujours appeler et parcourir FormData.entries()afin de récupérer les valeurs. De plus, FormData.entries()n'est pas disponible dans Safari, Explorer ou Edge. developer.mozilla.org/en-US/docs/Web/API/FormData
dave
1
Correct en ce qui concerne la compatibilité du navigateur, mais il existe des polyfills . En ce qui concerne l'itération formData.entries(), cela dépend de ce que vous recherchez. Si vous recherchez la valeur d'un seul champ, vous pouvez utiliser formData.get(name). Référence: get () .
Kevin Farrugia
Ouais, je ne peux FormDatarien afficher sur Chrome.
Atav32
33

Voici un exemple de W3Schools:

function myFunction() {
    var elements = document.getElementById("myForm").elements;
    var obj ={};
    for(var i = 0 ; i < elements.length ; i++){
        var item = elements.item(i);
        obj[item.name] = item.value;
    }

    document.getElementById("demo").innerHTML = JSON.stringify(obj);
}

La démo peut être trouvée ici .

Tran Nguyen Nhat Thuy
la source
12
Juste un avertissement, si quelqu'un veut obtenir les valeurs sélectionnées d'autres types d'entrées telles que des boutons radio ou des cases à cocher, cela ne fera pas ce que vous voulez.
Sean
J'ai dû changer var obj = {};pour var obj = [];.
Daniel Williams
@Sean pourquoi ne fonctionnerait-il pas pour les boutons radio? Ils apparaissent également sous la propriété des éléments
bluejayke
@bluejayke Le code parcourra toutes les entrées de bouton radio, et sauvegardera la «valeur» du bouton radio DERNIER contre obj, quel que soit celui qui est sélectionné. Le problème est démontré ici (choisissez 'Option 1') w3schools.com/code/tryit.asp?filename=GEZXJXBBI7AW
Sean
29

document.formscontiendra un tableau de formulaires sur votre page. Vous pouvez parcourir ces formulaires pour trouver la forme spécifique que vous désirez.

var form = false;
var length = document.forms.length;
for(var i = 0; i < length; i++) {
    if(form.id == "wanted_id") {
        form = document.forms[i];
    }
}

Chaque formulaire a un tableau d'éléments que vous pouvez ensuite parcourir pour trouver les données souhaitées. Vous devriez également pouvoir y accéder par nom

var wanted_value = form.someFieldName.value;
jsFunction(wanted_value);
Codeacula
la source
Pourquoi la méthode plus courte n'a pas été mentionnée en premier? = -D
Klesun le
2
@ArturKlesun Je suppose que c'est parce qu'à l'époque, il y a dix ans, j'ai commencé à taper la réponse, l'OP n'avait pas été mis à jour, j'ai donc écrit la boucle for pour gérer la plupart des situations. Je pense qu'à l'époque, j'assurais également la compatibilité du navigateur avec IE7 car nous n'avions pas le paysage bien meilleur que nous avons aujourd'hui.
Codeacula
5

Mes 5 cents ici, en utilisant form.elementsce qui vous permet d'interroger chaque champ par luiname , pas seulement par itération:

const form = document.querySelector('form[name="valform"]');
const ccValidation = form.elements['cctextbox'].value;
const ccType = form.elements['cardtype'].value;
Klesun
la source
2

Expansion sur l'idée d'Atrur Klesun ... vous pouvez simplement y accéder par son nom si vous utilisez getElementById pour accéder au formulaire. En une seule ligne:

document.getElementById('form_id').elements['select_name'].value;

Je l'ai utilisé comme ça pour les boutons radio et j'ai bien fonctionné. Je suppose que c'est la même chose ici.

Rusca8
la source
2

Ceci est un exemple développé de https://stackoverflow.com/a/41262933/2464828

Considérer

<form method="POST" enctype="multipart/form-data" onsubmit="return check(event)">
    <input name="formula">
</form>

Supposons que nous souhaitons récupérer l'entrée de nom formula. Cela peut être fait en passant le eventsur le onsubmitterrain. On peut ensuite utiliser FormDatapour récupérer les valeurs de cette forme exacte en référençant l' SubmitEventobjet.

const check = (e) => {
    const form = new FormData(e.target);
    const formula = form.get("formula");
    console.log(formula);
    return false
};

Le code JavaScript ci-dessus imprimera alors la valeur de l'entrée dans la console.

Si vous souhaitez itérer les valeurs, c'est-à-dire obtenir toutes les valeurs, consultez https://developer.mozilla.org/en-US/docs/Web/API/FormData#Methods

jhaaviste
la source
Génial!. C'est exactement ce dont j'ai besoin. Je vous remercie.
Dang Cong Duong
1

Veuillez essayer de changer le code comme ci-dessous:

<form
   onSubmit={e => {
     e.preventDefault();
     e.stopPropagation();

     const elements = Array.from(e.currentTarget) as HTMLInputElement[];

     const state = elements.reduce((acc, el) => {
       if (el.name) {
         acc[el.name] = el.value;
       }

       return acc;
     }, {});

     console.log(state); // {test: '123'}
   }}
>
   <input name='test' value='123' />
</form>
Максим Щирый
la source
Merci, votre code parfait et fonctionne pour moi!
LI HO TAN
0

Solution rapide pour sérialiser un formulaire sans aucune bibliothèque

function serializeIt(form) {
  return (
    Array.apply(0, form.elements).map(x => 
      (
        (obj => 
          (
            x.type == "radio" ||
            x.type == "checkbox"
          ) ?
            x.checked ? 
              obj
            : 
              null
          :
            obj
        )(
          {
            [x.name]:x.value
          }
        )
      )
    ).filter(x => x)
  );
}

function whenSubmitted(e) {
  e.preventDefault()
  console.log(
    JSON.stringify(
      serializeIt(document.forms[0]),
      4, 4, 4
    )
  )
}
<form onsubmit="whenSubmitted(event)">
<input type=text name=hiThere value=nothing>
<input type=radio name=okRadioHere value=nothin>
<input type=radio name=okRadioHere1 value=nothinElse>
<input type=radio name=okRadioHere2 value=nothinStill>

<input type=checkbox name=justAcheckBox value=checkin>
<input type=checkbox name=justAcheckBox1 value=checkin1>
<input type=checkbox name=justAcheckBox2 value=checkin2>

<select name=selectingSomething>
<option value="hiThere">Hi</option>
<option value="hiThere1">Hi1</option>
<option value="hiThere2">Hi2</option>
<option value="hiThere3">Hi3</option>
</select>
<input type=submit value="click me!" name=subd>
</form>
Développer l'extrait

bluejayke
la source
-1 
<input type="text" id="note_text" />

let value = document.getElementById("note_text").value;
Randhawa
la source