La méthode «val» permet de récupérer la valeur entrée par un utilisateur dans une balise input (voir les activités sur le HTML5 pour plus d'informations sur cette balise input)
HTML
<input type="text" id="monInput"/>
JavaScript
$('#monInput').val()
Si nous avons :
maValeur=$('#monInput').val()
«maValeur» contiendra la chaîne de caractères entrée par l'utilisateur.
N.B. «$('#monInput').val('')» permet d'effacer le champ input
Créer les 2 fichiers suivants :
index.html
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="lib/jquery-2.1.4.min.js"></script>
<script src="javascript/script.js"></script>
</head>
<body>
<h1>Ma liste de fruits</h1>
<p>Ajouter un fruit: <input type="text" id="fruit"/></p>
<button id="ajout">Valider</button>
<ul>
</ul>
</body>
</html>
script.js
$(function(){
var mesFruitsTab=[];
$('#ajout').on('click',function(){
var fruit=$('#fruit').val();
if (fruit!=''){
mesFruitsTab.push(fruit);
$('ul').append('<li>'+fruit+'</li>');
$('#fruit').val('');
}
});
});
Etudier cet exemple
Décrire le résultat attendu. Tester cet exemple.
Créer les 2 fichiers suivants :
index.html
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="lib/jquery-2.1.4.min.js"></script>
<script src="javascript/script.js"></script>
</head>
<body>
<h1>Ma liste de fruits</h1>
<p id='resultat'></p>
<p>rechercher un fruit <input type="text" id="recherche"/></p>
<button id="butVal">Valider</button>
</body>
</html>
script.js
$(function(){
var mesFruitsTab=["banane","pomme","fraise","kiwi","pêche","cerise","nectarine", "noix","framboise","noisette","raisin"];
$('#butVal').on('click',function(){
$('resultat').html('');
var rech=$('#recherche').val();
var flag=true;
var res;
$('#recherche').val('');
var i=0;
while (i<mesFruitsTab.length && flag==true){
if (rech==mesFruitsTab[i]){
res=rech;
flag=false;
}
i=i+1;
}
if (flag==true){
$('#resultat').html('Désolé, aucun résultat trouvé');
}
else{
$('#resultat').html(res+' fait bien partie de la liste');
}
});
});
Etudier cet exemple
Décrire le résultat attendu. Tester cet exemple.
Voici quelques explications sur l'exemple traité dans le "À faire vous-même 6.2" :
Nous utilisons ici une nouvelle méthode jQuery : html
Cette méthode remplace le code HTML (au contraire de append qui ajoute du code HTML).
«$('p').html('') » permet de «vider » le contenu d'une balise