Page 1 of 1

revealed form fields with javascript not passing values

Posted: Mon Dec 10, 2007 12:34 pm
by break9
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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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
}

Firefox issue only

Posted: Mon Dec 10, 2007 5:10 pm
by break9
evidently this is only occurring in Firefox????

Posted: Mon Dec 10, 2007 7:07 pm
by feyd
At the very least this issue is not caused by PHP but something leading into PHP. Moved to Client-side.

Posted: Tue Dec 11, 2007 10:06 am
by pickle
In the page that accepts the data, do this:

Code: Select all

echo '<pre>';
print_r($_POST);
echo '</pre>';
That will output absolutely everything that got posted. If what you want isn't in there, then the fields aren't being submitted. I'd recommend getting a plugin that displays the rendered source code (as opposed to the source code sent from the server - as you're changing the code with Javascript). Poke around in the code after you've activated the checkbox - see if everything's being placed where you want.

Is all that Javascript just for displaying some fields when a checkbox is checked?

Posted: Tue Dec 11, 2007 10:11 am
by feyd
Also, what happens to the user if they do not have Javascript turned on? Something tells me a nice explosion.