JavaScript DHTML/Form Control/Form Demo

Материал из Web эксперт
Перейти к: навигация, поиск

A one of everything HTML form

   <source lang="html4strict">
  

/* Examples From JavaScript: The Definitive Guide, Fourth Edition Legal matters: these files were created by David Flanagan, and are Copyright (c) 2001 by David Flanagan. You may use, study, modify, and distribute them for any purpose. Please note that these examples are provided "as-is" and come with no warranty of any kind. David Flanagan

  • /

<html> <form name="everything">

Username:
[1]<input type="text" name="username" size="15">
Password:
[2]<input type="password" name="password" size="15">
Input Events[3]
<textarea name="textarea" rows="20" cols="28"></textarea>
      [9]<input type="button" value="Clear" name="clearbutton">
[10]<input type="submit" name="submitbutton" value="Submit">
[11]<input type="reset" name="resetbutton" value="Reset">
Filename: [4]<input type="file" name="file" size="15">
My Computer Peripherals:
      [5]<input type="checkbox" name="peripherals" value="modem">56K Modem
[5]<input type="checkbox" name="peripherals" value="printer">Printer
[5]<input type="checkbox" name="peripherals" value="tape">Tape Backup
My Web Browser:
      [6]<input type="radio" name="browser" value="nn">Netscape
[6]<input type="radio" name="browser" value="ie">Internet Explorer
[6]<input type="radio" name="browser" value="other">Other
My Hobbies:[7]
      <select multiple="multiple" name="hobbies" size="4">
        <option value="programming">Hacking JavaScript
        <option value="surfing">Surfing the Web
        <option value="caffeine">Drinking Coffee
        <option value="annoying">Annoying my Friends
</select>
My Favorite Color:
[8]
      <select name="color">
        <option value="red">Red        <option value="green">Green
        <option value="blue">Blue      <option value="white">White
        <option value="violet">Violet  <option value="peach">Peach
</select>

</form>

Form Elements [1] Text [2] Password [3] Textarea [4] FileUpload [5] Checkbox
[6] Radio [7] Select (list) [8] Select (menu) [9] Button [10] Submit [11] Reset

<script> // This generic function appends details of an event to the big Textarea // element in the form above. It is called from various event handlers. function report(element, event) {

   var elmtname = element.name;
   if ((element.type == "select-one") || (element.type == "select-multiple")){
       value = " ";
       for(var i = 0; i < element.options.length; i++)
           if (element.options[i].selected) 
               value += element.options[i].value + " ";
   }
   else if (element.type == "textarea") value = "...";
   else value = element.value;
   var msg = event + ": " + elmtname + " (" + value + ")\n";
   var t = element.form.textarea;
   t.value = t.value + msg;

} // This function adds a bunch of event handlers to every element in a form. // It doesn"t bother checking to see if the element supports the event handler, // it just adds them all. Note that the event handlers call report() above. // Note that we"re defining event handlers by assigning functions to the // properties of JavaScript objects rather than by assigning strings to // the attributes of HTML elements. function addhandlers(f) {

   // Loop through all the elements in the form
   for(var i = 0; i < f.elements.length; i++) {
       var e = f.elements[i];
       e.onclick = function() { report(this, "Click"); }
       e.onchange = function() { report(this, "Change"); }
       e.onfocus = function() { report(this, "Focus"); }
       e.onblur = function() { report(this, "Blur"); }
       e.onselect = function() { report(this, "Select"); }
   }
   // Define some special-case event handlers for the three buttons:
   f.clearbutton.onclick = function() {
       this.form.textarea.value=""; report(this,"Click");
   }
   f.submitbutton.onclick = function () {
       report(this, "Click"); return false;
   }
   f.resetbutton.onclick = function() {
       this.form.reset(); report(this, "Click"); return false;
   }

} // Finally, activate our form by adding all possible event handlers! addhandlers(document.everything); </script> </html>



 </source>
   
  


Change string to big, bold, fixed with form control

   <source lang="html4strict">
  

<html> <head>

 <script type="text/javascript">
   function showWindow() {
     var txt = document.form1.stringField.value;
     var clr = "";
     var sze = "";
     if (document.form1.bigBox.checked) txt = txt.big();
     if (document.form1.boldBox.checked) txt = txt.bold();
     if (document.form1.fixedBox.checked) txt = txt.fixed();
     objWindow = window.open("", "","width=600,height=300");
     objWindow.document.write(txt);
     objWindow.document.close();
 }
 </script>

</head> <body>

 <form method="post" name="form1" action="null">
     String:<input type="text" size="40" maxlength="256" name="stringField" />
     Style:
     <input type="checkbox" name="bigBox" value="ON" />Big
     <input type="checkbox" name="boldBox" value="ON" />Bold
     <input type="checkbox" name="fixedBox" value="ON" />Fixed
   <input type="button" name="Show" value="Show" onclick="showWindow()" />
 </form>

</body> </html>


 </source>
   
  


Change string to italics, small, strike with form control

   <source lang="html4strict">
  

<html> <head>

 <script type="text/javascript">
   function showWindow() {
     var txt = document.form1.stringField.value;
     if (document.form1.italicsBox.checked) txt = txt.italics();
     if (document.form1.smallBox.checked) txt = txt.small();
     if (document.form1.strikeBox.checked) txt = txt.strike();
     objWindow = window.open("", "","width=600,height=300");
     objWindow.document.write(txt);
     objWindow.document.close();
 }
 </script>

</head> <body>

 <form method="post" name="form1" action="null">
     String:<input type="text" size="40" maxlength="256" name="stringField" />
     Style:
     <input type="checkbox" name="boldBox" value="ON" />Bold
     <input type="checkbox" name="fixedBox" value="ON" />Fixed
     <input type="checkbox" name="italicsBox" value="ON" />Italics
     <input type="checkbox" name="smallBox" value="ON" />Small
     <input type="checkbox" name="strikeBox" value="ON" />Strike
   <input type="button" name="Show" value="Show" onclick="showWindow()" />
 </form>

</body> </html>


 </source>
   
  


Change string to subscript and superscript with form control

   <source lang="html4strict">
  

<html> <head>

 <script type="text/javascript">
   function showWindow() {
     var txt = document.form1.stringField.value;
     if (document.form1.subBox.checked) txt = txt.sub();
     if (document.form1.supBox.checked) txt = txt.sup();
     objWindow = window.open("", "","width=600,height=300");
     objWindow.document.write(txt);
     objWindow.document.close();
 }
 </script>

</head> <body>

 <form method="post" name="form1" action="null">
     String:<input type="text" size="40" maxlength="256" name="stringField" />
     Style:
     <input type="checkbox" name="subBox" value="ON" />Sub
     <input type="checkbox" name="supBox" value="ON" />Sup
   <input type="button" name="Show" value="Show" onclick="showWindow()" />
 </form>

</body> </html>


 </source>
   
  


Collapsing Forms

   <source lang="html4strict">
  

<html> <head> <title>Collapsing Forms</title> <style type="text/css"> </style> <script type="text/javascript"> window.onload=setup; function setup() {

  document.getElementById("one").style.display="none";
  document.getElementById("two").style.display="none";

} function show(newItem) {

  var item = document.getElementById(newItem);
  if (item.style.display=="none") {
      item.style.display="block";
  } else {
      item.style.display="none";
  }

} </script> </head> <body> <form>

Name(click me to expand)
       <label>First Name:</label>
<input type="text" name="firstname" />
Address(click me to expand)
       <label>Street Address:</label>
<input type="text" name="street" />

</form> </body> </html>


 </source>
   
  


Computes the french VAT and amounts including all taxes, and converts a currency into Euro

   <source lang="html4strict">
  

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML>

 <HEAD>
   <TITLE>JsLib 1.3 - Exemple - monnaie.js</TITLE>
   <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
   <META NAME="Author" CONTENT="Etienne CHEVILLARD">
   
   
   <SCRIPT TYPE="text/javascript" LANGUAGE="Javascript">

/* monnaie.js

* Role : calcule la TVA et les montants HT et TTC, et convertit une devise en Euro
* Projet : JsLib
* Auteur : Etienne CHEVILLARD (echevillard@users.sourceforge.net)
* Version : 1.3
* Creation : 30/04/2001
* Mise a jour : 23/02/2005
*/

