Field Show 2

JavaScriptSource Staff Mar 31, 2008

General

If you need to gather additional information from your visitors/customers, this script will dynamically add an input box directly after a checkbox. This will help to keep your forms neat and clean.

Telephone No:
Cell Phone No:
FAX No:

Notes

Created by: Fang
Web Site: WebDeveloper Forums
Posted: March 31, 2008

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: fieldShow2.js

/* This script and many more are available free online at
The JavaScript Source!! http://www.javascriptsource.com
Created by: Fang | http://www.webdeveloper.com/forum/showthread.php?p=872326#post872326 */

function addElement() {
var aInput=document.getElementById('myspan').getElementsByTagName('input');
for(var i=0; i<aInput.length; i++) {
    aInput[i].onclick=new Function('addDelete(this)');
    }
}

function addDelete(obj) {
var parentSpan=document.getElementById('myspan');
if(obj.nextSibling.nodeName!='INPUT') { // add
    var oInputText=document.createElement('input');
    oInputText.setAttribute('type', 'text');
    parentSpan.insertBefore(oInputText, obj.nextSibling);
    }
else { // delete
    parentSpan.removeChild(obj.nextSibling);
    }
}

// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  addElement();
});

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="fieldShow2.js"></script>

Body

Paste this code into the BODY section of your HTML document


<span id="myspan">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
</span>

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details