FAQ JavaScriptConsultez toutes les FAQ
Nombre d'auteurs : 41, nombre de questions : 174, dernière mise à jour : 30 avril 2013
Sommaire→Les formulaires→Les autres objets du formulaire- Comment soumettre un formulaire automatiquement ?
- Comment soumettre un formulaire en utilisant un lien ?
- Comment faire pour avoir deux boutons submit dans le même formulaire ?
- Comment vérifier que l'utilisateur a renseigné un champ d'un formulaire ?
- Comment vérifier que l'utilisateur a renseigné tous les champs texte d'un formulaire ?
- Comment vérifier la syntaxe d'une date ?
- Comment passer automatiquement au champ suivant lorsque la taille maximale du champ en cours est atteinte ?
- Comment lier deux listes déroulantes entre elles ?
- Comment ajouter des options dans une liste déroulante à partir d'une autre ?
- Comment désactiver une zone de texte en cochant une checkbox ?
- Comment remplacer un caractère par un autre lorsque l'utilisateur renseigne un champ texte ?
- Comment enlever la propriété readOnly d'un objet ?
- Comment n'autoriser que la saisie de chiffres dans un champ texte ?
- Comment faire passer un div au dessus d'un select dans IE ?
Sélectionnez
<script type="text/javascript">
setTimeout(function(){monForm.submit();},2500);<br/>
</script>
Créé le 2003-09-11 par simone.51
Vous souhaitez pour des raisons esthétiques (ou autres) que votre formulaire soit soumis non pas par appui sur un bouton ou une image, mais par un clic sur un simple lien HTML. Il suffit pour cela de déclencher la soumission avec l'appel de la méthode submit de l'objet formulaire et en ajoutant le mot-clé javascript pour prévenir le navigateur de considérer le lien comme étant une instruction JavaScript.
Attention, lorsqu'un formulaire est soumis par sa méthode JavaScript submit, le gestionnaire d'événement du formulaire onsubmit n'est pas déclenché !
Créé le 2006-10-31 par Jérôme
En fait, il ne s'agit pas de deux boutons submit mais de deux boutons simples auxquels on affecte une action.
Voici le formulaire html :
Sélectionnez
<form name="formulaire" method="post" action="" onsubmit="return testsubmit()">
...
<input type="button" value="envoyer page A" onclick="gopage('pageA.asp')" />
<input type="button" value="envoyer page B" onclick="gopage('pageB.asp')" />
</form>
Et voici le script :
Sélectionnez
<script language="javascript">
// fonction pour le cas d'appui sur la touche entrée
function testsubmit() {
return !!document.formulaire.action;
}
//fonction pour choisir l'action
function gopage(page)
{
document.formulaire.action = page;
document.formulaire.submit();
}
</script>
Créé le 2004-01-21 par Jérôme
Vous voulez vérifier qu'un utilisateur a bien saisi une valeur dans un des champs de votre formulaire (le champ nom par exemple) :
Sélectionnez
function verification(){
if(document.getElementById('nom').value == ""){
alert ('Vous avez oublié de saisir un champ!!!!');
return false;
}
return true;
}
Et maintenant, le code de la balise <form> :
Mis à jour le 2004-01-21 par simone.51
Sélectionnez
var inputList = document.forms['monFormulaire'].elements;
var alertTxt = "";
for (unInput in inputList){
if(unInput.type=="text" && unInput.value.length==0){
alertTxt += "Le champ " + unInput.name + " n'a pas été rempli \n";
}
}
alert(alertTxt)
Le code ci-dessus peut être généralisé à d'autres types d'inputs.
Sélectionnez
function CheckDate(d) {
// Cette fonction vérifie le format JJ/MM/AAAA saisi et la validité de la date.
// Le séparateur est défini dans la variable separateur
var amin=1999; // année mini
var amax=2005; // année maxi
var separateur="/"; // separateur entre jour/mois/annee
var j=(d.substring(0,2));
var m=(d.substring(3,5));
var a=(d.substring(6));
var ok=1;
if ( ((isNaN(j))||(j<1)||(j>31)) && (ok==1) ) {
alert("Le jour n'est pas correct."); ok=0;
}
if ( ((isNaN(m))||(m<1)||(m>12)) && (ok==1) ) {
alert("Le mois n'est pas correct."); ok=0;
}
if ( ((isNaN(a))||(a<amin)||(a>amax)) && (ok==1) ) {
alert("L'année n'est pas correcte."); ok=0;
}
if ( ((d.substring(2,3)!=separateur)||(d.substring(5,6)!=separateur))
&& (ok==1) ) {
alert("Les séparateurs doivent être des "+separateur); ok=0;
}
if (ok==1) {
var d2=new Date(a,m-1,j);
j2=d2.getDate();
m2=d2.getMonth()+1;
a2=d2.getFullYear();
if ( (j!=j2)||(m!=m2)||(a!=a2) ) {
alert("La date "+d+" n'existe pas !");
ok=0;
}
}
return ok;
}
Mis à jour le 2009-03-06 par simone.51
Voici un exemple :
Sélectionnez
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>AutoTab Page</title>
<script type="text/javascript">
function Autotab(box, longueur, texte)
{
if (texte.length > longueur-1) {
document.getElementById('TB'+box).focus();
}
}
</script>
</head>
<body>
<input type="text" size="5" maxlength="5" length="20" name="TB1" id="TB1"
tabindex="1" onkeyup="Autotab(2, this.size, this.value)" />
<input type="text" size="2" maxlength="2" name="TB2" id="TB2" tabindex="3"
onkeyup="Autotab(3, this.size, this.value);" />
<input type="text" maxlength="5" name="TB3" id="TB3" tabindex="2" />
</body>
</html>
Mis à jour le 2009-03-17 par SpaceFrog
Voici un petit exemple bien utile :
Sélectionnez
<html>
<head>
<script type="text/javascript" language="javascript">
var pays = new Array; //nouveau tableau
pays[0] = new Array("p0", "pays0"); //nouveau tableau, on va donc avoir pays[0][0]="p0"
pays[1] = new Array("p1", "pays1");
pays[2] = new Array("p2", "pays2");
var ville=new Array;
// pays0
ville["p0"] = new Array;
ville["p0"][0] = new Array("p0v0", "pays0-ville0");
ville["p0"][1] = new Array("p0v1", "pays0-ville1");
//pays1
ville["p1"]=new Array;
ville["p1"][0] = new Array("p1v0", "pays1-ville0");
ville["p1"][1] = new Array("p1v1", "pays1-ville1");
//pays2
ville["p2"] = new Array;
ville["p2"][0] = new Array("p2v0", "pays2-ville0");
ville["p2"][1] = new Array("p2v1", "pays2-ville1");
var rue = new Array;
//pays0-ville0
rue["p0v0"] = new Array;
rue["p0v0"][0] = new Array("p0v0r0", "pays0-ville0-rue0");
rue["p0v0"][1] = new Array("p0v0r1", "pays0-ville0-rue1");
//pays0-ville1
rue["p0v1"] = new Array;
rue["p0v1"][0] = new Array("p0v1r0", "pays0-ville1-rue0");
rue["p0v1"][1] = new Array("p0v1r1", "pays0-ville1-rue1");
rue["p0v1"][2] = new Array("p0v1r2", "pays0-ville1-rue2");
//pays1-ville0
rue["p1v0"] = new Array;
rue["p1v0"][0] = new Array("p1v0r0", "pays1-ville0-rue0");
rue["p1v0"][1] = new Array("p1v0r1", "pays1-ville0-rue1");
//pays1-ville1
rue["p1v1"] = new Array;
rue["p1v1"][0] = new Array("p1v1r0", "pays1-ville1-rue0");
rue["p1v1"][1] = new Array("p1v1r1", "pays1-ville1-rue1");
//pays2-ville0
rue["p2v0"] = new Array;
rue["p2v0"][0] = new Array("p2v0r0", "pays2-ville0-rue0");
rue["p2v0"][1] = new Array("p2v0r1", "pays2-ville0-rue1");
//pays1-ville1
rue["p2v1"] = new Array;
rue["p2v1"][0] = new Array("p2v1r0", "pays2-ville1-rue0");
rue["p2v1"][1] = new Array("p2v1r1", "pays2-ville1-rue1");
rue["p2v1"][2] = new Array("p2v1r2", "pays2-ville1-rue2");
function filltheselect(liste, choix)
{switch (liste)
{
case "listepays":
raz("listeville");
raz("listerue");
for (i=0; i<ville[choix].length; i++)
{
new_option = new Option(ville[choix][i][1],ville[choix][i][0]);
document.formu.elements["listeville"].
options[document.formu.elements["listeville"].length]=new_option;
}
for (i=0; i<rue[choix+"v0"].length; i++)
{
new_option = new Option(rue[choix+"v0"][i][1],rue[choix+"v0"][i][0]);
document.formu.elements["listerue"].options[document.formu.
elements["listerue"].length]=new_option;
}
break;
case "listeville":
raz("listerue");
for (i=0; i<rue[choix].length; i++)
{
new_option = new Option(rue[choix][i][1],rue[choix][i][0]);
document.formu.elements["listerue"].options[document.formu.
elements["listerue"].length]=new_option;
}
break;
}
}
function raz(liste)
{l=document.formu.elements[liste].length;
for (i=l; i>=0; i--)
document.formu.elements[liste].options[i]=null;
}
</script>
</head>
<body>
<form name="formu">
Choisir un pays
<select name="listepays" onChange='filltheselect(this.name, this.value)'>
<script language="javascript">
for (i=0; i<pays.length; i++)
document.write("<option value=\"" +pays[i][0]+ "\">" +pays[i][1]);
</script>
</select>
<br>
Choisir une ville
<select name="listeville" onChange='filltheselect(this.name, this.value)'>
<script language="javascript">
for (i=0; i<ville["p0"].length; i++)
document.write("<option value=\"" +ville["p0"][i][0]+ "\">" +ville["p0"][i][1]);
</script>
</select>
<br>
Choisir une rue
<select name="listerue">
<script language="javascript">
for (i=0; i<rue["p0v0"].length; i++)
document.write("<option value=\"" +rue["p0v0"][i][0]+ "\">" +rue["p0v0"][i][1]);
</script>
</select>
</form>
</body>
</html>
Mis à jour le 2009-03-26 par Jérôme
Voici le code à insérer dans les balises <script> :
Sélectionnez
function ajout(listeDep){
var existe = 0;
if(listeDep.options[listeDep.selectedIndex].value != 0){
for(i=1;i< document.getElementById('arrive').length ;i++){
if(document.getElementById('arrive').options[i].text ==
listeDep.options[listeDep.selectedIndex].text){
existe = 1;
}
else{
if(existe == 1){
existe = 1;
}
else{
existe = 0;
}
}
}
if(existe == 0){
var option = new Option(listeDep.options[listeDep.selectedIndex].
text,listeDep.options[listeDep.selectedIndex].value);
document.getElementById('arrive').options[0].text =
"-- Liste des clients séléctionnés --";
document.getElementById('arrive').options[0].value = 0;
document.getElementById('arrive').options[(document.
getElementById('arrive').length)] = option;
}
else{
alert('Cette option est déjà sélectionnée !!!');
}
}
}
function enleve(listeArr){
if(listeArr.options[listeArr.selectedIndex].value == 0){
}
else{
listeArr.options[listeArr.selectedIndex] = null;
}
}
Et voici le formulaire :
Sélectionnez
<table width="90%">
<tr>
<td>
<select name="depart" size="5" ondblclick="ajout(this)"
style="scrollbar-3dlight-color:red; border: red 1px solid; background-color: #f2f2f2">
<option value="0">
Double clic pour sélectionner un client
</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
</td>
<td>
<select name="arrive" id="arrive" size="5" ondblclick="enleve(this);"
style="scrollbar-3dlight-color:red; border: red 1px solid; background-color: #f2f2f2">
<option value="0">
Aucune option n'est sélectionnée !!!
</option>
</select>
</td>
</tr>
</table>
Créé le 2004-01-21 par simone.51
Voici le code de la fonction :
Sélectionnez
function changement()
{
if (document.getElementById('cb').checked)
document.getElementById('coucou').disabled=true;
else
document.getElementById('coucou').disabled=false;
}
et voici le code du champ texte et de la checkbox :
Créé le 2003-11-06 par simone.51
Par exemple, si l'on veut remplacer toutes les virgules par un point.
Voici le code de la fonction :
Sélectionnez
function virgule(texte) {
if (texte.substr(texte.length-1,1) == ",") {
document.getElementById('champ').value=texte.substr(0,texte.length-1)+ "." ;
}
}
Et voici le code du champ texte :
Créé le 2004-01-21 par simone.51
Sélectionnez
document.getElementById('nom_Champ').readOnly=false;
Créé le 2004-01-21 par simone.51
Sélectionnez
function chiffres(event) {
// Compatibilité IE / Firefox
if(!event&&window.event) {
event=window.event;
}
// IE
if(event.keyCode < 48 || event.keyCode > 57) {
event.returnValue = false;
event.cancelBubble = true;
}
// DOM
if(event.which < 48 || event.which > 57) {
event.preventDefault();
event.stopPropagation();
}
}
Sélectionnez
<input type="text" onkeypress="chiffres(event)">
Il suffit de mettre en place une iframe au même niveau que le div. Cela permet au contenu du div d'être affiché au dessus du select.
La méthode ci dessous permet de positionner l'iframe au niveau exact du div :
Sélectionnez
function putFrame(){
var f = document.createElement("iframe");
var d = document.getElementById("theDiv");
with(f.style){
position= "absolute";
width = d.offsetWidth+"px";
height= d.offsetHeight+"px";;
top= d.offsetTop+"px";
left= d.offsetLeft+"px";
zIndex= "1";
}
document.body.appendChild(f);
}
Créé le 2006-10-31 par siddh