// --- Variables globales --- // taux par defaut var monnaie_taux_TVA=0.196; var monnaie_taux_Euro=6.55957; // --- Fonctions --- // retourne un arrondi a deux decimales du montant specifie function calculerArrondi(montant) {

 var marr=parseFloat(montant)*100
 marr=Math.round(marr)/100;
 return (parseFloat(marr));

} // fin calculerArrondi(montant) // calcule le montant HT a partir du montant TTC specifie function calculerMontantHT(montant) {

 var mres;
 var mttc=parseFloat(montant);
 if (mttc) {
   mres=mttc*(1/(1+monnaie_taux_TVA));
   mres=calculerArrondi(mres);
   return (parseFloat(mres));
 } else {
   return (0);
 }

} // fin calculerMontantHT(montant) // calcule le montant TTC a partir du montant HT specifie function calculerMontantTTC(montant) {

 var mres;
 var mht=parseFloat(montant);
 if (mht) {
   mres=mht*(1+monnaie_taux_TVA);
   mres=calculerArrondi(mres);
   return (parseFloat(mres));
 } else {
   return (0);
 }

} // fin calculerMontantTTC(montant) // calcule la TVA a appliquer sur le montant HT specifie function calculerTVASurHT(montant) {

 var mres;
 var mht=parseFloat(montant);
 if (mht) {
   mres=mht*monnaie_taux_TVA;
   mres=calculerArrondi(mres);
   return (parseFloat(mres));
 } else {
   return (0);
 }

} // fin calculerTVASurHT(montant) // calcule la TVA appliquee sur le montant TTC specifie function calculerTVASurTTC(montant) {

 var mres;
 var mttc=parseFloat(montant);
 if (mttc) {
   mres=mttc*(monnaie_taux_TVA/(1+monnaie_taux_TVA));
   mres=calculerArrondi(mres);
   return (parseFloat(mres));
 } else {
   return (0);
 }

} // fin calculerTVASurTTC(montant) // convertit en Euro le montant specifie (en devise locale) function convertirDeviseEnEuro(montant) {

 var mres;
 var mdev=parseFloat(montant);
 if (mdev) {
   mres=mdev*(1/monnaie_taux_Euro);
   mres=calculerArrondi(mres);
   return (parseFloat(mres));
 } else {
   return (0);
 }

} // fin convertirDeviseEnEuro(montant) // convertit en devise le montant specifie (en Euro) function convertirEuroEnDevise(montant) {

 var mres;
 var meur=parseFloat(montant);
 if (meur) {
   mres=meur*monnaie_taux_Euro;
   mres=calculerArrondi(mres);
   return (parseFloat(mres));
 } else {
   return (0);
 }

} // fin convertirEuroEnDevise(montant) // modifie le taux de conversion Euro/devise avec la valeur specifiee function modifierTauxEuro(taux) {

 var mnouv=parseFloat(taux);
 if (mnouv) {
   monnaie_taux_Euro=mnouv;
   return (true);
 } else {
   return (false);
 }

} // fin modifierTauxEuro(taux) // modifie le taux de TVA avec la valeur specifiee function modifierTauxTVA(taux) {

 var mnouv=parseFloat(taux);
 if (mnouv) {
   monnaie_taux_TVA=(mnouv/100);
   return (true);
 } else {
   return (false);
 }

} // fin modifierTauxTVA(taux) // retourne le taux de conversion Euro/devise function obtenirTauxEuro() {

 return (parseFloat(monnaie_taux_Euro));

} // fin obtenirTauxEuro() // retourne le taux de TVA function obtenirTauxTVA() {

 return (parseFloat(monnaie_taux_TVA*100));

} // fin obtenirTauxTVA()

   </SCRIPT>
 </HEAD>
 <BODY>

