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

Display second form if radio button is checked not working

Arthur Figueiredo
1#
Arthur Figueiredo Published in 2017-12-07 21:48:22Z

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.

José Lopez Coronado
2#
José Lopez Coronado Reply to 2017-12-07 22:02:34Z

Well, first you have to put out the function for the radio outside the submit function.

I erase the return true because by logic if is not false, is true, and valid the id when change the radio button.

Hope it works for you!

https://codepen.io/mackiechan/pen/dZBzEa

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;
    }
}

$("input[type=radio]").on("change",function()
    {
      var thisid = $(this).attr('id');
        if(thisid==='duet')
        {
            $("#duetSelected").show();
        }else{
          $("#duetSelected").hide();
        }
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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"  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>

You need to login account before you can post.

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

© 2016 Powered by mzan.com design MATCHINFO