使用SelectionBox更改HTML表单

时间:2017-10-09 17:49:57

标签: javascript html forms

嗨,谢谢你的帮助

我有这样的表格:

test(const test &a){
    all=a.all+5;
    cout<<all;   
}

这一个:

$().ready(function() {
    $("#Form").submit(function() {
        $('.input-validation-error').focus();
        $(".input-validation-error").each(function() {
            $(this).focus();
        });

    });
}); 

我需要使用像这样的选项框在我的html页面中显示此表单之一:

    <form name="form1" action="/action_page.php">
   <fieldset>
    <legend>Student information:</legend>
    First name:<br>
    <input type="text" name="firstname" value="Mickey"><br>
    Last name:<br>
    <input type="text" name="lastname" value="Mouse"><br>
    Student Number:<br>
    <input type="text" name="lastname" value="Mouse"><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>

如果该人出示第一个选项,则显示表格1,否则表格2

谢谢你的帮助

2 个答案:

答案 0 :(得分:0)

<select id="selectForm">
    <option value="Student">Student</option>
    <option value="Prof">Prof</option>
</select>

<script>
$(document).on("change", "#selectForm", function() {
    if($(this).val() == "Student") {
        $("#form1").show();
        $("#form2").hide();
    }
    if($(this).val() == "Prof") {
        $("#form2").show();
        $("#form1").show();
    }
})
</script>

默认情况下,将display:none设置为两个表单

答案 1 :(得分:0)

以下是处理更改事件并使表单可见或隐藏的方法。

document.addEventListener('DOMContentLoaded',function() {
    document.querySelector('select').onchange=changeEventHandler;
},false);

function changeEventHandler(event) {
 if(event.target.value!="Prof"){
    document.getElementsByName("form2")[0].style.display="none";
    document.getElementsByName("form1")[0].style.display="block";
    }
    else { document.getElementsByName("form2")[0].style.display="block";
    document.getElementsByName("form1")[0].style.display="none"; }
    }
<form name="form1" action="/action_page.php">
   <fieldset>
    <legend>Student information:</legend>
    First name:<br>
    <input type="text" name="firstname" value="Mickey"><br>
    Last name:<br>
    <input type="text" name="lastname" value="Mouse"><br>
    Student Number:<br>
    <input type="text" name="lastname" value="Mouse"><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>
 <form name="form2" action="/action_page.php">
  <fieldset>
    <legend>Prof information:</legend>
    First name:<br>
    <input type="text" name="firstname" value="Mickey"><br>
    Last name:<br>
    <input type="text" name="lastname" value="Mouse"><br>
    Prof Number:<br>
    <input type="text" name="lastname" value="Mouse"><br>
    Prof classe:<br>
    <input type="text" name="lastname" value="Mouse"><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>
 <select>
  <option value="Student">Student</option>
  <option value="Prof">Prof</option>
</select>