JsLib 1.3


Exemple - monnaie.js

   <NOSCRIPT>

Erreur : votre navigateur ne reconnait pas le Javascript ou est configuré pour ne pas prendre en compte le code Javascript. Dans ce dernier cas, vous pouvez modifier la configuration dans les préférences/options de votre navigateur.


   </NOSCRIPT>
   <FORM ACTION="GET" NAME="f">
     <P>Taux de TVA :
<INPUT TYPE=BUTTON VALUE="Afficher le taux" onClick="alert("Taux de TVA : " + obtenirTauxTVA() + " %")"> <INPUT TYPE=BUTTON VALUE="Modifier le taux" onClick="modifierTauxTVA(window.prompt("Indiquez le taux de TVA en % :", obtenirTauxTVA()))">
     <P>Calcul des prix HT et TTC et de la TVA :
Prix HT : <INPUT NAME="ht" TYPE=TEXT VALUE="0" SIZE=20> <INPUT TYPE=BUTTON VALUE="Calculer le prix TTC" onClick="document.f.tva.value=calculerTVASurHT(document.f.ht.value);document.f.ttc.value=calculerMontantTTC(document.f.ht.value);">
TVA : <INPUT NAME="tva" TYPE=TEXT VALUE="0" SIZE=20>  
Prix TTC : <INPUT NAME="ttc" TYPE=TEXT VALUE="0" SIZE=20> <INPUT TYPE=BUTTON VALUE="Calculer le prix HT" onClick="document.f.tva.value=calculerTVASurTTC(document.f.ttc.value);document.f.ht.value=calculerMontantHT(document.f.ttc.value);">
     <P>Taux de conversion Euro :
