Use Nice Graphics For Your Forms

  • MediaDesign
  • Loser
  • Loser
  • User avatar
  • Posts: 129
  • Loc: somewhere

Post 3+ Months Ago

Here is the Code demo http://www.mediadigits.com/Graphical-Form.htm



*******************************************************

The Source ::
INSERT INTO HEAD ::

Code: [ Select ]
<script language="JavaScript">
<!--BEGIN Script
/* script by Colm Mac Cárthaigh colmmacc@clubi.ie
* VERSION 1
* it would be nice to get an E-Mail from anyone who uses this script, but it's not obligatory
* please e-mail me with any problems also
* make sure checked.gif, unchecked.gif, selected.gif and unselected.gif are in the same directory as script
* check for new versions at http://www.clubi.ie/colmmacc/
*/
f=0
g=0
radarr = new Array();
radnams = new Array();
z=-1

if (document.images) {
 var checked = new Image()
 checked.src = "checked.gif"

 var unchecked = new Image()
 unchecked.src = "unchecked.gif"

 var selected = new Image()
 selected.src = "selected.gif"

 var unselected = new Image()
 unselected.src = "unselected.gif"
}

function addRadio(radioname, radiovalue, radiotext, selected) {
y = false
d = 0
  if (document.images) {
    for (var i=0; i<radnams.length; i++) {
    if (radnams[i]==radioname){
      y = true
      d = i
    }
    }
    if(y==false){
    ifhidden = '<input type="hidden" name="' + radioname + '" value="' + radiovalue + '">';
    z = radnams.length
    radarr[z] = new Array()
    radarr[z][0] = new Array()
    radarr[z][0][0] = radioname
    radarr[z][0][1] = radiovalue
    radnams[radnams.length] = radioname
    }
    else {
    ifhidden = "";
    h = radarr[d].length
    radarr[d][h] = new Array()
    radarr[d][h][0] = radioname
    radarr[d][h][1] = radiovalue
    }
    if(selected==1) {
        seltext="selected.gif"
        seletext="CHECKED"
    }
    else {
        seltext="unselected.gif"
        seletext="UNCHECKED"
    }    
    radname = "'" + radioname + "'";
    radval = "'" + radiovalue + "'";
    document.write('<a href="javascript:changemerad(' + radname + ', ' + radval + ', ' + f + ')"><img src="' + seltext + '" name="' + radiovalue +'" border=0></a> ' + radiotext + '<br>' + ifhidden);
    if(selected==1) {
        document.sample.elements[radioname].value=radiovalue
    }
    f++
  }
  else {
  browserver = navigator.userAgent
   if (browserver.indexOf("Mozilla/2") != -1) {

    if(selected==1) {
    seltext="CHECKED"
    }
    else{
        seltext=""
    }
    document.write('<INPUT TYPE="radio" NAME="' + radioname + '" VALUE="' + radiovalue + '" ' + seltext + '>' + radiotext + '<br>');
   }
  }    

}

function addCheck(checkname, checktext, checked) {
  if (document.images) {
    if(checked==1) {
        chetext="checked.gif"
    chectext="CHECKED"
    }
    else {
        chetext="unchecked.gif"
    chectext="UNCHECKED"
    }
    checname = "'" + checkname + "'";
    document.write('<a href="javascript:changemecheck(' + checname + ', ' + g + ')"><img src="' + chetext + '" name="che' + g +'" border=0></a> ' + checktext + '<input type="hidden" name="' + checkname + '" value="' + chectext + '"><br>');
    g++
  }
  else {
      browserver = navigator.userAgent
      if (browserver.indexOf("Mozilla/2") != -1) {
        if(checked==1) {
        chetext="CHECKED"
        }
        else {
            chetext=""
        }
        document.write('<INPUT TYPE="checkbox" NAME="' + checkname + '" VALUE="CHECKED" ' + chetext + '>' + checktext + '<br>');
      }
  }    
}

function changemecheck(chename ,chenum) {
    if(document.sample.elements[chename].value=="CHECKED") {
       document.images['che' + chenum +''].src = eval('unchecked.src')
       document.sample.elements[chename].value="UNCHECKED"
    }
    else if(document.sample.elements[chename].value=="UNCHECKED") {
       document.images['che' + chenum +''].src = eval('checked.src')
       document.sample.elements[chename].value="CHECKED"
    }
}

function changemerad(radname , radval, radnum) {
    if(document.sample.elements[radname].value!=radval) {
        for (i=0; i < radarr.length; i++) {
          for (j=0; j < radarr[i].length; j++) {
            if(radarr[i][j][0]==radname) {
                document.images[radarr[i][j][1]].src = eval('unselected.src')
            }
          }
        }
       document.images[radval].src = eval('selected.src')
       document.sample.elements[radname].value=radval
    }
}

// -->
</script>
  1. <script language="JavaScript">
  2. <!--BEGIN Script
  3. /* script by Colm Mac Cárthaigh colmmacc@clubi.ie
  4. * VERSION 1
  5. * it would be nice to get an E-Mail from anyone who uses this script, but it's not obligatory
  6. * please e-mail me with any problems also
  7. * make sure checked.gif, unchecked.gif, selected.gif and unselected.gif are in the same directory as script
  8. * check for new versions at http://www.clubi.ie/colmmacc/
  9. */
  10. f=0
  11. g=0
  12. radarr = new Array();
  13. radnams = new Array();
  14. z=-1
  15. if (document.images) {
  16.  var checked = new Image()
  17.  checked.src = "checked.gif"
  18.  var unchecked = new Image()
  19.  unchecked.src = "unchecked.gif"
  20.  var selected = new Image()
  21.  selected.src = "selected.gif"
  22.  var unselected = new Image()
  23.  unselected.src = "unselected.gif"
  24. }
  25. function addRadio(radioname, radiovalue, radiotext, selected) {
  26. y = false
  27. d = 0
  28.   if (document.images) {
  29.     for (var i=0; i<radnams.length; i++) {
  30.     if (radnams[i]==radioname){
  31.       y = true
  32.       d = i
  33.     }
  34.     }
  35.     if(y==false){
  36.     ifhidden = '<input type="hidden" name="' + radioname + '" value="' + radiovalue + '">';
  37.     z = radnams.length
  38.     radarr[z] = new Array()
  39.     radarr[z][0] = new Array()
  40.     radarr[z][0][0] = radioname
  41.     radarr[z][0][1] = radiovalue
  42.     radnams[radnams.length] = radioname
  43.     }
  44.     else {
  45.     ifhidden = "";
  46.     h = radarr[d].length
  47.     radarr[d][h] = new Array()
  48.     radarr[d][h][0] = radioname
  49.     radarr[d][h][1] = radiovalue
  50.     }
  51.     if(selected==1) {
  52.         seltext="selected.gif"
  53.         seletext="CHECKED"
  54.     }
  55.     else {
  56.         seltext="unselected.gif"
  57.         seletext="UNCHECKED"
  58.     }    
  59.     radname = "'" + radioname + "'";
  60.     radval = "'" + radiovalue + "'";
  61.     document.write('<a href="javascript:changemerad(' + radname + ', ' + radval + ', ' + f + ')"><img src="' + seltext + '" name="' + radiovalue +'" border=0></a> ' + radiotext + '<br>' + ifhidden);
  62.     if(selected==1) {
  63.         document.sample.elements[radioname].value=radiovalue
  64.     }
  65.     f++
  66.   }
  67.   else {
  68.   browserver = navigator.userAgent
  69.    if (browserver.indexOf("Mozilla/2") != -1) {
  70.     if(selected==1) {
  71.     seltext="CHECKED"
  72.     }
  73.     else{
  74.         seltext=""
  75.     }
  76.     document.write('<INPUT TYPE="radio" NAME="' + radioname + '" VALUE="' + radiovalue + '" ' + seltext + '>' + radiotext + '<br>');
  77.    }
  78.   }    
  79. }
  80. function addCheck(checkname, checktext, checked) {
  81.   if (document.images) {
  82.     if(checked==1) {
  83.         chetext="checked.gif"
  84.     chectext="CHECKED"
  85.     }
  86.     else {
  87.         chetext="unchecked.gif"
  88.     chectext="UNCHECKED"
  89.     }
  90.     checname = "'" + checkname + "'";
  91.     document.write('<a href="javascript:changemecheck(' + checname + ', ' + g + ')"><img src="' + chetext + '" name="che' + g +'" border=0></a> ' + checktext + '<input type="hidden" name="' + checkname + '" value="' + chectext + '"><br>');
  92.     g++
  93.   }
  94.   else {
  95.       browserver = navigator.userAgent
  96.       if (browserver.indexOf("Mozilla/2") != -1) {
  97.         if(checked==1) {
  98.         chetext="CHECKED"
  99.         }
  100.         else {
  101.             chetext=""
  102.         }
  103.         document.write('<INPUT TYPE="checkbox" NAME="' + checkname + '" VALUE="CHECKED" ' + chetext + '>' + checktext + '<br>');
  104.       }
  105.   }    
  106. }
  107. function changemecheck(chename ,chenum) {
  108.     if(document.sample.elements[chename].value=="CHECKED") {
  109.        document.images['che' + chenum +''].src = eval('unchecked.src')
  110.        document.sample.elements[chename].value="UNCHECKED"
  111.     }
  112.     else if(document.sample.elements[chename].value=="UNCHECKED") {
  113.        document.images['che' + chenum +''].src = eval('checked.src')
  114.        document.sample.elements[chename].value="CHECKED"
  115.     }
  116. }
  117. function changemerad(radname , radval, radnum) {
  118.     if(document.sample.elements[radname].value!=radval) {
  119.         for (i=0; i < radarr.length; i++) {
  120.           for (j=0; j < radarr[i].length; j++) {
  121.             if(radarr[i][j][0]==radname) {
  122.                 document.images[radarr[i][j][1]].src = eval('unselected.src')
  123.             }
  124.           }
  125.         }
  126.        document.images[radval].src = eval('selected.src')
  127.        document.sample.elements[radname].value=radval
  128.     }
  129. }
  130. // -->
  131. </script>


