Css class as a php variable

I have a css class of "required" to an upload field inside a form. It checks to see if a file is selected to be uploaded. I use some javascript to hide the upload box accorrding to a selection of another dropdown menu. So when the box is hidden, the "required" class is still active(even though the upload bos in hidden). That creates a problem since if the user selects a different option from the dropdown manu that hides the upload box, the form won't be able to be sent since it will still have the validation class active. Is there a way I could write some code to overcome this problem?

Thank you!

Joomla 1.5.26 & Chronoforms V 3.2

Hi quantum_leap ,

The fix is to disable the input when you hide it. That also disables the validation. I'm slowly working my way through a tutorial on hiding inputs in CFv4.

Bob

Please someone help! I've been having a go at it for days now!

I tried to disable/enable the form input through javascript but it doesn't work. I am now trying to load the "required" class in an input form dynamically when the user makes a selection from the dropdown menu. I found a script that I made it work in a form. The html is this:

<form name="form1">
<select onchange="return UpdateStyle(this)">
<option value="" selected="selected">Please select</option>
<option name="1" value="1">make it bold</option>
<option name="2" value="2">remove bold</option>
</select>
</form>
<div id="form2a" class="backgroundOne">
This is a test message
</div>

The javascript in the javascript code is this:

function UpdateStyle(mySelection2)
{
var oDiv2 = document.getElementById('form2a'), data2 = mySelection2.options[mySelection2.selectedIndex].value;
if (data2 == "1")
oDiv2.className += " dobold";
if (data2 == "2")
oDiv2.className = oDiv2.className.replace(" dobold",''); 
}

I've also added necessary CSS in the CSS box

.backgroundOne {
   background-color: #CCCCCC;
}

.dobold {
   font-weight: bold;
}

When the user selects "make bold" from the dropdown list the "dobold" class is added to the div with id="form2a" and gets removed when user selects "remove bold".

I try to implement the functionality on my form but it doesn't work. Basically I have a dropdown list and an upload box.

<div class="single-column-layout">
<div class="left-column-layout">
     <div class="form_item">
     	<div id="paymentDiv" class="form_element cf_dropdown">
        <label class="cf_label" style="width: 150px;">Select payment method*</label>
        <select class="cf_inputbox validate-selection" id="payment_method" size="1" title="Please select payment method" name="payment_method" tabindex=9 onchange="return UpdateClass(this)" >
			<option name="please-select" value="" selected="selected" rel="none">Please select</option>
            <option name="PurchaseOrder" value="PurchaseOrder" rel="PurchaseOrder">Purchase Order</option>
			<option name="CreditCard" value="CreditCard" rel="CreditCard">Credit Card</option>	
			</select> 
     </div>
     </div>
</div>

<div class="right-column-layout" rel="CreditCard">
	<div class="form_item">
		<div class="form_element">
		<label class="cf_label" style="width: 150px; padding-top: 50px;">Press <strong>Next </strong>at the bottom to enter Credit Card Details</label>
	</div>
	</div>
</div>

<div class="right-column-layout" rel="PurchaseOrder">
	<div class="form_item">
		<div class="form_element cf_fileupload">
		<label class="cf_label" style="width: 150px;">Purchase Order Upload*</label>
		<input id="purchase_order_upload" class="cf_inputbox cf_fileinput" maxlength="150" size="30" title="Please upload the order document" name="purchase_order_upload" type="file" tabindex=10 />
	</div>
	</div>
</div>

</div>

and the javascript is

function UpdateClass(mySelection)
{
var oDiv1 = document.getElementById('purchase_order_upload'), data1 = mySelection.options[mySelection.selectedIndex].value;
if (data1 == "PurchaseOrder")
oDiv1.className += " required";
if (data1 == "CreditCard")
oDiv1.className = oDiv1.className.replace(" required",''); 
}

But it's not working and I think it's because it's clashing with another javascript that I am using to show/hide certain inputs according to another selection. The javascript being used is found in an artcile that I bought from this site and it's called "ChronoForms creating hideable inputs". It's making use of the rel attribute to group sections that need to be shown/hidden. The javascript is this:

/*****************************************/
/** Usable Forms 2.0, November 2005     **/
/** Written by ppk, www.quirksmode.org  **/
/** Instructions for use on my site     **/
/**                                     **/
/** You may use or change this script   **/
/** only when this copyright notice     **/
/** is intact.                          **/
/**                                     **/
/** If you extend the script, please    **/
/** add a short description and your    **/
/** name below.                         **/
/*****************************************/


var containerTag = 'DIV';

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++)
		addEventUF(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();
	addEventUF(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 addEventUF(obj,type,fn)
{
	if (obj.addEventListener)
		obj.addEventListener(type,fn,false);
	else if (obj.attachEvent)
		obj.attachEvent("on"+type,fn);
}
addEventUF(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
}

Do I have any chance of solving this in my lifetime?

Cheers!

Hi quantum_leap,

This is ChronoForms v3.2 I think (despite my replying about CFv4 last time).

In that case adding a 'required' class to an input after the page is loaded won't add a required validation. The whole point of using the Quirksmode hideable inputs code was to get round this problem.

What are you actually trying to do here? I got lost reading the code snippets :-(

Bob

Well, I am using the Quirksmode to hide an upload box if a user selects a particular option from the dropdown menu. The problem is that if I include the required class in the upload box when I hide it the form still expects the hidden upload box to be required and it won't submit the form. That's why I am trying to not include the "required" class but add it dynamically when the users selects a particular option from the the dropdown menu.

Hi quantum_leap,

As I wrote ". . . adding a 'required' class to an input after the page is loaded won't add a required validation. The whole point of using the Quirksmode hideable inputs code was to get round this problem."

Someone did post a solution using the LiveValidation methods a few months ago which you could hunt down if you really need it.

Bob

Ok, I see. I made the validation working. I added validation="required" into the input information so it looks like this

<input id="purchase_order_upload" class="cf_inputbox cf_fileinput" maxlength="150" size="30" title="Please upload the order document" name="purchase_order_upload" type="file" validation="required" tabindex=10 />

It's activating only when the input is not hidden which is good! But now even when I upload a file into the box, the validation still kicks in saying that this field is required.

Ok thank you very much, "validation="required" ist a good idea, i will try out it...

At last it worked! I had to add a

case 'file':

in funtion function isRequired(formField) inside the validation.js file.