revealed form fields with javascript not passing values

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
break9
Forum Newbie
Posts: 2
Joined: Mon Dec 10, 2007 3:02 am

revealed form fields with javascript not passing values

Post 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
}
break9
Forum Newbie
Posts: 2
Joined: Mon Dec 10, 2007 3:02 am

Firefox issue only

Post by break9 »

evidently this is only occurring in Firefox????
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

At the very least this issue is not caused by PHP but something leading into PHP. Moved to Client-side.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post 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?
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

Also, what happens to the user if they do not have Javascript turned on? Something tells me a nice explosion.
Post Reply