revealed form fields with javascript not passing values
Posted: Mon Dec 10, 2007 12:34 pm
my problem is.....I am using this form with javascript to hide and reveal fields based on user input. it looks and works well visually, but I can't get and fields that are made visible by the javascript to pass any values to my php script. the following is apice of the html and PHP. The javascript is below that. the first part of this example passes values as it should but the second part once you activate the checkbox will reveal the fields but when you enter the information to be read by another PHP script only the values of the feilds that weren't hidden are passed. Please help
Code: Select all
<tr>
<td class="question"><label for="address_street">Street Address</label></td>
<td><input name="street_address" id="street_address" value="<?php echo $_REQUEST['street_address']; ?>"/></td>
</tr>
<tr><td></td><td><?php echo $errors['street_address']; ?></td></tr>
<tr>
<td class="question"><label for="address_line_2">Address Line 2</label></td>
<td><input name="address_line_2" id="address_line_2" value="<?php echo $_REQUEST['address_line_2']; ?>"/></td>
</tr>
<tr><td></td><td><?php echo $errors['address_line_2']; ?></td></tr>
<tr>
<td class="question"><label for="address_city">City</label></td>
<td><input name="address_city" id="address_city" value="<?php echo $_REQUEST['address_city']; ?>"/></td>
</tr>
<tr><td></td><td><?php echo $errors['address_city']; ?></td></tr>
<tr>
<td class="question"> <input type="checkbox" name="billing_address_same" id="same" rel="none" value="same" <?PHP if($_REQUEST['billing_address_same'] == "same"){echo "checked=\"yes\""; } ?>/> Same As Home</td>
<td><input type="checkbox" name="billing_address_same" id="different" value="different" [b]rel="billingAddress" [/b]<?PHP if($_REQUEST['billing_address_same'] == "different"){echo "checked=\"yes\""; } ?> /> Different</td>
</tr>
<tr [b]rel="billingAddress"[/b]>
<td class="question"><label for="billing_street_address">Street Address</label></td>
<td><input name="billing_street_address" id="billing_street_address" value="<?php echo $_REQUEST['billing_street_address']; ?>"/></td>
</tr>
<tr><td></td><td><?php echo $errors['billing_street_address']; ?></td></tr>
<tr [b]rel="billingAddress"[/b]>
<td class="question"><label for="billing_address_line_2">Address Line 2</label></td>
<td><input name="billing_address_line_2" id="billing_address_line_2" value="<?php echo $_REQUEST['billing_address_line_2']; ?>"/></td>
</tr>
<tr><td></td><td><?php echo $errors['billing_address_line_2']; ?></td></tr>
<tr [b]rel="billingAddress"[/b]>
<td class="question"><label for="billing_address_city">City</label></td>
<td><input name="billing_address_city" id="billing_address_city" value="<?php echo $_REQUEST['billing_address_city']; ?>"/></td>
</tr>
<tr><td></td><td><?php echo $errors['billing_address_city']; ?></td></tr>Code: Select all
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
}