<INPUT TYPE=BUTTON VALUE="Afficher le taux" onClick="alert("Taux de conversion Euro -> devise : " + obtenirTauxEuro())"> <INPUT TYPE=BUTTON VALUE="Modifier le taux" onClick="modifierTauxEuro(window.prompt("Indiquez le taux de conversion Euro -> devise :", obtenirTauxEuro()))">
     <P>Conversion d"un prix en Euro :
Prix en devise locale : <INPUT NAME="dev" TYPE=TEXT VALUE="0" SIZE=20> <INPUT TYPE=BUTTON VALUE="Convertir en Euro" onClick="document.f.eur.value=convertirDeviseEnEuro(document.f.dev.value);">
Prix en Euro : <INPUT NAME="eur" TYPE=TEXT VALUE="0" SIZE=20> <INPUT TYPE=BUTTON VALUE="Convertir en devise locale" onClick="document.f.dev.value=convertirEuroEnDevise(document.f.eur.value);">
   </FORM>

   <P>Rappel : en Javascript, le séparateur décimal est le point.
 </BODY>

</HTML>



 </source>
   
  


Create a link with value in form controls

   <source lang="html4strict">
  

<html> <head>

 <script type="text/javascript">
   function showWindow(){
     var txt = document.form1.stringField.value
     if (document.form1.hypertext[0].checked){
       txt = txt.link(document.form1.jumptoField.value);
     }else{
       if (document.form1.hypertext[1].checked){
         txt = txt.anchor(document.form1.jumptoField.value);
       }
     }
     document.write(txt);
   }
 </script>

</head> <body>

 <form method="post" name="form1" action="null">
     Text:
     <input type="text" size="20" maxlength="256" name="stringField" />
     <input type="radio" name="hypertext" value="Link" checked="checked" />
     Link:
     <input type="radio" name="hypertext" value="Anchor" />
     Anchor:
     Jump To:
     <input type="text" size="30" maxlength="256" name="jumptoField" />
   <input type="button" name="Show" value="Show" onclick="showWindow()" />
 </form>

</body> </html>


 </source>
   
  


Greeting card genertor

   <source lang="html4strict">
  

