Forums

Problem submitting form with JS populated fields

huot25 15 Jul, 2010
I am hoping someone here can help me.

I have been working on this for the greater part of two days, and I am at a loss of what could be causing this issue.

I have a form which contains static fields and js generated drop-downs based on the category. When a user selected an item in the first drop down, a second is created through a JS function. I have the form validation working correctly thanks to a post comment by GreyHead on adding validation to fields added after page load, but when I press submit, the form tries to submit and is redirected to a 404 - Component can not be found. I am using the SEF plugin released with joomla 1.5, but no other sef components. I have tried turning this off, and also tried uploading a fresh set of component files to see if the culprit was a corrupt file, but no improvement.

I have noticed that the form works correctly when I remove the function to generate the second drop down. This is only a proof of concept to show, but eventually will be database driven; at that point, I will convert to AJAX. Here is the JS code I am working with (sorry for any messy code, as this is still in the works)


//Abstract selection object
function selectionObject()
{
	this.title = "Must be renamed";
	this.emails = "***";
	this.content = "This is the default Content, must be replaced";
}

var option1 = new selectionObject();

option1.content = "<select name=\"option\" id=\"option\" class=\"\" >"+
					"<option value=''>Select a Class</option>"+
					"<option value='General Knowledge'>Fire Fighter I & II: General Knowledge</option>"+
					"<option value='Response'>Fire Fighter I & II: Response</option>"+
					"<option value='Fundamentals of Fire Fighting'>Fire Fighter I & II: Fundamentals of Fire Fighting</option>"+
					"<option value='Initial Attack Skills'>Fire Fighter I & II: Initial Attack Skills</option>"+
					"<option value='Tactical Support Skills'>Fire Fighter I & II: Tactical Support Skills</option>"+
					"<option value='Water Supply & Hose'>Fire Fighter I & II: Water Supply & Hose</option>"+
					"<option value='Suppression'>Fire Fighter I & II: Suppression</option>"+
					"<option value='Fight Fire Smart'>Fire Fighter I & II: Fight Fire Smart</option>"+
					"<option value='EMS - Vehicle Rescue'>Fire Fighter I & II: EMS - Vehicle Rescue</option>"+
					"<option value='Introduction to Haz Mat'>Fire Fighter I & II: Introduction to Haz Mat</option>"+
					"<option value='Response to Haz Mat'>Fire Fighter I & II: Response to Haz Mat</option>"+
					"<option value='Haz Mat Decon'>Fire Fighter I & II: Haz Mat Decon</option>"+
					"<option value='Basic Fire School'>Basic Fire School (BFS)</option>"+
					"<option value='Basic Fire Pump Operation'>Basic Fire Pump Operation (Pumps I)</option>"+
					"<option value='Emergency Vehicle Operators Course'>Emergency Vehicle Operators Course (EVOC)</option>"+
					"<option value='Fire Instructor I & II'>Fire Instructor I & II</option>"+
					"<option value='Haz Mat Awareness & Operations'>Haz Mat Awareness & Operations</option>"+
					"</select>";
option1.title = "Request to schedule Training Course Delivery";
//option1.emails += "***";

var option2 = new selectionObject();
option2.content = "<select name=\"option\" class=\"\" id=\"option\">"+
					"<option value=''>Select a Trailer</option>"+
					"<option>Air Trailer</option>"+
					"<option>EVOC Trailer</option>"+
					"<option>Haz Mat Ops</option>"+
					"<option>Friction Force Door Trailer</option>"+
					" </select>";
option2.title = "Training Trailers, Equipment, and Training Props";
//option2.emails += "***";

var option3 = new selectionObject();
option3.content = "<select name=\"option\" id=\"option\" class=\"\" >"+
					"<option value=''>Select a Trailer</option>"+
					"<option>Mobile Alarm Sprinkler Trailer (MAST)</option>"+
					"<option>Driving Emergency Vehicle Simulator(DEVS)</option>"+
					" </select>";
option3.title = "Specialty Mobile Trailers";
//option3.emails += "***";

