Develop Reference

Javascript form onsubmit always runs on refresh

I'm having issues with form submit - somehow when user has not clicked submit button, upon refresh of the page, the validation is ran and the error message is shown on the page.
Anyone knows why onsubmit doesnt work here, and how do i only show the error on form submit?
HTML:
<form action="#" method="POST" name="signupForm" class="ggForm" onsubmit="return validateSignupForm()">
<div class="email">
<label for="emailBox">Email*:</label>
<input type="email" name="custEmail" id="emailBox" placeholder="john.doe#gmail.com" required
pattern="^[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}$" title="(The email entered is invalid)">
</div>
<!-- submit button below -->
<div>
<input type="submit" value="Submit Form">
</div>
<p id="potentialErrors"></p>
</form>
JS:
window.onload = init;
function init() {
document.forms["signupForm"].onsubmit = validateSignupForm();
}
function validateSignupForm() {
console.log("ran");
var errMsg = "";
var email = document.forms["signupForm"]["custEmail"].value;
if (email == "") {
errMsg += "<br>Email must be filled out";
}
// when there's errors in any field, put as message below submit button
if (errMsg != "") {
document.getElementById("potentialErrors").innerHTML = errMsg;
//change the error message css
$("p#potentialErrors").css("height","50");
$("p#potentialErrors").attr("width","500");
$("p#potentialErrors").css("font-weight","bold");
$("p#potentialErrors").css("color","red");
return false;
}
return true;
}
Edit FYI: i have edited the above code into this codepen, it is working now:
https://codepen.io/vadevalor/pen/VwepxdY
need to add jquery library,
need to remove html validation
as per comments for this question, need to remove () in the js function

You need to add onsubmit in the form event.preventDefault();, next add jquery library to you code.
So:
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
<form action="#" method="POST" name="signupForm" class="ggForm" onsubmit="event.preventDefault(); return validateSignupForm()">

Why is "enter" not working for my form?

Here is the code, I can't figure out why enter/return isn't working! Is it because it's inline?
HTML
<div class="wrap"><form name="login" style="margin: 0px">
<label for="fname">CLICK TO ENTER PASSWORD</label>
<input TYPE="text" NAME="pass" size="17" onKeyDown="e.keyCode == 13;" id="fname" class="cool"><br><input type="button" value="LOGIN" class="asbestos-flat-button" onClick="TheLogin(this.form)">
</form>
</div>
JS
<script language="JavaScript" type="text/javascript">
<!--- PASSWORD PROTECTION SCRIPT
function TheLogin() {
var password = 'password';
if (this.document.login.pass.value == password) {
top.location.href="home.html";
}
else {
location.href="index.html";
}
}
// End hiding --->
</script>
I'm learning JS so any help would be so awesome!
UPDATE
Thanks for your help. Still not working when integrated. The page doesn't load the home.html when I hit enter/return. Instead I get no refresh, and the address bar has the url http://example.com/?pass=password.
If I click the button it does load the home.html!
thanks!

Here I wrote a JSFiddle with the working example.
In the HTML code:
Remove onKeyDown="e.keyCode == 13;" from the <input> text element.
Remove onClick="TheLogin(this.form)" from the <input> button element.
Change the type of input button from 'button' to 'submit'. In this way, when you press "enter" in the input text form the form is submitted.
Intercept the "submit" event in the form, adding onSubmit="theLogin(this.form)" on <form> element.
Note: I have renamed the function name from "TheLogin" to "theLogin" because in JavaScript the functions begins with lowercase letters if they are not constructors.
The HTML code:
<div class="wrap">
<form name="login" style="margin: 0px" onSubmit="theLogin(this.form)">
<label for="fname">CLICK TO ENTER PASSWORD</label>
<INPUT TYPE="text" NAME="pass" size="17" id="fname" class="cool">
<br>
<input type="submit" value="LOGIN" class="asbestos-flat-button">
</form>
</div>
And the JavaScript code:
theLogin = function() {
var password = 'password';
if (this.document.login.pass.value === password) {
top.location.href = "home.html";
} else {
location.href = "index.html";
}
}

You have missed the <input type="submit">, without it you can't use the Enter key to submit the form.

When I press enter key, unable to login

I have been trying to log in to a offline HTML/CSS page using the enter key but unable to start with JavaScript which needs I'm sure.
But can log in using the mouse when I click the log in button which i have created ..
How do i use the enter key stroke to log in?
This is the javascript which I have hard coded for credential test which works using the mouse click.. I want it for the enter key.. Thank you.
<!DOCTYPE HTML>
<html>
<head>
<title>
Login page
</title>
</head>
<body>
<div align="center">
<div id="bor">
<h1>
Login Page
</h1>
<div>
<form name="login">
&nbsp<input type="text" placeholder="Enter the Username" name="user"/> <br />
<input type="password" placeholder="Enter the Password" name="pwd"/><br /><br />
<input type="checkbox" name="en" value="en" />Remember Me<br>
<input type="button" onclick="check(this.form)" value="Login"/>
<input type="reset" value="Cancel"/>
</form>
</div>
<script language="javascript">
function check(form)
{
if(form.user.value == "user" && form.pwd.value == "pwd")
{
window.open('inbox.html','_self')
}
else
{
alert("Error Password or Username")
}
}
</script>

