admin管理员组

文章数量:1293905

Here's what I've tried so far.

<head>
  <script>
    function myFunction() {
      var a = document.forms["login"]["uname"].value;
      var b = document.forms["login"]["pwd"].value;
      if (a == "" || b == "") {
        error = "All fields must be entered.";
        document.getElementById("errorid").innerHTML = error;
      }
    }
  </script>
</head>

<body>
  <form name="login" action="">
    <b>Enter username:</b>
    <input type="text" name="uname" />
    <br />
    <b>Enter password:</b>
    <input type="password" name="pwd" />
    <br />
    <p id="errorid"></p>
    <input onclick="myFunction()" type="submit" />
  </form>
</body>

</html>

Here's what I've tried so far.

<head>
  <script>
    function myFunction() {
      var a = document.forms["login"]["uname"].value;
      var b = document.forms["login"]["pwd"].value;
      if (a == "" || b == "") {
        error = "All fields must be entered.";
        document.getElementById("errorid").innerHTML = error;
      }
    }
  </script>
</head>

<body>
  <form name="login" action="">
    <b>Enter username:</b>
    <input type="text" name="uname" />
    <br />
    <b>Enter password:</b>
    <input type="password" name="pwd" />
    <br />
    <p id="errorid"></p>
    <input onclick="myFunction()" type="submit" />
  </form>
</body>

</html>

But it's not displaying the error message in p tag with ID = errorid Have I written wrong code? If yes then how can this be fixed?

  • javascript
  • html
Share edited Jan 11, 2016 at 12:42 CoderPi 13.2k4 gold badges38 silver badges64 bronze badges asked Jan 11, 2016 at 12:39 user5773634user5773634 1
  • 3 The code you posted is working. I puted it in a demo so you can try it yourself. – CoderPi Commented Jan 11, 2016 at 12:42
Add a ment  | 

6 Answers 6

Reset to default 5

Your code to display message is correct, problem here is that the form is submitted when the button is clicked. You need to prevent the default action when the condition is not fulfilled.

I would remend you to use form's submit event, when false is returned it will prevent the default action (form being submitted).

<head>
  <script>
    function myFunction() {
      var a = document.forms["login"]["uname"].value;
      var b = document.forms["login"]["pwd"].value;
      if (a == "" || b == "") {
        error = "All fields must be entered.";
        document.getElementById("errorid").innerHTML = error;
        return false;
      }
      return true;
    }
  </script>
</head>

<body>
  <form name="login" action="" onsubmit="return myFunction()">
    <b>Enter username:</b>
    <input type="text" name="uname" />
    <br />
    <b>Enter password:</b>
    <input type="password" name="pwd" />
    <br />
    <p id="errorid"></p>
    <input type="submit" />
  </form>
</body>

</html>

You can add the required attribute to the input if the user must enter it in order to submit the form you can do this like :<input type='text' required> In this way you dont have to worry about the user not filling the field. HTML5 will automatically take care of that. Try it

Please make the following one change:

On the submit button, replace the following code :

<input onclick="myFunction()" type="submit" />

with the following

<input onclick="return myFunction()" type="submit" />

Then it should work fine

Your code was displaying the error message instantly and then refreshed due to the submission. Use the required attribute in this way user will not be able to submit the form without filling all the required fields

Try this,updated your code

<html>
<head>
  <script>
    function myFunction() {
      var a = document.forms["login"]["uname"].value;
      var b = document.forms["login"]["pwd"].value;
      if (a == "" || b == "") {
        error = "All fields must be entered.";
        document.getElementById("errorid").innerHTML = error;
        return false;
      }
     return true; 
    }
  </script>
</head>

<body>
  <form name="login" action="">
     <p id="errorid"></p>
    <b>Enter username:</b>
    <input type="text" name="uname" />
    <br />
    <b>Enter password:</b>
    <input type="password" name="pwd" />
    <br />

    <input onclick="return myFunction()" type="submit" />
  </form>
</body>

</html>

Change your input type="submit" to input type="button". Like this

<input onclick="myFunction()" type="button" value="Submit" />

The submit button basically posts the page and that causes the page to reload (since you haven't specified an action="" value in your <form> tag). Your error message does display in <p> but it disappears since your page refreshes.

If you're looking to submit the details, there are several ways of doing it. But, you would have to ask that as a separate question.

本文标签： How do I display message in a particular HTML div using JavaScriptStack Overflow

版权声明：本文标题：How do I display message in a particular HTML div using JavaScript? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741591283a2387143.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。