**********************************************************

INSERT INTO BODY ::

Code: [ Select ]
<form name="sample" action="#" method="POST" ENCTYPE="text/plain">
<h1>Sample Form</h1>
<hr noshade>
Name: <INPUT TYPE="text" NAME="username" SIZE="20"><br>
Email Address: <INPUT TYPE="text" NAME="useremail" SIZE="20"><br>
<hr noshade>
Os: <SELECT NAME="useros" SIZE="1" >
<OPTION VALUE="Windows 3.x">Windows 3.x
<OPTION VALUE="Windows 95">Windows 95
<OPTION VALUE="Windows 98" SELECTED>Windows 98
<OPTION VALUE="Windows NT">Windows NT
<OPTION VALUE="Linux">Linux
<OPTION VALUE="Macintosh">Macintosh
<OPTION VALUE="OS2 Warp">OS2 Warp
<OPTION VALUE="BeOS">BeOS
<OPTION VALUE="Amiga">Amiga
<OPTION VALUE="Other">Other
</SELECT>
<hr noshade>
Would you like to recieve:<br><br>
<script>
<!--
addCheck("SubcribeWindowsNews", "Windows Newsletter", 1)
addCheck("SubscribeMacNews", "Mac Newsletter", 0)
addCheck("SubcribeLinuxNews", "Linux Newsletter", 0)
// -->
</script>
<NOSCRIPT>
<input type="checkbox" name="SubcribeWindowsNews" value="CHECKED" CHECKED>Windows Newsletter<br>
<input type="checkbox" name="SubscribeMacNews" value="CHECKED" >Mac Newsletter<br>
<input type="checkbox" name="SubcribeLinuxNews" value="CHECKED" >Linux Newsletter<br>
</NOSCRIPT>
<hr noshade>
Format:<br><br>
<script>
<!--
addRadio("format", "Text", "Text", 0)
addRadio("format", "HTML", "Html", 1)
// -->
</script>
<NOSCRIPT>
<input type="radio" name="format" value="text" CHECKED>Text<br>
<input type="radio" name="format" value="HTML">Html<br>
</NOSCRIPT>
<hr noshade>
<input type="submit"><input type="reset">
<hr noshade>
</form>
  1. <form name="sample" action="#" method="POST" ENCTYPE="text/plain">
  2. <h1>Sample Form</h1>
  3. <hr noshade>
  4. Name: <INPUT TYPE="text" NAME="username" SIZE="20"><br>
  5. Email Address: <INPUT TYPE="text" NAME="useremail" SIZE="20"><br>
  6. <hr noshade>
  7. Os: <SELECT NAME="useros" SIZE="1" >
  8. <OPTION VALUE="Windows 3.x">Windows 3.x
  9. <OPTION VALUE="Windows 95">Windows 95
  10. <OPTION VALUE="Windows 98" SELECTED>Windows 98
  11. <OPTION VALUE="Windows NT">Windows NT
  12. <OPTION VALUE="Linux">Linux
  13. <OPTION VALUE="Macintosh">Macintosh
  14. <OPTION VALUE="OS2 Warp">OS2 Warp
  15. <OPTION VALUE="BeOS">BeOS
  16. <OPTION VALUE="Amiga">Amiga
  17. <OPTION VALUE="Other">Other
  18. </SELECT>
  19. <hr noshade>
  20. Would you like to recieve:<br><br>
  21. <script>
  22. <!--
  23. addCheck("SubcribeWindowsNews", "Windows Newsletter", 1)
  24. addCheck("SubscribeMacNews", "Mac Newsletter", 0)
  25. addCheck("SubcribeLinuxNews", "Linux Newsletter", 0)
  26. // -->
  27. </script>
  28. <NOSCRIPT>
  29. <input type="checkbox" name="SubcribeWindowsNews" value="CHECKED" CHECKED>Windows Newsletter<br>
  30. <input type="checkbox" name="SubscribeMacNews" value="CHECKED" >Mac Newsletter<br>
  31. <input type="checkbox" name="SubcribeLinuxNews" value="CHECKED" >Linux Newsletter<br>
  32. </NOSCRIPT>
  33. <hr noshade>
  34. Format:<br><br>
  35. <script>
  36. <!--
  37. addRadio("format", "Text", "Text", 0)
  38. addRadio("format", "HTML", "Html", 1)
  39. // -->
  40. </script>
  41. <NOSCRIPT>
  42. <input type="radio" name="format" value="text" CHECKED>Text<br>
  43. <input type="radio" name="format" value="HTML">Html<br>
  44. </NOSCRIPT>
  45. <hr noshade>
  46. <input type="submit"><input type="reset">
  47. <hr noshade>
  48. </form>



********************************************************

don't forget to save the gif from the demo page
http://www.mediadigits.com/Graphical-Form.htm
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

I like it, but you have to remember to turn off HTML when you post code here. The script doesn't parse it very well if you don't. You might want to go back and "edit" your post and nix the HTML option so the code displays properly -- I viewed source on your demo and it was very nice.


Another cool thing to do with forms is utilize style to spruce it up. This is an example from a client's site (I hope it's OK to post stuff like this here -- if not, mods, delete or edit the thread):


http://cigloans.com/apply.html
  • MediaDesign
  • Loser
  • Loser
  • User avatar
  • Posts: 129
  • Loc: somewhere

Post 3+ Months Ago

thx Atno :oops:
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9090
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

Since you are not obviously going to edit your post and fix it MediaDesign, I just fixed it for you.

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 103 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.