Use the submit event handler. The click handler on an element will only fire if you click on it. What you are trying to do is submitting a form, but handling the form with javascript instead of on the server. I would recommend binding that dynamically, but as you have all javascript here inline, I'll give an example inline too.
You'll need to attach a submit event handler to the form element. If you do it inline, this will work with onsubmit="..." instead. The return is there to prevent/allow the form to be submitted to the server. If the function returns 'true', the form will be submitted to the server. If the function returns 'false', the form will not be submitted. You'll also need to change the type of your submit button to submit. This will tell the browser to submit the form if that button is clicked. Alternatively, if you press enter in an input field, the browser will see this as submitting the form too.
<form name="login" onsubmit="return check(this)">
&nbsp<input type="text" placeholder="Enter the Username" name="user"/> <br />
<input type="password" placeholder="Enter the Password" name="pwd"/><br/><br/>
<input type="checkbox" name="en" value="en" />Remember Me<br>
<input type="submit" value="Login"/>
<input type="reset" value="Cancel"/>
</form>
The javascript behind it will remain mostly the same. You'll notice that we passed this to the function. This will pass the element itself (in this case the form element) to the function. As said before, you'll need to return false. I've changed form to frm as form is a globally defined variable in some browsers.
function check(frm)
{
if(frm.user.value == "user" && frm.pwd.value == "pwd")
{
window.open('inbox.html','_self')
}
else
{
alert("Error Password or Username")
}
return false;
}
An example jsfiddle: http://jsfiddle.net/AS5t5/

Detect post action in a form

I want to do something when a form is submitted.
var ispostaction = false;
$("#myform").submit(function () {
ispostaction = true;
});
When the form is submitted the .submit(function ()) is not called.
Is there anything wrong that I'm doing? I have the form id as myform.
I would appreciate any help.
Here's my xhtml page. I'm using JSF 2
<form id="myform" class="someclass" enctype="application/x-www-form-urlencoded"
action="pagename.jsf" method="post">
// custom input text field
// selectOneMenu
// a few more input text fields
// submit button is below
<input id="javax.faces.ViewState" type="hidden" autocomplete="off" value="...." name="javax.faces.ViewState">
</form>

The jquery documentation:
The submit event is sent to an element when the user is attempting to submit
a form. It can only be attached to <form> elements. Forms can be submitted
either by clicking an explicit <input type="submit">, <input type="image">,
or <button type="submit">, or by pressing Enter when certain form elements
have focus.
Calling the submit function will not trigger the submit event. You can "fix" this by adding a hidden button which you click from jquery instead. Most, if not all, browsers unfortunately display the same behavior.
<html>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<body>
<form id="myform" enctype="application/x-www-form-urlencoded"
action="posturl" method="post">
// custom input text field
// selectOneMenu
// a few more input text fields
// submit button is below
<input id="javax.faces.ViewState" type="hidden" autocomplete="off" value="...." name="javax.faces.ViewState">
<input type="text" value="a value" />
<input id="submit" type="submit" value="submit" style="display: none;" />
</form>
<script type="text/javascript">
$(document).ready(function() {
$("#myform").bind('submit', function() {
alert('');
});
$("#submit").click();
});
</script>
</body>
</html>

E-mail form interactivity

I'm a web development student and I need some help. I have the code below; How do I make it work only when the form is submitted and not the text field is clicked. I also would like it to get and insert the textField's value in the .thanks Div. Please help me learn.
<script type="text/javascript">
$(document).ready(function(){
$(".quote").click(function(){
$(this).fadeOut(5000);
$(".thanks").fadeIn(6000);
var name = $("#name").val();
$("input").val(text);
});
});
</script>
<style type="text/css">
<!--
.thanks {
display: none;
}
-->
</style>
</head>
<body>
<form action="" method="get" id="quote" class="quote">
<p>
<label>
<input type="text" name="name" id="name" />
</label>
</p>
<p>
<label>
<input type="submit" name="button" id="button" value="Submit" />
</label>
</p>
</form>
<div class="thanks"> $("#name").val(); Thanks for contacting us, we'll get back to you as soon as posible</div><!-- End thanks -->

This is a bit rough and ready but should get you going
$(document).ready(function(){
$("#submitbutton").click(function(){
//fade out the form - provide callback function so fadein occurs once fadeout has finished
$("#theForm").fadeOut(500, function () {
//set the text of the thanks div
$("#thanks").text("Thanks for contacting us " + $("#name").val());
//fade in the new div
$("#thanks").fadeIn(600);
});
});
});
and I changed the html a bit:
<div id="theForm">
<form action="" method="get" id="quote" class="quote">
<p>
<label>
<input type="text" name="name" id="name" />
</label>
</p>
<p>
<label>
<input type="button" name="submitbutton" id="submitbutton" value="Submit" />
</label>
</p>
</form>
</div>
<div id="thanks">Thanks for contacting us, we'll get back to you as soon as posible</div><!-- End thanks -->

There are several things at issue here:
By using $('.quote').click(), you're setting a handler on any click event on any element contained within the <form>. If you want to catch only submit events, you should either set a click handler on the submit button:
// BTW, don't use an id like "button" - it'll cause confusion sooner or later
$('#button').click(function() {
// do stuff
return false; // this will keep the form from actually submitting to the server,
// which would cause a page reload and kill the rest of your JS
});
or, preferably, a submit handler on the form:
// reference by id - it's faster and won't accidentally find multiple elements
$('#quote').submit(function() {
// do stuff
return false; // as above
});
Submit handlers are better because they catch other ways of submitting a form, e.g. hitting Enter in a text input.
Also, in your hidden <div>, you're putting in Javascript in plain text, not in a <script> tag, so that's just going to be visible on the screen. You probably want a placeholder element you can reference:
<div class="thanks">Thanks for contacting us <span id="nameholder"></span>, we'll get back to you as soon as possible</div>
Then you can stick the name into the placeholder:
var name = $("#name").val();
$('#nameholder').html(name);
I don't know what you're trying to do with the line $("input").val(text); - text isn't defined here, so this doesn't really make any sense.