Simple form validation over multiple divs - javascript

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.

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

{"error": "Please use POST request"} - alternative solution to submitting a form

I'm working on a school project and have attempted to create a calculator that can be found at the following link:
http://jsfiddle.net/ae97vgxz/2/
And my JS is:
$(document).ready(function(){
// Setup variable as empty
var method = "";
// Detect when initial radio button is clicked
$("input[type=radio]").click(function() {
// Get the weight from the input box
var weight = $("#meatWeight").val();
// If the water method was clicked
if ($(this).hasClass("water")) {
var method = weight * 60;
// Show me what the value is (can be removed)
alert(method);
// If the fridge method was clicked
} else if ($(this).hasClass("fridge")) {
var method = weight * 793;
// Show me what the value is (can be removed)
alert(method);
}
});
When you use it, if you enter a weight first, then select a method of defrosting you will get the correct answer in an alert window. However, if you press the 'calculate' button you get the following message -
{"error": "Please use POST request"}
From doing some of my own research, I believe this is because I am trying to submit a form and JSFiddle doesn't let you do that. If I try on a local environment in Chrome, again there is no output.
I am very limited by my JS knowledge (as I'm sure you can see) so I just can't fathom out a solution. Can anyone suggest what I am doing wrong and what the solution might be?
Thanks!
You have a mistake here:
function defrost(weight) {
return (makeTime(method));
}
It should be:
function defrost(weight) {
return (makeTime(weight));
}
Also, you should change the makeTime function or it won't work. The parseInt clause should be like this:
parseInt(time / 60);
Your current method of submitting the form is GET
<form id="defrostCalculator" name="defrostCalculator" onsubmit="callbackDefrost(this.elements.meatWeight.value); return false;" method="GET">
If the destination requires POST, use POST.
<form ... method="POST">
Your code has a couple of minor issues. However, the major issue you have is that if you want to use a non-AJAX form on jsfiddle, you have to change all your buttons to have the attribute:
type="button"
instead of what you currently have:
type="submit"
When you do <input type="submit", jsfiddle.net squawks and fails because you cannot submit form information to their servers. Luckily, you do not need any AJAX or server interaction. So your simple calculator can just use simple buttons.

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.

document.forms[0].onsubmit is not fully working correctly ... what's the issue?

So I am using document.forms[0].onsubmit in my code to check if two duplicate values exist in the text field on my applications , if a user enters two numbers that are the same , then when you click on submit, an alert box pops up telling you that two numbers are the same .. THAT part works fine .. but after changing the values and having different numbers, I still get the same text from the alert box saying that the two numbers are the same .. it looks like my change is not recognized at all after the first error has been corrected .. How can I actually make the submit process recognize that a change to the error was made. Below is the relevant code .. I would like to be able to correct this in Javascript with the code I already have if possible . Thanks
if(duplicate(esnList)){
document.forms[0].onsubmit = function () {
alert ("ERROR: You can have duplicate ESNs in the ESN text field.");
return false;
}
}
<input class="submit" type="submit" name="submit" value="Provision Unit(s)" tabindex="13">
You should do the check inside the function.
document.forms[0].onsubmit = function () {
if(duplicate(esnList)) {
alert ("ERROR: You can have duplicate ESNs in the ESN text field.");
return false;
}
}
Instead of conditionally providing a callback that always displays the error message, you have to always provide a callback that conditionally displays the message.

Problem displaying error on the webpage using js

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.

Categories