Question

我在自己的时间学习JSP，javascript和一点jquery所以请不要介意可能可怕的代码或逻辑，但我正在制作一个表单，当我提交表单时，我希望它显示3个标签显示输入，如下面的代码所示，我提交它的工作，但我似乎无法弄清楚如何将CSS显示从无变化到阻止。它可能正盯着我看，但我无法弄明白。

JSP

<html>
<body>

<link type="text/css" rel="stylesheet" href="<%=request.getContextPath()%>/dylan/css/styles.css" />

<form action="form.jsp" id="test" name="test" method="POST">
<label>Please enter your name:</label>
<input name="Name" id="Name">
<br>
<br>
<label>Please enter your number:</label>
<input name="Num" id="Num">
<br>
<br>
<label>Please select your location:</label>
<select name="Location" id="Location">
  <option value=""></option>
  <option value="USA">USA</option>
  <option value="UK">UK</option>
  <option value="Ireland">Ireland</option>
  <option value="France">France</option>
  <option value="Germany">Germany</option>
</select>

<br>
<br>
<button type="button" id="btnsubmit" name="btnsubmit" onclick="myFunction()">Submit</button>
<br>

<p><label id="lblName" style="display:none;"><% out.println(request.getParameter("Name")); %></label></p>

<p><label id="lblNumber" style="display:none;"><% out.println(request.getParameter("Num")); %></label></p>

<p><label id="lblLocation" style="display:none;"><% out.println(request.getParameter("Location")); %></label></p>

<script type="text/javascript" src="<%=request.getContextPath()%>/dylan/js/form.js"></script>

</form>
</body>
</html>

在标签中我将所有3个样式设置为无，我不知道如何在提交表单时将其更改为阻止。

CSS

body {
    background-color:#066;
    color:#fff;
}
form {
    width:400px;
    height:240px;
    Background-color:#000;
    margin-left:auto;
    margin-right:auto;
    margin-top:170px;
    Padding:10px;
    border-style:solid;
    border-width:5px;
    border-radius:25px;
    text-align:center;
}

的javascript

function myFunction() {
    var mainname, mainnum, mainloc;

    mainname = document.getElementById("Name").value;
    mainnum = document.getElementById("Num").value;
    mainloc = document.getElementById("Location").options[document.getElementById("Location").selectedIndex].value;

    if (mainname == "") {
        alert("Please enter your name");
        return false;
    }

    if (mainnum == "") {
        alert("Please enter your Number");
        return false;
    }

    if (mainloc == '') {
        alert("Please select a country from the list");
        return false;
    }

    document.getElementById("test").submit();
}

Answer 1

您可以将显示设置为阻止，如下所示。

document.getElementById('lblName').style.display = 'block';
document.getElementById('lblNumber').style.display = 'block';
document.getElementById('lblLocation').style.display = 'block';

Answer 2

如果您有许多标签，可以使用：

var labels = document.getElementsByTagName('label');

for(var i=0; i<labels.length; i++){
    labels[i].style.display = 'block';
}

如何在表单提交时更改display none to block

2 个答案: