Problem displaying error on the webpage using js - javascript

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

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.

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.

Related

alert box not working properly in JavaScript

<script>
function fun(){
let i=document.getElementById("input")
if(i==="sam")
{
alert("welcome SAM")
}
else
{
alert("welcome user")
}
}
</script>
<input id="input"/>
<button onclick="fun()">click</click>
if user type input as 'sam' it should be follow the if block but every time it execute else part .how to change the condition that when user type 'sam' in textbox then only it follow if block or else execute else part
getElementById method returns html element, if you want to get text inside input you should use document.getElementById("input")?.value
Make sure your input is correct.
Instead of writing "if(i===sam)", write "if(i=="sam").
Other than that, I think there's a problem with your input method. Javascript doesn't directly get the input from the box. For further information, check this link: https://www.tutorialspoint.com/How-to-take-user-input-using-HTML-forms
If you want to do it the easier way, just put "document.getElementById("input").value"
If this answer helped you, please mark it as an answer
Just add .value ahead of document.getElementById("input")
Just like that:
let i=document.getElementById("input").value
Basically, you're not passing the text to the variable i that is the reason else is executing

Problem with getting javascript answer after a subscription button

I'm doing a form with one field: a password form. When I submit it, I just want the JavaScript to tell the user if the password is the good one or if he has to try again.
Here's my code:
var x = document.forms["CodeForm"]["email"].value;
if (x == "MAX") {
$message._show('success', '✅ Code Correct !');
} else {
$message._show('failure', '❌ Code Incorrect !');
}
As you see, the "succes" and "failure" parts are for my CSS class who tells the script the color of the text just after. Now, my problem is when I enter anything, the "if" part works and it says "Code Incorrect !" in red (as I want) but if I enter the good code just after, it says "Code Correct" but in red, and not in green as it is in the CSS class "success". When I enter the good code first (after reloading the page) then it's in green.
If you wanna try it, here's my website, and the good code is "MAX" : http://enigma-door.000webhostapp.com
Here are the html code for the form and the _show method:
<form name="CodeForm" id="signup-form" method="post" action="#">
<input type="text" name="email" id="email" placeholder="Code" />
<input type="submit" value="Valider" />
</form>
$message._show = function(type, text) {
$message.innerHTML = text;
$message.classList.add(type);
$message.classList.add('visible');
window.setTimeout(function() {
$message._hide();
}, 3000);
};
Inside your $message._show method please remove the existing class then it will work.$message.classList.remove("failure");
Since your failure css class is not removed it is having high specificity and overriding for success
It's impossible to know for sure without seeing the _show method, but it sounds like perhaps you're not removing the .failure class when you're adding the .success class.
The way to find out is to inspect the html using chrome's dev tools and see what classes your input has. That will tell you why it's red.

Form onsubmit issue with javascript

Ok so I am really confused on this whole javascript in HTML stuff.
What I am trying to do is validate a form either "onblur" or on submit with an external file.
Here is the HTML code that works for the first field:
<script>
function notEmpty(rep, errMsg)
{
var errMsg = "Please enter something in Rep";
var rep = document.getElementById('submitted_by_hrrep');
if(rep.value == '')
{
alert(errMsg);
hrrep.focus();
return false;
}
return true;
}
</script>
This is in the body of the form near its field.
<script type="text/javascript">document.getElementById("submitted_by_rep").onblur=notEmpty;</script>
So that DOES work and will pop an alert that tells em to go back
What I CAN'T get to work is doing this for the rest (15 fields) of the form.
The "onsubmit" is confusing me and I think it's right but I am not sure.
<form onsubmit="return formValidation()" method="post" action="process.asp" >
Anything will help
EDIT
function validate()
{
if(document.newempRequest.submitted_by_hrrep.value ==='')
{
alert("Please provide your name");
document.newempRequest.submitted_by_hrrep.focus();
return false;
}
I got so frustrated that I started from scratch and took it a field at a time. Found that this works for the fields that need text, it looks messy for the file but calling it externally works flawlessly.
I wish I could use jquery but it seems to be more complex to setup that I actually need. Thanks for the help :)
You would have to grab all the inputs then iterate over them with a loop of some flavor, maybe a for loop?
with jquery it's really easy since there are already form validator plugins out there, and the selectors are really friendly. Using jquery,
$('#formId input')
would grab all the inputs in the form, then you can use a .each() to iterate through all the inputs
You obviously aren't going to be able to .focus() on all of the fields though, so need another function to handle the entire list instead of just one.

Simple form validation over multiple divs

I have a contact form that has 3 steps, each has its own "tab" which is then submitted via an email php script. Live version is at http://agoodman.com.au/wptest/menswear-porter-service/ (click "BOOK IN 60 SECONDS").
In the first form, I want to ensure that they've entered an email address before proceeding. I've attempted this via the following:
<button class="btn classic" onclick=" if ('#basicdetails .email').value ='=' ' '){return false;} else {document.getelementbyid('n.2').click();}">next</button>
At present the code does indeed check for an email address and halts if nothing has been entered, but when an email IS entered the form doesn't progress. ('#n.2' is a tab that simply shows the next page of the form). If I remove the if statement and just make the button code:
<button class="btn classic" onclick="document.getelementbyid('n.2').click()">next</button>
then the form progresses as it should, but obviously doesn't halt when an email address isn't entered.
Is my `if/else' syntax wrong? Otherwise, what am I missing here?
EDIT:
Made some big errors with syntax (first try with this sort of thing), see updated code:
<button class="btn classic" id="firstTab">next</button>
<script>
$('.btn#firstTab').click(function(){
if (('#basicdetails .email').value =='') {
return false;
} else {
$('#n2').click();
}
});
</script>
Using inline JavaScript is never a good idea. If you separate your markup from your logic you'll be able to organize it better and spot errors easily. You'll see the problem right away if you break your code down and indent it properly:
if ('#basicdetails .email').value ='=' ' ') {
return false;
} else {
document.getelementbyid('n.2').click();
}
A few problems indeed. You're missing a ( in your if statement. Then you need to use a comparison operator, such as == or ===. The = operator is just for assignment. And finally you can tell that this ='=' ' ' looks like a mess, it's not at all obvious what that means, plus is not valid JavaScript. Also if ('#basicdetails .email') was meant to be a jQuery selector you're missing the $ before the parenthesis.

Is there any logical purpose for this javascript beyond what I can evaluate?

Here are the snippets from one of our pages. It's my opinion that this is terribly complex, confusing, and flawed in it's design. For one thing, it causes a message in IE that the page is trying to access the clipboard. Is there something I'm missing?
I guess my question is; Is it okay to think that this is complete overkill? Do I have a right to be frustrated? Or am I oblivious to some higher knowledge?
function NoEmailGiven(){
var copyval
document.frm1.NoEmail.focus();
document.frm1.NoEmail.select();
copyval=document.SCPACALL.NoEmail.createTextRange();
copyval.execCommand('Copy');
document.frm1.Email1.focus();
document.frm1.Email1.select();
document.execCommand('Paste');
document.frm1.Email2.focus();
document.frm1.Email2.select();
document.execCommand('Paste');
}
response.write "<INPUT TYPE=button name=NoEmail VALUE=""None"" Title=""Click if No Email Address"" ONCLICK=""NoEmailGiven""></td></tr>"
Here is what the page is supposed to do..
If the user clicks the button labeled "Click here if no email address" then auto populate Email1 & Email2 with the literal string 'None'
Here is the pseudocode as I have figured it out from the page usage of what it actually does.
If the user clicks the button labeled "Click here if no email address" copy the value of this button which is "None" into the client's clipboard, then paste from the clipboard into Email1 & Email2
Finally: What I would have written (Only to duplicate the process, not improve or change the form to the users)
function NoEmailGiven()
{
Email1.value = "None";
Email2.value = "None";
}
Yes, this is a stupid way to do this. They obviously didn't know what they were doing and have not realised that copy and paste is a user orientated concept, whereas copying the value of one field to another using code more sense.
I'd delete it and rewrite it!
I'm assuming that what they're trying to do is copy data from one field to another. In jQuery, that would be:
var NO_EMAIL = '.....';
function NoEmailGiven() {
$('#Email1').val(NO_EMAIL);
$('#Email2').val(NO_EMAIL);
}

Categories