I am trying to create a form that will have form fields appear as you fill
out the form but i need to know how to make input boxes know there is type
in the box and once there is something typed the next field will appear.
*This is what I have thus far:*
var containerTag = 'TR';
> var compatible = (
> document.getElementById && document.getElementsByTagName &&
> document.createElement
> &&
> !(
> navigator.userAgent.indexOf('MSIE 5') != -1 &&
> navigator.userAgent.indexOf('Mac') != -1)
> );
>
> if (compatible)
> {
> document.write('<style>.accessibility{display: none}</style>');
> var waitingRoom = document.createElement('div');
> }
>
> var hiddenFormFieldsPointers = new Object();
>
> function prepareForm()
> {
> if (!compatible) return;
> var marker = document.createElement(containerTag);
> marker.style.display = 'none';
>
> var x = document.getElementsByTagName('select');
> for (var i=0;i<x.length;i++)
> addEvent(x[i],'change',showHideFields)
>
> var x = document.getElementsByTagName(containerTag);
> var hiddenFields = new Array;
> for (var i=0;i<x.length;i++)
> {
> if (x[i].getAttribute('rel'))
> {
> var y = getAllFormFields(x[i]);
> x[i].nestedRels = new Array();
> for (var j=0;j<y.length;j++)
> {
> var rel = y[j].getAttribute('rel');
> if (!rel || rel == 'none') continue;
> x[i].nestedRels.push(rel);
> }
> if (!x[i].nestedRels.length) x[i].nestedRels = null;
> hiddenFields.push(x[i]);
> }
> }
>
> while (hiddenFields.length)
> {
> var rel = hiddenFields[0].getAttribute('rel');
> if (!hiddenFormFieldsPointers[rel])
> hiddenFormFieldsPointers[rel] = new Array();
> var relIndex = hiddenFormFieldsPointers[rel].length;
> hiddenFormFieldsPointers[rel][relIndex] = hiddenFields[0];
> var newMarker = marker.cloneNode(true);
> newMarker.id = rel + relIndex;
> hiddenFields[0].parentNode.replaceChild(newMarker,hiddenFields[0]);
> waitingRoom.appendChild(hiddenFields.shift());
> }
>
> setDefaults();
> addEvent(document,'click',showHideFields);
> }
>
> function setDefaults()
> {
> var y = document.getElementsByTagName('input');
> for (var i=0;i<y.length;i++)
> {
> if (y[i].checked && y[i].getAttribute('rel'))
> intoMainForm(y[i].getAttribute('rel'))
> }
>
> var z = document.getElementsByTagName('select');
> for (var i=0;i<z.length;i++)
> {
> if (z[i].options[z[i].selectedIndex].getAttribute('rel'))
>
> intoMainForm(z[i].options[z[i].selectedIndex].getAttribute('rel'))
> }
>
> }
>
> function showHideFields(e)
> {
> if (!e) var e = window.event;
> var tg = e.target || e.srcElement;
>
> if (tg.nodeName == 'LABEL')
> {
> var relatedFieldName = tg.getAttribute('for') ||
> tg.getAttribute('htmlFor');
> tg = document.getElementById(relatedFieldName);
> }
>
> if (
> !(tg.nodeName == 'SELECT' && e.type == 'change')
> &&
> !(tg.nodeName == 'INPUT' && tg.getAttribute('rel'))
> ) return;
>
> var fieldsToBeInserted = tg.getAttribute('rel');
>
> if (tg.type == 'checkbox')
> {
> if (tg.checked)
> intoMainForm(fieldsToBeInserted);
> else
> intoWaitingRoom(fieldsToBeInserted);
> }
> else if (tg.type == 'radio')
> {
> removeOthers(tg.form[tg.name],fieldsToBeInserted)
> intoMainForm(fieldsToBeInserted);
> }
> else if (tg.type == 'select-one')
> {
> fieldsToBeInserted =
> tg.options[tg.selectedIndex].getAttribute('rel');
> removeOthers(tg.options,fieldsToBeInserted);
> intoMainForm(fieldsToBeInserted);
> }
> }
>
> function removeOthers(others,fieldsToBeInserted)
> {
> for (var i=0;i<others.length;i++)
> {
> var show = others[i].getAttribute('rel');
> if (show == fieldsToBeInserted) continue;
> intoWaitingRoom(show);
> }
> }
>
> function intoWaitingRoom(relation)
> {
> if (relation == 'none') return;
> var Elements = hiddenFormFieldsPointers[relation];
> for (var i=0;i<Elements.length;i++)
> {
> waitingRoom.appendChild(Elements[i]);
> if (Elements[i].nestedRels)
> for (var j=0;j<Elements[i].nestedRels.length;j++)
> intoWaitingRoom(Elements[i].nestedRels[j]);
> }
> }
>
> function intoMainForm(relation)
> {
> if (relation == 'none') return;
> var Elements = hiddenFormFieldsPointers[relation];
> for (var i=0;i<Elements.length;i++)
> {
> var insertPoint = document.getElementById(relation+i);
> insertPoint.parentNode.insertBefore(Elements[i],insertPoint);
> if (Elements[i].nestedRels)
> {
> var fields = getAllFormFields(Elements[i]);
> for (var j=0;j<fields.length;j++)
> {
> if (!fields[j].getAttribute('rel')) continue;
> if (fields[j].checked || fields[j].selected)
> intoMainForm(fields[j].getAttribute('rel'));
> }
> }
> }
> }
>
> function getAllFormFields(node)
> {
> var allFormFields = new Array;
> var x = node.getElementsByTagName('input');
> for (var i=0;i<x.length;i++)
> allFormFields.push(x[i]);
> var y = node.getElementsByTagName('option');
> for (var i=0;i<y.length;i++)
> allFormFields.push(y[i]);
> return allFormFields;
> }
>
> /** ULTRA-SIMPLE EVENT ADDING **/
>
> function addEvent(obj,type,fn)
> {
> if (obj.addEventListener)
> obj.addEventListener(type,fn,false);
> else if (obj.attachEvent)
> obj.attachEvent("on"+type,fn);
> }
>
> addEvent(window,"load",prepareForm);
>
>
> /** PUSH AND SHIFT FOR IE5 **/
>
> function Array_push() {
> var A_p = 0
> for (A_p = 0; A_p < arguments.length; A_p++) {
> this[this.length] = arguments[A_p]
> }
> return this.length
> }
>
> if (typeof Array.prototype.push == "undefined") {
> Array.prototype.push = Array_push
> }
>
> function Array_shift() {
> var A_s = 0
> var response = this[0]
> for (A_s = 0; A_s < this.length-1; A_s++) {
> this[A_s] = this[A_s + 1]
> }
> this.length--
> return response
> }
>
> if (typeof Array.prototype.shift == "undefined") {
> Array.prototype.shift = Array_shift
> }
>
> *
Here is the form:*
> <form>
> <table class="example">
> <tbody>
> <tr>
> <td class="question"><label for="name">Name</label></td>
> <td><input name="name" id="name" /></td>
> </tr>
> <tr>
> <td class="question"><label for="address">Address</label></td>
> <td><input name="address" id="address" /></td>
> </tr>
> <tr>
> <td class="question"><label
> for="country_other">Country</label></td>
> <td><input type="checkbox" name="country_other" id="country_other"
> rel="other_country" />
> Other than The Netherlands </td>
> </tr>
> <tr rel="other_country">
> <td class="question"><label for="other_country"><span
> class="accessibility">If not the Netherlands:</span> Which other
> country?</label></td>
> <td><input name="other_country" id="other_country" /></td>
> </tr>
> <tr>
> <td class="question">Marital status</td>
> <td><input type="radio" name="marital" value="single" rel="none"
> id="marital_single" />
> <label for="marital_single">Single</label>
> <br />
> <input type="radio" name="marital" value="married"
> rel="marriageContract" id="marital_married" />
> <label for="marital_married">Married</label>
> <br />
> <input type="radio" name="marital" value="divorced"
> rel="divorceDetails" id="marital_divorced" />
> <label for="marital_divorced">Divorced</label>
> <br /></td>
> </tr>
> <tr rel="marriageContract">
> <td class="question"><label for="marriage_contract"><span
> class="accessibility">If Married:</span> Marriage contract?</label></td>
> <td><input type="checkbox" name="marriage_contract"
> id="marriage_contract" />
> Yes</td>
> </tr>
> <tr rel="divorceDetails">
> <td class="question"><label for="datedivorce"><span
> class="accessibility">If Divorced:</span> Date of divorce</label></td>
> <td><input name="datedivorce" id="datedivorce" /></td>
> </tr>
> <tr rel="divorceDetails">
> <td class="question"><label for="typedivorce"><span
> class="accessibility">If Divorced:</span> Type of divorce</label></td>
> <td><select name="typedivorce" id="typedivorce">
> <option value="messy" rel="none"> Messy</option>
> <option value="very_messy" rel="details"> Very messy</option>
> </select></td>
> </tr>
> <tr rel="details">
> <td class="question"><label for="gory_details"><span
> class="accessibility">If Very Messy:</span> Gory details 1</label></td>
> <td><input name="gory_details" id="gory_details" /></td>
> </tr>
> <tr>
> <td class="question"><label for="why_fill_form">Why do you fill out
> this form?</label></td>
> <td><select name="why_fill_form" id="why_fill_form">
> <option rel="none">Select</option>
> <option rel="feeling" value="just_feeling">Just a
> feeling</option>
> <option rel="none" value="cogent_reasons">For cogent
> reasons</option>
> </select></td>
> </tr>
> <tr rel="feeling">
> <td class="question"><label for="feeling_excessive_detail"><span
> class="accessibility">If Just a Feeling:</span> Please describe this feeling
> in excessive detail.</label></td>
> <td><textarea name="feeling_excessive_detail"
> id="feeling_excessive_detail"></textarea></td>
> </tr>
> <tr rel="details">
> <td class="question"><label for="gory_details2"><span
> class="accessibility">If Very Messy:</span> Gory details 2</label></td>
> <td><input name="gory_details2" id="gory_details2" /></td>
> </tr>
> <tr>
> <td colspan="2"><input type="submit" value="Submit form" /></td>
> </tr>
> </tbody>
> </table>
> </form>
>
>
Zach Schneider
http://www.twitter.com/zkm
http://www.zachschneider.com
http://www.linkedin.com/in/zschneider
Ted Turner <http://www.brainyquote.com/quotes/authors/t/ted_turner.html> -
"Sports is like a war without the killing."
--
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
