JavaScript DHTML/Form Control/Form Demo

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

A one of everything HTML form

   
/*
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">  <!-- A one-of-everything HTML form... -->
 <table border="border" cellpadding="5">   <!-- ...in a big HTML table. -->
   <tr>
     <td>Username:<br>[1]<input type="text" name="username" size="15"></td>
     <td>Password:<br>[2]<input type="password" name="password" size="15"></td>
     <td rowspan="4">Input Events[3]<br>
       <textarea name="textarea" rows="20" cols="28"></textarea></td>
     <td rowspan="4" align="center" valign="center">
       [9]<input type="button" value="Clear" name="clearbutton"><br>
       [10]<input type="submit" name="submitbutton" value="Submit"><br>
       [11]<input type="reset" name="resetbutton" value="Reset"></td></tr>
   <tr>
     <td colspan="2">
       Filename: [4]<input type="file" name="file" size="15"></td></tr>
   <tr>
     <td>My Computer Peripherals:<br>
       [5]<input type="checkbox" name="peripherals" value="modem">56K Modem<br>
       [5]<input type="checkbox" name="peripherals" value="printer">Printer<br>
       [5]<input type="checkbox" name="peripherals" value="tape">Tape Backup</td>
     <td>My Web Browser:<br>
       [6]<input type="radio" name="browser" value="nn">Netscape<br>
       [6]<input type="radio" name="browser" value="ie">Internet Explorer<br>
       [6]<input type="radio" name="browser" value="other">Other</td></tr>
   <tr>
     <td>My Hobbies:[7]<br>
       <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></td>
     <td align="center" valign="center">My Favorite Color:<br>[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></td></tr>
 </table>
</form>
<div align="center">        <!-- Another table--the key to the one above. -->
  <table border="4" bgcolor="pink" cellspacing="1" cellpadding="4">
    <tr>
      <td align="center"><b>Form Elements</b></td>
      <td>[1] Text</td>  <td>[2] Password</td>  <td>[3] Textarea</td>
      <td>[4] FileUpload</td> <td>[5] Checkbox</td></tr>
    <tr>
      <td>[6] Radio</td>  <td>[7] Select (list)</td>
      <td>[8] Select (menu)</td>  <td>[9] Button</td>
      <td>[10] Submit</td>  <td>[11] Reset</td></tr>
  </table>
</div>
<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>



Change string to big, bold, fixed with form control

   
<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>



Change string to italics, small, strike with form control

   
<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>



Change string to subscript and superscript with form control

   
<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>



Collapsing Forms

   
<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>
    <div class="label" onclick="show("one")">Name(click me to expand)</div>
    <div class="elements" id="one">
        <label>First Name:</label><br /><input type="text" name="firstname" />
    </div>
    <div class="label" onclick="show("two")">Address(click me to expand)</div>
    <div class="elements" id="two">
        <label>Street Address:</label><br /><input type="text" name="street" />
    </div>
</form>
</body>
</html>



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

   
<!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">
    
    <!-- monnaie.js -->
    <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>
    <H1>JsLib 1.3</H1>
    <HR>
    <H2>Exemple - monnaie.js</H2>
    <NOSCRIPT>
      <P><I>Erreur : votre navigateur ne reconnait pas le Javascript ou est configur&eacute; pour ne
      pas prendre en compte le code Javascript. Dans ce dernier cas, vous pouvez modifier la
      configuration dans les pr&eacute;f&eacute;rences/options de votre navigateur.</I>
      <HR>
    </NOSCRIPT>
    <FORM ACTION="GET" NAME="f">
      <P>Taux de TVA :
        <TABLE SUMMARY="" BORDER=0><TR>
        <TD><INPUT TYPE=BUTTON VALUE="Afficher le taux"
          onClick="alert("Taux de TVA : " + obtenirTauxTVA() + " %")"></TD>
          <TD><INPUT TYPE=BUTTON VALUE="Modifier le taux"
          onClick="modifierTauxTVA(window.prompt("Indiquez le taux de TVA en % :", obtenirTauxTVA()))"></TD>
        </TR></TABLE>
      <P>Calcul des prix HT et TTC et de la TVA :
        <TABLE SUMMARY="" BORDER=0><TR>
        <TD>Prix HT :</TD>
        <TD><INPUT NAME="ht" TYPE=TEXT VALUE="0" SIZE=20></TD>
          <TD><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);"></TD>
        </TR><TR>
      <TD>TVA :</TD>
        <TD><INPUT NAME="tva" TYPE=TEXT VALUE="0" SIZE=20></TD>
          <TD>&nbsp;</TD>
      </TR><TR>
      <TD>Prix TTC :</TD>
        <TD><INPUT NAME="ttc" TYPE=TEXT VALUE="0" SIZE=20></TD>
          <TD><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);"></TD>
        </TR></TABLE>
      <P>Taux de conversion Euro :
        <TABLE SUMMARY="" BORDER=0><TR>
        <TD><INPUT TYPE=BUTTON VALUE="Afficher le taux" onClick="alert("Taux de conversion Euro -> devise : " + obtenirTauxEuro())"></TD>
          <TD><INPUT TYPE=BUTTON VALUE="Modifier le taux"  onClick="modifierTauxEuro(window.prompt("Indiquez le taux de conversion Euro -> devise :", obtenirTauxEuro()))"></TD>
        </TR></TABLE>
      <P>Conversion d"un prix en Euro :
        <TABLE SUMMARY="" BORDER=0><TR>
        <TD>Prix en devise locale :</TD>
        <TD><INPUT NAME="dev" TYPE=TEXT VALUE="0" SIZE=20></TD>
          <TD><INPUT TYPE=BUTTON VALUE="Convertir en Euro"
          onClick="document.f.eur.value=convertirDeviseEnEuro(document.f.dev.value);"></TD>
      </TR><TR>
      <TD>Prix en Euro :</TD>
        <TD><INPUT NAME="eur" TYPE=TEXT VALUE="0" SIZE=20></TD>
          <TD><INPUT TYPE=BUTTON VALUE="Convertir en devise locale"
          onClick="document.f.dev.value=convertirEuroEnDevise(document.f.eur.value);"></TD>
        </TR></TABLE>
    </FORM>
    <HR>
    <P><I>Rappel : en Javascript, le s&eacute;parateur d&eacute;cimal est le point.</I>
  </BODY>
</HTML>



Create a link with value in form controls

   
<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>



Greeting card genertor

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


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


Online test

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


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


Passing the form Object as a Parameter

   
<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:<br /> 
<input type="text" name="song" id="song" value="value" onchange="checkSong(this)" /></p> 
<p><input type="button" name="process" id="process" value="Process" onclick="processData(this.form)" /></p> 
</form> 
</body> 
</html>



Searchengine MS IE

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


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


Set font color with form control

   
<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>



Set font size with form control

   
<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>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Form_Control/Form_Demo&oldid=2509»