Question

我有这个作业，如果选中单选按钮，我应该显示第二个表单。

它被称为钢琴节。该表格应该包含名字和姓氏，学生的学生证，以及3个带有“Solo”，“Duet”和“Concerto”选项的单选按钮。

如果选择“Duet”，它应该在它旁边显示相同的表格，但只有姓名和学生证。

这是我的html文件：

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

这就是我在javascript文件中的内容：

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

}

有什么想法吗？

提前致谢。

Answer 1

嗯，首先你必须在提交功能之外输出无线电的功能。

我擦除了返回true，因为逻辑如果不是false，则为true，并且在更改单选按钮时有效。

希望它适合你！

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>

如果选中单选按钮不起作用，则显示第二种形式

1 个答案: