Question

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

For example:

<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 – explain: 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.

Answer 1

What I understand of your question is that you want a select box and this will determine what fields show up on the form. Then you want the validation script to only validate those fields that show up. This would best be handled with JQuery. Here is some working code to give an example, and a fiddle.

HTML

<div id="wrapper">
    <form id="myForm" name="myForm" method="POST" action="http://www.google.com">
        <select id="option" name="option">
            <option value="X">Choose One...</option>
            <option value="A">Option A</option>
            <option value="B">Option B</option>
        </select>
        <div id="optionset-a">
            <p>
                Input A1: <input name="a1" id="a1" class="option-a" type="textfield" /><br     />
                Input A2: <input name="a2" id="a2" class="option-a" type="textfield" /><br />
                Input A3: <input name="a3" id="a3" class="option-a" type="textfield" /><br />
            </p>
        </div>
        <div id="optionset-b">
            <p>
                Input B1: <input name="b1" id="b1" class="option-b" type="textfield" /><br     />
                Input B2: <input name="b2" id="b2" class="option-b" type="textfield" /><br />
                Input B3: <input name="b3" id="b3" class="option-b" type="textfield" /><br />
            </p>
        </div>
        <input type="submit" id="submit-button" name="submit" value="Submit" />
    </form>
</div>​

JQuery

$('#optionset-a').hide();
$('#optionset-b').hide();
$('#submit-button').hide();

$('#option').change(function() {
    if ($('#option').val() == 'A') {
        $('#optionset-b').hide();
        $('#optionset-a').show();
        $('#submit-button').show();
    } else if ($('#option').val() == 'B') {
        $('#optionset-a').hide();
        $('#optionset-b').show();
        $('#submit-button').show();
    }
});

$('#submit-button').click(function() {
    var validation = true;
    if ($('#option').val() == 'A') {
        $('.option-a').each(function() {
            if ($(this).val() == '') {
                $(this).css('border','1px solid red');
                validation = false;
            }
        });
    }
    if ($('#option').val() == 'B') {
        $('.option-b').each(function() {
            if ($(this).val() == '') {
                $(this).css('border','1px solid red');
                validation = false;
            }
        });
    }
    if (validation) {
        document.forms["myForm"].submit();
    } else { alert('Please fill in all fields.'); }
});​