Home Display second form if radio button is checked not working
Reply: 0

Display second form if radio button is checked not working

user2945
1#
user2945 Published in April 22, 2018, 12:52 am

I have this assignment where I am supposed to display a second form if a radio button is checked.

It is called Piano Festival. The form is supposed to have First and Last name, the student ID of the student, and 3 radio buttons with the options "Solo", "Duet" and "Concerto".

If "Duet" is selected, it is supposed to display the same form next to it, but only with first and last name, and the student ID.

This is my html file:

<form id="myForm" action="" onsubmit="validateForm()">
        <fieldset>
            Performance Type:
            <br>
            <input type="radio" name="performanceType" id="solo" value="Solo">Solo<br>
            <input type="radio" name="performanceType" id="duet" onclick="checkType()" value="Duet">Duet<br>
            <input type="radio" name="performanceType" id="concerto" value="Concerto">Concerto<br><br>
            First Name:
            <input type="text" name="firstName"><br><br>
            Last Name:
            <input type="text" name="lastName"><br><br>
            Student ID:
            <input type="text" name="studentID"><br><br>
            <input type="submit" value="Register Student"> &nbsp;&nbsp;&nbsp;&nbsp;
            <input type="reset" value="Clear Form">

        </fieldset>
    </form>
    <div id="duetSelected" style="display: none">
        <form id="myForm1" action="" onsubmit="validateForm()">
            <fieldset>
                First Name:
                <input type="text" name="firstName"><br><br>
                Last Name:
                <input type="text" name="lastName"><br><br>
                Student ID:
                <input type="text" name="studentID"><br><br>
                <input type="submit" value="Register Student"> &nbsp;&nbsp;&nbsp;&nbsp;
                <input type="reset" value="Clear Form">

            </fieldset>
        </form>
    </div>

And this is what I have in my javascript file:

function validateForm()
{
    var a = document.forms["myForm"]["firstName"].value;
    var b = document.forms["myForm"]["lastName"].value;
    var c = document.forms["myForm"]["studentID"].value;

    if (a == "" || b == "" || c == "")
    {
        alert("First name, last name and Student ID must be filled.");
        return false;
    }
    else
    {
        return true;
    }

    $("input[type='radio'][id='duet']").on("change",function()
    {
        if($(this).is(':checked'))
        {
            $("#duetSelected").show();
        }
        else
        {
           $("#duetSelected").hide();
    }
  });

}

Any ideas?

Thanks in advance.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.301534 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO