Dynamic Fields Javascript

Javascripts > Javascript Forms > Dynamic Fields

Script Title: Dynamic Fields

Description: The script generates a new feild in your form if you want to add more details. It is 100% client side and it uses a pair of cookies to retain its values across calls. The name of the feild goes like field1, field2 etc and can be used to pass values to the web server.I think this will be useful for data like academic qualifications.

Example: Available

Credit: Script created by Vijaya Sekhar

Copy the following code into your HEAD tags.

<script language="JavaScript"> var cook = document.cookie; var start = cook.indexOf("choice="); var end = cook.indexOf(";",start); var x; var y; var mo; var mm; mm = 0; if (end == -1) { document.write("<body link=green alink=green vlink=green onMouseDown = \"prevent()\" >"); document.write("<table bgcolor=black border=0><tr><td ><font face='Times New Roman' color=red size=4><b>Dynamic Fields</b></font></td></tr></table><br>"); document.write("<form name=form1 >"); document.write("<input type=text name=field1 style=\"background-color:black;color:lime;width=120;height=20\" onChange=setcookf(1) onMouseOver = \"setmm()\" onMouseOut= \"freemm()\" ><br>"); document.write("</form>"); document.write("<input type=button value= \"Add more Details \" style=\"background-color:black;color:lime;width:120 \" onClick=\"setcook()\" onMouseOver = \"setmm()\" onMouseOut= \"freemm()\" onFocus=\" blur()\" > "); document.write("</body>"); } else { var fox = (end -start); fox =(( fox*1)-7); var endx = ((end*1)-1); y = document.cookie.substr(endx,fox); y = (y*1); document.write("<body link=green alink=green vlink=green onMouseDown = \"prevent()\">"); document.write("<table bgcolor=black border=0><tr><td ><font face='Times New Roman' color=red size=4><b>Dynamic Fields</b></font></td></tr></table><br>"); document.write("<form name=form1>"); mo = ((y*1)+1); var flat; if ( mo <= 10) { for (var lo=1; lo<(mo-1);lo++) { var fn = new String(); fn = "field"+lo; var flatco = ((lo*1)+1); flat = "field"+flatco; fl = fn.length; var cookf = document.cookie; var fi = new String(); fi = fn+"="; var fs = cook.indexOf(fi); var fx = ((fs*1)+fl); fx = ((fx*1)+1); var fe = cook.indexOf(";",fs); var fex ; fex = fe - fx; var fv = new String(); fv = cook.substr(fx,fex); var fc = new String(); fc = fv.substr(0,1); if (fc == "=") { fv = "- - - -"; } document.write("<input type=text name="+fn+" value=\""+fv+"\" style=\"background-color:black;color:lime;width=120;height=20\" onChange=\"setcookf("+ lo +")\" onMouseOver = \"setmm()\" onMouseOut= \"freemm()\" ><br>"); } document.write("<input type=text name=\""+ flat+"\" style=\"background-color:black;color:lime;width=120;height=20\" onChange=\"setcookf("+ lo +")\" onMouseOver = \"setmm()\" onMouseOut= \"freemm()\"><br>"); document.write("</form>"); document.write("<input type=button value=\"Add More Details\" style=\"background-color:black;color:lime;width:120 \" onClick=\"setnext()\" onMouseOver = \"setmm()\" onMouseOut= \"freemm()\" onFocus=\" blur()\" > "); } else { mo = 11; for (var lo=1; lo<(mo-1);lo++) { var fn = new String(); fn = "field"+lo; var flatco = ((lo*1)+1); flat = "field"+flatco; fl = fn.length; var cookf = document.cookie; var fi = new String(); fi = fn+"="; var fs = cook.indexOf(fi); var fx = ((fs*1)+fl); fx = ((fx*1)+1); var fe = cook.indexOf(";",fs); var fex ; fex = fe - fx; var fv = new String(); fv = cook.substr(fx,fex); var fc = new String(); fc = fv.substr(0,1); if (fc == "=") { fv = "- - - -"; } document.write("<input type=text name="+fn+" value=\""+fv+"\" style=\"background-color:black;color:lime;width=120;height=20\" onChange=\"setcookf("+ lo +")\" onMouseOver = \"setmm()\" onMouseOut= \"freemm()\" ><br>"); } document.write("</form>"); } } function setcook() { document.cookie= "choice=2;"; document.cookie = "dx=dx;"; history.go(0); } var i; function setcookf(i) { var tempv = document.form1.elements[i-1].value ; var lentemp = tempv.length; var tempn = document.form1.elements[i-1].name ; document.cookie = tempn+"="+tempv+";" ; } function setnext() { document.cookie = "choice="+((y*1)+1)+";"; document.cookie = "d"+mo+"=v;"; history.go(0); } function setmm() { mm = 1; } function freemm() { mm = 0; } function prevent() { if (mm == 0) { alert ('JavaScript Prevents the Action'); } } </script>

Enter your name and email address to have this script sent right to your Inbox for later viewing.

First Name Last Name Email

<reallybig.com>
Web Builder Network Portal

WebBuilderZone
The Largest directory of Web Building resources on the 'Net!

Reallybig Forums
Ask a question, join a discussion, start a thread.

Bignosebird
FREE CGI scripts, Web tutorials, essential HTML tricks and more!

Fontpool
1000+ Truetype fonts for PC & MAC!

Graphxkingdom
Thousands of free Icons, Clipart & Themes!

Free-Backgrounds
Hundreds of eye-popping Backgrounds & Textures

DHTMLShock
Add life to your site with these DHTML scripts!

Java-scripts.net
Cool and easy effects with cut-and-paste Javascripts!

Sitecritique.net
Friendly community where you can get a site critique - or give one!

Advertise
on the
Reallybig.com
Network