[closser]

Hi guys, first i hope u will understand me...
So i want to make a javascript to be shown if somebody chooses option A to show the javascripts for the A1,A2,A3 and if they choose B to show javascripts for the B1,B2,B3. So the A and B it will firstly asked as options from a <select> tag
eg.

<select name="AorB" >
<option value="" selected="selected">Select...</option>
<option value="A" >Option A</option>
<option value="B" >Option B</option>
</select>

I'm using this way of javascript (Error Alerts):

<script language=Javascript>
<!--
function check(form) {
if (form.Password.value == "")
{ alert("Please enter your Password."); form.Password.focus(); return;}
if (form.Password.value.length < 8)
{ alert("Please enter a valid Password."); form.Password.focus(); return;}
form.submit()
}
//-->
</SCRIPT>

P.S: I don't want to make complications when they choose A to get B option javascripts or reverse.
added: i mean if We select OPTION A there will be shown some Input-s ....and javascript will ask only for the shown input-s so it means OPTION A input-s ... but not to ask for OPTION B input-s too even that they're not shown cause we didnt select OPTION B ... i hope i explained a little for you.

CHECK OUT THIS LINK PLEASE, explains how i really mean.
http://misinba.altervista.org/form/

[Dormilich]

I’d hide both <input> groups and when either option is chosen, I’d use JS to display the respective group (via the CSS display property).

[closser]

Hi Dormilich, thanks for your reply.
Yea i know, i can do it too, i just made it in a "fast" way , to show you guys what i really meant, problem is there at the javascript.

This post has been edited by Dormilich: 08 November 2012 - 07:01 AM
Reason for edit:: removed unnecessary quote

[Kruithne]

Hello,

Check out the quick snippet below, it shows the logical steps to achieve what you are after, comments included to explain the process.

<script>
	function submit()
	{
		var selectedOption = document.getElementById('mySelectBox').value, // The selected value.
			errors = []; // Any errors we come accross.
			
		if (selectedOption == 'A') // The user has A selected
		{
			var A1 = document.getElementById('A1'), // A1 input field
				A2 = document.getElementById('A2'), // A2 input field
				A3 = document.getElementById('A3'); // A3 input field
				
			if (A1.value.length == 0) // Is there anything in A1?
				errors.push('A1 cannot be blank'); // Add an error.
			
			if (A2.value.length == 0) // Is there anything in A2?
				errors.push('A2 cannot be blank'); // Add an error.
				
			if (A3.value.length == 0) // Is there anything in A3?
				errors.push('A3 cannot be blank'); // Add an error.
		}
		else if (selectedOption == 'B') // The user has B selected.
		{
			var B1 = document.getElementById('B1'), // B1 input field.
				B2 = document.getElementById('B2'), // B2 input field.
				B3 = document.getElementById('B3'); // B3 input field.
				
			if (B1.value.length == 0) // Is there anything in B1?
				errors.push('B1 cannot be blank'); // Add an error.
			
			if (B2.value.length == 0) // Is there anything in B2?
				errors.push('B2 cannot be blank'); // Add an error.
				
			if (B3.value.length == 0) // Is there anything in B3?
				errors.push('B3 cannot be blank'); // Add an error.
		}
		
		if (errors.length > 0) // Are there any errors?
			alert(errors.join("\n")); // Yes, alert them.
		else
			alert('No errors!'); // No, send a success alert.
	}
</script>

<select id="mySelectBox">
	<option value="A">A</option>
	<option value="B">B</option>
</select><br/>
<br/>
<input type="text" id="A1"/><br/>
<input type="text" id="A2"/><br/>
<input type="text" id="A3"/><br/>
<br/>
<input type="text" id="B1"/><br/>
<input type="text" id="B2"/><br/>
<input type="text" id="B3"/><br/>
<br/>
<input type="button" onclick="submit()" value="Click here"/>

As always, bare in mind the above example was not designed for your site and therefore you should not just copy and paste it and expect it to work, it's to be used as reference/a guide.

[closser]

Hi Kruithne, thank you for your reply, yes this is exactly what i'm looking for , but i'm so sorry im just a beginner on this , so is there anyway we could make it work on the javascript-way i'm currently using?
i think the essence stands on:

{
		var selectedOption = document.getElementById('mySelectBox').value, // The selected value.
			errors = []; // Any errors we come accross.
			
		if (selectedOption == 'A') // The user has A selected
		{

&

}
		else if (selectedOption == 'B') // The user has B selected.
		{

thanks for u're time.

[Kruithne]

Hello,

What I posted was the bare structure of how it works, if you read through all the comments and look at how all parts of my little snippet work together, you should be able to easily figure out what you are after!

The process is very simple, when you click the button, it checks what the value of the select box is. Then, depending on what the value is, we run some validation (that's what the IF scopes are for) and then add any errors the validation caused to our error array.

When we're done validating, we check if the validation causes any errors and decide what to do from there on.

[closser]

thank you Kruithne, and everybody i fixed this staff u can close this thread.

[Kruithne]

closser, on 08 November 2012 - 02:57 PM, said:

thank you Kruithne, and everybody i fixed this staff u can close this thread.

No problem, remember to hit the green 'helpful' button if someones post helped you. Also, we don't close threads here when someone figures something out, we keep it around so others can use it as reference or to aid in their own issues!