| auteur : simone.51 | <script language='Javascript'>
setTimeout(function(){monForm.submit();},2500);<br/>
</script> |
|
| auteur : Jérôme |
Vous souhaitez pour des raisons esthétiques (ou autres) que votre
formulaire soit 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.
<a href="javascript:document.forms['monFormulaire'].submit()">valider</a> |
 |
Attention, lorsqu'un formulaire est soumis par sa méthode javascript submit, le
gestionnaire d'évenement du formulaire onsubmit n'est pas déclenché!
|
|
| auteur : Jérôme | En fait, il ne s'agit pas de deux boutons submit mais de deux boutons simples auxquel on affecte une action.
Voici le formulaire html :
<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 :
<script language="javascript">
function testsubmit() {
if (document.formulaire.action=="") return false;
return true ;
}
function gopage(page)
{
document.formulaire.action = page;
document.formulaire.submit();
}
</script> |
|
| auteur : simone.51 | Vous voulez vérifier qu'un utilisateur a bien saisi une valeur dans un des champs de votre formulaire (le champ nom par exemple) :
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> :
<form action='page.html' method='post' onsubmit='return verification();'>
<input type='text' name='nom' id='nom'> |
|
| auteurs : SpaceFrog, denisC | var inputList = document.forms['monFormulaire'].elements;
vat 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.
|
| auteur : simone.51 | function CheckDate(d) {
var amin=1999;
var amax=2005;
var separateur="/";
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.getYear();
if (a2<=100) {a2=1900+a2}
if ( (j!=j2)||(m!=m2)||(a!=a2) ) {
alert("La date "+d+" n'existe pas !");
ok=0;
}
}
return ok;
} |
|
| auteur : SpaceFrog | Voici un exemple :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>AutoTab Page</title>
<script language="JavaScript" 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"
tabindex="1" onkeyup="Autotab(2, this.size, this.value)"/>
<input type="text" size="2" maxlength="2" name="TB2" tabindex="3"
onkeyup="Autotab(3, this.size, this.value); "/>
<input type="text" maxlength="5" name="TB3" tabindex="2" />
</body>
</html> |
|
| auteur : Jérôme | Voici un petit exemple bien utile :
<html>
<head>
<script language="javascript">
var pays = new Array;
pays[0] = new Array("p0", "pays0");
pays[1] = new Array("p1", "pays1");
pays[2] = new Array("p2", "pays2");
var ville=new Array;
ville["p0"] = new Array;
ville["p0"][0] = new Array("p0v0", "pays0-ville0");
ville["p0"][1] = new Array("p0v1", "pays0-ville1");
ville["p1"]=new Array;
ville["p1"][0] = new Array("p1v0", "pays1-ville0");
ville["p1"][1] = new Array("p1v1", "pays1-ville1");
ville["p2"] = new Array;
ville["p2"][0] = new Array("p2v0", "pays2-ville0");
ville["p2"][1] = new Array("p2v1", "pays2-ville1");
var rue = new Array;
rue["p0v0"] = new Array;
rue["p0v0"][0] = new Array("p0v0r0", "pays0-ville0-rue0");
rue["p0v0"][1] = new Array("p0v0r1", "pays0-ville0-rue1");
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");
rue["p1v0"] = new Array;
rue["p1v0"][0] = new Array("p1v0r0", "pays1-ville0-rue0");
rue["p1v0"][1] = new Array("p1v0r1", "pays1-ville0-rue1");
rue["p1v1"] = new Array;
rue["p1v1"][0] = new Array("p1v1r0", "pays1-ville1-rue0");
rue["p1v1"][1] = new Array("p1v1r1", "pays1-ville1-rue1");
rue["p2v0"] = new Array;
rue["p2v0"][0] = new Array("p2v0r0", "pays2-ville0-rue0");
rue["p2v0"][1] = new Array("p2v0r1", "pays2-ville0-rue1");
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='javascript: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='javascript: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> |
|
| auteur : simone.51 | Voici le code à insérer dans les balises <script> :
function ajout(listeDep){
var existe = 0;
if(listeDep.options[listeDep.selectedIndex].value == 0){
}
else{
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éléctionnée !!!');
}
}
}
function enleve(listeArr){
if(listeArr.options[listeArr.selectedIndex].value == 0){
}
else{
listeArr.options[listeArr.selectedIndex] = null;
}
} |
Et voici le formulaire :
<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éléctionnée !!!
</option>
</select>
</td>
</tr>
</table> |
|
| auteur : simone.51 | Voici le code de la fonction :
function changement()
{
if (document.getElementById('cb').checked)
document.getElementById('coucou').disabled=true;
else
document.getElementById('coucou').disabled=false;
} |
et voici le code de la textBox et de la checkbox :
<input type="checkbox" id="cb" onclick="javascript:changement()">
<input type="text" id='coucou'> |
|
| auteur : simone.51 | Par exemple, si l'on veut remplacer toutes les virgules par un point.
Voici le code de la fonction :
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 :
<input type="text" id="champ" onKeyUp="virgule(this.value);"> |
|
| auteur : simone.51 | document.getElementById('nom_Champ').readOnly=false; |
|
| auteurs : neo.51, denisC | function chiffres(event) {
if(!event&&window.event) {
event=window.event;
}
if(event.keyCode < 48 || event.keyCode > 57) {
event.returnValue = false;
event.cancelBubble = true;
}
if(event.which < 48 || event.which > 57) {
event.preventDefault();
event.stopPropagation();
}
} |
<input type="text" onkeypress="chiffres(event)"> |
|
lien : Exemple d'utilisation de ce script
|
| auteur : siddh |
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:
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);
} |
|
lien : Exemple d'utilisation de ce script
|
Consultez les autres F.A.Q's
Les sources présentés sur cette pages sont libre de droits,
et vous pouvez les utiliser à votre convenance. Par contre cette page de présentation de ces sources constitue une oeuvre intellectuelle protégée par les droits d'auteurs.
Copyright ©2004
Developpez LLC. Tout droits réservés Developpez LLC.
Aucune reproduction, même partielle, ne peut être faite de ce site et de
l'ensemble de son contenu : textes, documents et images sans l'autorisation
expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à 3 ans
de prison et jusqu'à 300 000 E de dommages et intérets.
Cette page est déposée à la SACD.
|