.innerHTML in Javascript

Question

I'm trying to validate a login page with a div to display the errors in , I'm using innerHTML to change the empty text in the div with the error occured , the problem is that the error msg is written and disappears just in a second

here is the code

<html>
<head>
<title>
    Sign up for a membership @ Ay 7aga.com
</title>
<script type="text/javascript">
function check(){
var x = "";
if(document.getElementById('user').value =="")
    x+="Enter user name -";
if(document.getElementById('password').value =="")
    x+="Enter password";
document.getElementById('error1').innerHTML = x;

}
</script>
</head>
<body>
<div name="error" id="error" style="width:1200px;background-color:red"> 
<p name="error1" id="error1"> 
</div>
<center>
<br/>
<form name="register" id="register" >
    <table>
        <tr>
        <td> UserName </td>
            <td> <input type="text" id="user" /> </td>
        </tr>
        <tr>
            <td> Password </td>
            <td> <input type="password" name="password" id="password"/></td>
        </tr>

    </table>
    <button onclick="check()"> Submit </button>
</form>
<a href="Home page.html"> Go to Home page </a>
</center>
</body>
</html>

Put the check() on the <form onsubmit="return check();"> handler, and return true or false from function check(). — Jared Farrish
– Jared Farrish, Commented Oct 29, 2011 at 12:37

Pointy · Accepted Answer · 2012-09-05 13:17:23Z

2

When using a <button> tag, the "type" attribute is important: most browsers (correctly) default the type to "submit", which makes it work as a form submit element. You can instead set the type to "button", which makes the button have no native behavior other than to fire event handlers. Thus:

Thus:

<button onclick="check()" type=button>Submit</button>

will keep the button from causing an implicit submit of the form.

answered Sep 5, 2012 at 13:17

Pointy

415k62 gold badges600 silver badges632 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pablo Santa Cruz · Accepted Answer · 2011-10-29 12:34:45Z

2

You are approaching it the wrong way. What is probably happening is that your for is being submitted after click the login button, so that's why the text "disappears" in a couple of seconds.

Put your login checks on the server side, and generate HTML content for that specific scenario instead of using JavaScript.

BTW: what's that <button> tag you are using?

answered Oct 29, 2011 at 12:34

Pablo Santa Cruz

182k33 gold badges250 silver badges300 bronze badges

6 Comments

Pointy Over a year ago

It's probably the <button> tag that's been in HTML forever :-) The issue with the tag is that in some browsers the "type" attribute defaults to "submit". If the "type" is set to "button" then it won't trigger form submission.

pimvdb Over a year ago

+1 A button element is a submit one by default (if no type attribute given). w3.org/TR/html4/interact/forms.html#h-17.5

a.u.r Over a year ago

I thought about the submitting issue , but I thought that since the button isn't of type submit then it won't be submitted . I didn't notice the <button> thing until you wrote so :) I forgot to make an attribute of type "button", this was the fault thank you :)

Pablo Santa Cruz Over a year ago

@Pointy: wow! all these years writing HTML and never heard of the tag <button> before... Always used <input type="button">. Is it there for backward compatibility? Or is it newer than <input type="button">?

Pointy Over a year ago

@PabloSantaCruz The nice thing about <button> is that you can wrap it around <img> tags etc; basically most inline content (kind of like <a>)

|

Collectives™ on Stack Overflow

.innerHTML in Javascript

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related