Meteor - Formes
Dans ce chapitre, nous allons apprendre à travailler avec les formulaires Meteor.
Saisie de texte
Tout d'abord, nous allons créer un form élément avec un champ de saisie de texte et un bouton d'envoi.
meteorApp.html
<head>
<title>meteorApp</title>
</head>
<body>
<div>
{{> myTemplate}}
</div>
</body>
<template name = "myTemplate">
<form>
<input type = "text" name = "myForm">
<input type = "submit" value = "SUBMIT">
</form>
</template>Dans un fichier JavaScript, nous allons créer le submitun événement. Nous devons empêcher le comportement d'événement par défaut pour empêcher le navigateur de s'actualiser. Ensuite, nous allons prendre le contenu du champ de saisie et l'assigner àtextValue variable.
Dans l'exemple suivant, nous enregistrerons uniquement ce contenu dans la console des développeurs. Et la dernière chose dont nous avons besoin est d'effacer le champ de saisie.
meteorApp.js
if (Meteor.isClient) {
Template.myTemplate.events({
'submit form': function(event) {
event.preventDefault();
var textValue = event.target.myForm.value;
console.log(textValue);
event.target.myForm.value = "";
}
});
}Lorsque nous tapons "Du texte ..." dans notre champ de saisie et le soumettons, la console enregistrera le texte que nous avons entré.
Boutons radio
Un concept similaire peut être utilisé pour les boutons radio.
meteorApp.html
<head>
<title>meteorApp</title>
</head>
<body>
<div>
{{> myTemplate}}
</div>
</body>
<template name = "myTemplate">
<form>
<input type = "radio" name = "myForm" value = "form-1">FORM 1
<input type = "radio" name = "myForm" value = "form-2">FORM 2
<input type = "submit" value = "SUBMIT">
</form>
</template>meteorApp.js
if (Meteor.isClient) {
Template.myTemplate.events({
'submit form': function(event) {
event.preventDefault();
var radioValue = event.target.myForm.value;
console.log(radioValue);
}
});
}Lorsque nous soumettons le premier bouton, la console affichera la sortie suivante.
Case à cocher
L'exemple suivant montre comment utiliser les cases à cocher. Vous pouvez voir que nous répétons simplement le même processus.
meteorApp.html
<head>
<title>meteorApp</title>
</head>
<body>
<div>
{{> myTemplate}}
</div>
</body>
<template name = "myTemplate">
<form>
<input type = "checkbox" name = "myForm" value = "form-1">FORM 1
<input type = "checkbox" name = "myForm" value = "form-2">FORM 2
<input type = "submit" value = "SUBMIT">
</form>
</template>meteorApp.js
if (Meteor.isClient) {
Template.myTemplate.events({
'submit form': function(event) {
event.preventDefault();
var checkboxValue1 = event.target.myForm[0].checked;
var checkboxValue2 = event.target.myForm[1].checked;
console.log(checkboxValue1);
console.log(checkboxValue2);
}
});
}Une fois le formulaire soumis, l'entrée cochée sera enregistrée comme true, tandis que celui qui n'est pas coché sera enregistré comme false.
Sélectionnez la liste déroulante
Dans l'exemple suivant, nous allons apprendre à utiliser le selectélément. Nous utiliserons lechange événement pour mettre à jour les données chaque fois que l'option change.
meteorApp.html
<head>
<title>meteorApp</title>
</head>
<body>
<div>
{{> myTemplate}}
</div>
</body>
<template name = "myTemplate">
<select>
<option name = "myOption" value = "option-1">OPTION 1</option>
<option name = "myOption" value = "option-2">OPTION 2</option>
<option name = "myOption" value = "option-3">OPTION 3</option>
<option name = "myOption" value = "option-4">OPTION 4</option>
</select>
</template>meteorApp.js
if (Meteor.isClient) {
Template.myTemplate.events({
'change select': function(event) {
event.preventDefault();
var selectValue = event.target.value;
console.log(selectValue);
}
});
}Si nous choisissons la troisième option, la console enregistrera la valeur de l'option.