var option4 = new selectionObject();
option4.content = "<select name=\"option\" id=\"option\" class=\"\" >"+
					"<option value=''>Select a County</option>"+
					"<option>Androscoggin</option>"+
					"<option>Aroostook</option>"+
					"<option>Cumberland</option>"+
					"<option>Franklin</option>"+
					"<option>Hancock</option>"+
					"<option>Kennebec</option>"+
					"<option>Knox</option>"+
					"<option>Lincoln</option>"+
					"<option>Penobscot</option>"+
					"<option>Piscataquis</option>"+
					"<option>Oxford</option>"+
					"<option>Sagadahoc</option>"+
					"<option>Somerset</option>"+
					"<option>Waldo</option>"+
					"<option>Washington</option>"+
					"<option>York</option>"+
					"</select>";
option4.title = "Request for Visit or Contact from a Training Program Manager";
//option4.emails += "***";

var option5 = new selectionObject();
option5.content = "<a href='http://www.mfte.org/index.php?option=com_content&view=article&id=15&Itemid=22'>MFTE Courses</a><br /><br />"+
					"<label>Please describe the information you are requesting:</label><textarea name='comments' rows='5' cols='70'></textarea>";
option5.title = "Information on MFT&E Programs";
//option5.emails += "***";

var option6 = new selectionObject();
option6.content = "<select name=\"option\" id=\"option\" class=\"\" >"+
					"<option value=''>Select a Certificate</option>"+
					"<option>Request copy of Fire Fighter I</option>"+
					"<option>Request copy of Fire Fighter II</option>"+
					"<option>Request copy of Fire Instructor I</option>"+
					"<option>Request copy of Fire Instructor II</option>"+
					"<option>Request copy of Fire Officer I</option>"+
					"<option>Request copy of Fire Officer II</option>"+
					"<option>Reciprocity</option>"+
					"<option>Rockers & Patches</option>"+
					"</select>";
option6.title = "Certification Testing";
//option6.emails += "***";

var option7 = new selectionObject();
option7.content = "<label>Please describe the information you are requesting:</label><textarea name='comments' rows='5' cols='70'></textarea>";
option7.title = "General Inquiries";
//option7.emails += "***";

var option8 = new selectionObject();
option8.content = "<a href='http://www.mfte.org'>Visit Frequently Asked Questions</a>";
option8.title = "FAQ's";

var _divID;

function updateDiv(value, divID)
{	
	_divID = divID;
	var option = parseInt(value);
	
	switch(option)
	{
	case 1:
		setContent(option1);
		break;
	case 2:
		setContent(option2);
		break;
	case 3:
		setContent(option3);
		break;
	case 4:
		setContent(option4);
		break;
	case 5:
		setContent(option5);
		break;
	case 6:
		setContent(option6);
		break;
	case 7:
		setContent(option7);
		break;
	case 8:
		setContent(option8);
		break;
	default:
		removeContent();
		break;
	}
	
}

function setContent(contentObj)
{
	document.getElementById('optionFields').style.display = "block";
	document.getElementById(_divID).innerHTML = contentObj.content;
	document.getElementById('optionTitle').innerHTML = contentObj.title;
	document.getElementById('emails').value = contentObj.emails; 

var option_val = new LiveValidation('option', {validMessage: ''});
option_val.add(Validate.Selection,{failureMessage: 'Failed! Need to make a selection.'});


}

function removeContent()
{
	document.getElementById('optionFields').style.display = "none";
	document.getElementById(_divID).innerHTML = "";
}



Here is the url to the form so you can see what is happening.

http://mfte.org/index.php?option=com_chronocontact&chronoformname=nickRequestForm

Thank you in advanced for any help or suggestions on a better approach.

Nick
nml375 15 Jul, 2010
Hi Nick,
You cannot name a form field "option" as this is a reserved name in Joomla (used to select which component should handle the submitted data).

/Fredrik
huot25 16 Jul, 2010
Hi Fredrick,

Thank you for the reply. I guess that's what 17 hours and 8 cups of coffee will do to you. The brain does not function as well. I should have noticed this a long time ago, and I've been developing components for joomla for the past 2 years, you'd think I would have noticed that.

Works great now, haha. Thank you so much.

Nick
This topic is locked and no more replies can be posted.