Javascript to overlook certain required fields based on value selected

I have created this quick page [attached] that closely mimics the one I am working on for my client.  The basics: open page, no sections appear, choose a project type and the corresonding section appears.

Here is my plight:

Some clients want required fields in the various sections, so for this example, lets say the Name field is reuqired in all sections.  I can't have this because, if you select
States for example, then the fruits and cars section is not showing, you will never be able to submit the form because the required rule would prevent this.

This is what I want >> if States is the project type selected and the states fieldset is visible only enforce the "required" rule for the Name field that appears within the States feieldset.  Once that field is populated, allow the form to submit.  Same of course should apply to Cars when selected and Fruites when selected

How do I code that in my javascript?

Thank you in advance.

Note, not sure this matter - but I am using codeignter framework.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Fruits</title>

<script type="text/javascript">
function callOnLoad()
{ 
 var projectType_Field_Id = 'theType';
 
var projectTypes = new Array (
	{id : 'fs1', value:'Fruits'},
	{id : 'fs2', value:'Cars'},
	{id : 'fs3', value:'States'}); 
       
var project_type = document.getElementById(projectType_Field_Id);
	refreshSections(project_type);
	
}

function refreshSections(selectedType) 
{	
	var projectTypes = new Array (
	{id : 'fs1', value:'Fruits'},
	{id : 'fs2', value:'Cars'},
	{id : 'fs3', value:'States'}); 

	for (var i = 0; i < projectTypes.length; i++) 
	{
		if (projectTypes[i].value == selectedType) 
		{
			document.getElementById(projectTypes[i].id).style.display = '';
		} else {
			document.getElementById(projectTypes[i].id).style.display = 'none';
		}
	}
		
}
function projectTypeChange()
{ 
	
	 var projectType_Field_Id = 'theType';
	 
	var projectTypes = new Array (
	{id : 'fs1', value:'Fruits'},
	{id : 'fs2', value:'Cars'},
	{id : 'fs3', value:'States'}); 
	
	var project_type = document.getElementById(projectType_Field_Id).value;
	refreshSections(project_type);
}


</script>
</head>

<body onload="callOnLoad()">
<form method="post" action="">
<table>
<tr><td>
<fieldset name="fs_geninfo1" id="fs_genInfo1">
				<legend>General Project Information</legend>
				
				<table style="width: 50%">
					<tr>
						<td><label id="Label1">Date</label></td>
						<td><input name="Text1" type="text" /></td>
					</tr>
					<tr>
						<td><label id="Label1">Time</label></td>
						<td><input name="Text1" type="text" /></td>
					</tr>

					<tr>
						<td><label id="Label2">Approvers</label></td>
						<td><textarea cols="20" name="TextArea1" rows="2"></textarea></td>
					</tr>
					<tr>
<td>Project Type:</td><td><select name="Select1" id="theType" onchange="projectTypeChange()">
				<option value="0" selected="selected">Select</option>
				<option value="Fruits">Fruits</option>
				<option value="Cars">Cars</option>
				<option value="States">States</option>
			</select>
</td></tr>
		</table>
				
			</fieldset>
			</td>
			</tr>

<tr><td>
<fieldset name="fs1" id="fs1">
				<legend style="color:fuchsia">Fruits</legend>
				
				<table style="width: 50%">
					<tr>
						<td><label id="Label1">Name</label></td>
						<td><input name="Text1" type="text" /></td>
					</tr>
					<tr>
						<td><label id="Label2">Description</label></td>
						<td><textarea cols="20" name="TextArea1" rows="2"></textarea></td>
					</tr>
				</table>
				
			</fieldset>
			</td>
			</tr>
			<tr>
			<td>
			<fieldset name="fs2" id="fs2">
				<legend  style="color:fuchsia">Cars</legend>
				<table style="width: 50%">
					<tr>
						<td><label id="Label1">Name</label></td>
						<td><input name="Text1" type="text" /></td>
					</tr>
					<tr>
						<td><label id="Label2">Description</label></td>
						<td><textarea cols="20" name="TextArea1" rows="2"></textarea></td>
					</tr>
				</table>

			</fieldset>
			</td></tr>
			<tr><td>
			<fieldset name="fs3" id="fs3">
				<legend  style="color:fuchsia">States</legend>
				<table style="width: 50%">
					<tr>
						<td><label id="Label1">Name</label></td>
						<td><input name="Text1" type="text" /></td>
					</tr>
					<tr>
						<td><label id="Label2">Description</label></td>
						<td><textarea cols="20" name="TextArea1" rows="2"></textarea></td>
					</tr>
				</table>

			</fieldset>
			</td></tr>
			<tr><td>


<input name="Button1" type="button" value="Submit" />
</td></tr>
</table>
</form>
</body>

</html>

Open in new window

LVL 1
justmelatAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

BadotzCommented:
Create a JSON object for the clients and indicate which fields are available.
//
var C = [
    { "name":"Fred", "valid":["txtA","txtB","txtC"] },
    { "name":"Dave", "valid":["txtB","txtC"] }
];

Open in new window

Or do this server-side and pull the info from a DB.
0
justmelatAuthor Commented:
Sorry, I don't follow this!
0
BadotzCommented:
//
var PROJECTS = [
    { "name":"States", "required":["name"] },
    { "name":"Fruits", "required":["txtB","txtC"] },
    { "name":"Cars", "required":["name","txtA","txtC"] )
];

//
// Iterate over the objects in array PROJECTS 
// and validate only those elements listed in 
// the "required" array.
//

function validate(ra) {
    for (var i = 0; i < ra.length; i += 1) {
        if (document.getElementById(ra[i]).value == "") { return false; }
    }
    return true; // All fields contain something
}


function validator(prj) {
    for (var i = 0; i < PROJECTS.length; i += 1) {
        if (PROJECTS[i].name == prj) {
            return validate(PROJECTS[i].required); // Validate the fields in the array
        }
    }
    return false; // Something failed
}
//

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
justmelatAuthor Commented:
Now I follow - thank you.
0
BadotzCommented:
No worries - glad to help.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.