/* JavaScript Application Cookbook By Jerry Bradenbaugh Publisher: O"Reilly Series: Cookbooks ISBN: 1-56592-577-7

  • /



 </source>
   
  

<A href="http://www.wbex.ru/Code/JavaScriptDownload/GreetingCardGenerator.zip">GreetingCardGenerator.zip( 260 k)</a>


Online test

   <source lang="html4strict">
  

/* JavaScript Application Cookbook By Jerry Bradenbaugh Publisher: O"Reilly Series: Cookbooks ISBN: 1-56592-577-7

  • /



 </source>
   
  

<A href="http://www.wbex.ru/Code/JavaScriptDownload/OnlineTest.zip">OnlineTest.zip( 10 k)</a>


Passing the form Object as a Parameter

   <source lang="html4strict">
  

<html> <head> <title>Beatle Picker</title> <script type="text/javascript"> function processData(form) {

   for (var i = 0; i < form.Beatles.length; i++) { 
       if (form.Beatles[i].checked) { 
           break; 
       } 
   } 
   var chosenBeatle = form.Beatles[i].value; 
   var chosenSong = form.song.value; 
   alert(chosenSong + " " + chosenBeatle ); 

}

function checkSong(songTitle) {

   var enteredSong = songTitle.value; 
   alert(enteredSong); 

} </script>

</head> <body>

<form name="Abbey Road"> Choose your favorite Beatle: <input type="radio" name="Beatles" id="Beatles1" value="John Lennon" checked="true" />John <input type="radio" name="Beatles" id="Beatles2" value="Paul McCartney" />Paul <input type="radio" name="Beatles" id="Beatles3" value="George Harrison" />George <input type="radio" name="Beatles" id="Beatles4" value="Ringo Starr" />Ringo <p>Enter the name of your favorite Beatles song:

<input type="text" name="song" id="song" value="value" onchange="checkSong(this)" />

<input type="button" name="process" id="process" value="Process" onclick="processData(this.form)" />

</form> </body> </html>


 </source>
   
  


Searchengine MS IE

   <source lang="html4strict">
  

/* JavaScript Application Cookbook By Jerry Bradenbaugh Publisher: O"Reilly Series: Cookbooks ISBN: 1-56592-577-7

  • /



 </source>
   
  

<A href="http://www.wbex.ru/Code/JavaScriptDownload/SearchengineMSIE.zip">SearchengineMSIE.zip( 12 k)</a>


Set font color with form control

   <source lang="html4strict">
  

<html> <head>

 <script type="text/javascript">
   function showWindow() {
     var txt = document.form1.stringField.value;
     var clr = "";
     clr = document.form1.colorList.options[document.form1.colorList.options.selectedIndex].text;
     txt = txt.fontcolor(clr);
     objWindow = window.open("", "","width=600,height=300");
     objWindow.document.write(txt);
     objWindow.document.close();
 }
 </script>

</head> <body>

 <form method="post" name="form1" action="null">
     String:<input type="text" size="40" maxlength="256" name="stringField" />
     Color:
     <select name="colorList" size="1">
       <option selected="selected">black</option>
       <option>green</option>
       <option>red</option>
     </select>
   <input type="button" name="Show" value="Show" onclick="showWindow()" />
 </form>

</body> </html>


 </source>
   
  


Set font size with form control

   <source lang="html4strict">
  

<html> <head>

 <script type="text/javascript">
   function showWindow() {
     var txt = document.form1.stringField.value;
     var sze = "";
     sze = document.form1.sizeList.options[document.form1.sizeList.options.selectedIndex].text;
     txt = txt.fontsize(sze);
     objWindow = window.open("", "","width=600,height=300");
     objWindow.document.write(txt);
     objWindow.document.close();
 }
 </script>

</head> <body>

 <form method="post" name="form1" action="null">
     String:<input type="text" size="40" maxlength="256" name="stringField" />
     Size:
     <select name="sizeList" size="1">
       <option selected="selected">1</option>
       <option>2</option>
       <option>3</option>
       <option>4</option>
       <option>5</option>
       <option>6</option>
       <option>7</option>
     </select>
   <input type="button" name="Show" value="Show" onclick="showWindow()" />
 </form>

</body> </html>


 </source>