Problem displaying error on the webpage using js

Question

I have created a webpage, in which i have a few input box and a submit button in a

<form action="" method="post" name="password">

On the click of the submit button, it calls a js function, which checks if the passwords are same, and if not it displays the error

if (passwrd1!=passwrd2)
{
document.getElementById("response").innerHTML="<font color='red'>Passwords do not match</font>";
}

It displays the error in:

<div id="response" align="center">Response from js</div>

But the problem is, it displays the function and then the same "Response from js" comes back.

What should i do to solve this porblem??

Best Zeeshan

if gets displayed in the "div" tag. and the js sends the msg — Zeeshan Rang
– Zeeshan Rang, Commented Jul 8, 2009 at 14:24

Robert Koritnik · Accepted Answer · 2009-11-04 09:29:41Z

5

Do you also return false from submit button's click function to prevent it from actually posting back the form?

if (passwrd1 != passwrd2)
{
    document.getElementById("response").innerHTML = "Passwords don't match";
    return false;
}

Because from the small amount of code you've given us it looks like, your form gets posted back anyway.

edited Nov 4, 2009 at 9:29

answered Jul 8, 2009 at 14:21

Robert Koritnik

105k57 gold badges286 silver badges415 bronze badges

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

1 Comment

Zeeshan Rang Over a year ago

no i am not using the return false.. can you tell me how to do that?

Jesper Haug Karsrud · Accepted Answer · 2009-07-09 21:33:21Z

1

You need a return false; in your if-statement, as the form will get posted even if the statement is hit. The return false will stop the form from being posted and will display the message.

Even though it's not part of the question, I will recommend you don't use the <font>-element, as it is deprecated and not exactly a good way of just displaying some red text. You can either output the error message in a span with the text color set to red like this:

document.getElementById("response").innerHTML = "<span style=\"color: red;\">Message</span>";

Not much difference, but following the standards of the web is always a good thing.

To give an example of what was said in the comments, you're probably even better off defining a class and styling it with CSS.

.errormsg { color: red; }

document.getElementById("response").innerHTML = "<span class=\"errormsg\">Message</span>";

The result is the same, but as said in the comments; it's easier to maintain, and thus a better solution.

edited Jul 9, 2009 at 21:33

answered Jul 8, 2009 at 17:48

Jesper Haug Karsrud

1,1936 silver badges10 bronze badges

2 Comments

Robert Koritnik Over a year ago

I would still rather define a class in the CSS file and use it in your SPAN tag using CLASS attribute. Much easier to maintain all pages with a single class.

Jesper Haug Karsrud Over a year ago

You are absolutely right, so I edited my answer to include and example of this as well :)

Collectives™ on Stack Overflow

Problem displaying error on the webpage using js

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related