Develop Reference

How to reload this form without refreshing whole page?

I am using "Send Email from a Static HTML Form using Google Apps Mail" on my static site. But when I submit a form i have to refresh the whole page to submit another mail. If I don't reload the page success text don't vanish and send button don't work. So i am asking is there any way to refresh my form section without refreshing the whole page? please help me how to do it.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="container mail text-center justify-content-center mt-5">
<div class="row">
<div class="col-12">
<h3>Contact Me Now!</h3>
<hr>
</div>
<div class="col-md-12 col-xs-12 form">
<form method="post" role="form"
action="https://script.google.com/macros/s/AKfycbwtLbTgUDGQxi9FY8Jks6bJs3TnYPBNU7rvO8b8_zrdyD4Pa6g/exec"
method="post" role="form" class="gform " data-email="">
<div class="form-row">
<div class="col form-group">
<input type="text" name="name" class="form-control" id="name" placeholder="Your Name"
data-rule="minlen:4 " data-msg="Please enter at least 4 chars " required="true" />
</div>
<div class="col form-group">
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email"
data-rule="email " data-msg="Please enter a valid email " required="true" />
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="subject" id="subject" placeholder="Subject"
data-rule="minlen:4 " data-msg="Please enter at least 8 chars of subject "
required="true" />
</div>
<div class="form-group">
<textarea class="form-control" name="message" rows="5" data-rule="required"
data-msg="Please write something for me " placeholder="Message " required="true"></textarea>
</div>
<div class="text-center">
<button type="submit" class="btn btn-success w-100 submit">Send Message</button>
</div>
<div style="display:none" class="thankyou_message">
<div class="alert" role="alert"> <em>Thanks</em> for contacting me!
I will get back to you soon!<br>
<i class="fas fa-sync fa-spin"></i>
</div>
</div>
</form>
</div>
</div>
</div>
<script data-cfasync="false" type="text/javascript"
src="https://cdn.rawgit.com/dwyl/html-form-send-email-via-google-script-without-server/master/form-submission-handler.js"></script>

If the form is refreshing the page, you'll need to use preventDefault to cancel its default behaviour then use reset() to reset the form.
const form = document.querySelector('form');
form.addEventListener('submit', e => {
e.preventDefault();
[...form.elements].forEach(input => console.log(`${input.name}: ${input.value}`)); // Not Important
form.reset();
});
<form method="POST">
<input type="text" name="name" placeholder="name">
<input type="password" name="password" placeholder="password">
<button type="submit">Submit</button>
</form>

In JavaScript there is a function for forms which will reset the form clearing all the data in it, ready for another submit. This can be accomplished by running a JavaScript function on submit. This requires a couple changes in your code.
Firstly, we need to change this:
<button type="submit" class="btn btn-success w-100 submit">Send Message</button>
to this:
<button type="button" onclick="submitForm1()" class="btn btn-success w-100 submit">Send Message</button>
Once done, we can add some JavaScript to your page. If you have a JavaScript file linked to the page already, you can just add this code to that.
function submitForm1() {
let form = document.getElementsByClassName("gform");
form.submit();
form.reset();
}
You can also use document.getElementById("[id]"); and add an ID to your form. This is also preferable.

The first thing that comes to mind it's do all this on js so you can through ajax request send what you want. But I think it's not what you're looking for. You can't send data from page without refreshing, that's how it's work, php or html with some functional. You can change ...
<button type="button" class="btn btn-success w-100">Send Message</button>
... and collect all data by JavaScript and send it through ajax.

Why is my form not returning an alert when password does not match the confirm password field Javascript?

So I'm new to JS, and I'm trying to make this form prevent submission if password does not match the confirm password field. However, when I enter in 2 different passwords, I don't get an alert like I've coded in the script below. Any thoughts? For reference, the form was built w/ bootstrap.
<form class="form-signin">
<div class="form-label-group">
<input type="text" id="fullName" class="form-control" placeholder="Username" required autofocus>
<label for="fullName">Full name</label>
</div>
<div class="form-label-group">
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required>
<label for="inputEmail">Work email</label>
</div>
<div class="form-label-group">
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<label for="inputPassword">Password</label>
</div>
<div class="form-label-group">
<input type="password" id="inputConfirmPassword" class="form-control" placeholder="Password" required>
<label for="inputConfirmPassword">Confirm password</label>
</div>
<button class="btn btn-lg btn-primary btn-block text-uppercase" id ="register-btn" type="submit">Register</button>
<hr class="my-4">
<div class="registration-login">
<p class="already-have__account">Already have an account?</p> Login
</p>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="registration__section">
<h2>Innovative supply chain teams use Rumi to manage scalable and sustainable packaging.
</h2>
</div>
<script>
var form = document.getElementById('form-signin');
form.onsubmit = function() {
if (inputPassword.value !== inputConfirmPassword.value) {
alert("Your passwords don't match");
return false;
}
else {
return true;
}
}

Just a minor mistake.
You are using get getElementById.
var form = document.getElementById('form-signin');
There is no id with 'form-signin',
<form class="form-signin">
Rename the class to id.
<form id="form-signin">
Check out this (JSFiddle). It's working here.

Javascript sign up function

Here, I am trying to use the signUp() function to get the users details and store them into the database. I already tested the backend Javascript file (signUp function) using postman and it works perfectly fine.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<link href="css\signup.css" rel="stylesheet" type="text/css">
<script>
function signUp() {
if (document.getElementById("password2").value == document.getElementById("cfmpassword2").value) {
var users = new Object();
users.firstName = document.getElementById("firstName").value;
users.lastName = document.getElementById("lastName").value;
users.username2 = document.getElementById("username2").value;
users.email = document.getElementById("email").value;
users.password2 = document.getElementById("password2").value;
var postUser = new XMLHttpRequest(); // new HttpRequest instance to send user details
postUser.open("POST", "/users", true); //Use the HTTP POST method to send data to server
postUser.setRequestHeader("Content-Type", "application/json");
// Convert the data in "users" object to JSON format before sending to the server.
postUser.send(JSON.stringify(users));
}
else {
alert("Password column and Confirm Password column doesn't match!")
}
}
</script>
</head>
<body>
<div style="margin-top: -703px; margin-left: 1250px; position: absolute;">
<!-- Sign up button -->
<p>Need an account?
<button class="signup" id='signup' onclick="document.getElementById('id02').style.display='block'" style="width:auto; height: 6.1vh;">
Sign Up
</button>
</p>
</div>
<!-- The Sign Up Modal-->
<div id="id02" class="modal2">
<span onclick="document.getElementById('id02').style.display='none'" class="close2" title="Close Modal">×</span>
<!-- Modal Content -->
<form class="modal-content2">
<div class="container3">
<h1>Sign Up</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="firstName"><b>First Name</b></label>
<input type="text" id="firstName" placeholder="Enter First Name" name="firstName" required>
<label for="lastName"><b>Last Name</b></label>
<input type="text" id="lastName" placeholder="Enter Last Name" name="lastName" required>
<label for="username"><b>Username</b></label>
<input type="text" id="username2" placeholder="Enter Username" name="username" required>
<label for="email"><b>Email</b></label>
<input type="text" id="email" placeholder="Enter Email" name="email" required>
<label for="psw"><b>Password</b></label>
<input type="password" id="password2" placeholder="Enter Password" name="psw" required>
<label for="psw-confirm"><b>Confirm Password</b></label>
<input type="password" id="cfmpassword2" placeholder="Confirm Password" name="psw-confirm" required>
<br>
<br>
<p>By creating an account you agree to our <a href="aboutus.html" style="color:dodgerblue">Terms &
Privacy</a>.</p>
<div class="clearfix">
<button type="button" onclick="document.getElementById('id02').style.display='none'" class="cancelbtn2">Cancel</button>
<button type="submit" class="signupbtn" onclick="signUp()">Sign Up</button>
</div>
</div>
</form>
</div>
</body>
</html>
If Confirm Password matches Password, I will get the user details and send the data to my database server. Else, an alert msg is supposed to pop up.
However, I after trying it out, I see nothing being added into my database. My else part works though, an alert message does pop up on my browser.
Is this due to an error about the Confirm Password? Because I have a very similar set of working codes except that it doesn't contain the Confirm Password column. I got the confirm password from here how to check confirm password field in form without reloading page
Could someone please help identify the problem? Thanks a lot!

You are calling signUp() when a submit button is clicked.
The JavaScript runs, but as the XHR request is being prepared, the form is submitted, the browser navigates, and the XHR request is canceled.
Don't use a submit button if you aren't submitting the form.

Your comment that changing the submit to a regular button prevents you from actually being able to click it seems a little odd. The below code has a standard button and seems OK which suggests a css issue perhaps. I tested this with a php endpoint and the request was sent OK so it ought to be find hitting your javascript endpoint - unless there is another factor (css most likely ) interfering with the button
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<link href="css/signup.css" rel="stylesheet" type="text/css">
<script>
function signUp(event) {
event.preventDefault();
if (document.getElementById("password2").value == document.getElementById("cfmpassword2").value) {
var users = new Object();
users.firstName = document.getElementById("firstName").value;
users.lastName = document.getElementById("lastName").value;
users.username2 = document.getElementById("username2").value;
users.email = document.getElementById("email").value;
users.password2 = document.getElementById("password2").value;
var postUser = new XMLHttpRequest();
/*
Optional:
A callback to process response from the server and possibly manipulate the DOM
or let the user know if things went OK.
*/
postUser.onreadystatechange=function(){
if( this.status==200 && this.readyState==4 ){
alert( this.response )
}
}
postUser.open( "POST", "/users", true );
postUser.setRequestHeader( "Content-Type", "application/json" );
postUser.send( JSON.stringify( users ) );
}
else {
alert("Password column and Confirm Password column doesn't match!")
}
}
</script>
</head>
<body>
<div style="margin-top: -703px; margin-left: 1250px; position: absolute;">
<!-- Sign up button -->
<p>Need an account?
<button class="signup" id='signup' onclick="document.getElementById('id02').style.display='block'" style="width:auto; height: 6.1vh;">
Sign Up
</button>
</p>
</div>
<!-- The Sign Up Modal-->
<div id="id02" class="modal2">
<span onclick="document.getElementById('id02').style.display='none'" class="close2" title="Close Modal">×</span>
<!-- Modal Content -->
<form class="modal-content2">
<div class="container3">
<h1>Sign Up</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="firstName"><b>First Name</b></label>
<input type="text" id="firstName" placeholder="Enter First Name" name="firstName" required>
<label for="lastName"><b>Last Name</b></label>
<input type="text" id="lastName" placeholder="Enter Last Name" name="lastName" required>
<label for="username"><b>Username</b></label>
<input type="text" id="username2" placeholder="Enter Username" name="username" required>
<label for="email"><b>Email</b></label>
<input type="text" id="email" placeholder="Enter Email" name="email" required>
<label for="psw"><b>Password</b></label>
<input type="password" id="password2" placeholder="Enter Password" name="psw" required>
<label for="psw-confirm"><b>Confirm Password</b></label>
<input type="password" id="cfmpassword2" placeholder="Confirm Password" name="psw-confirm" required>
<br>
<br>
<p>By creating an account you agree to our Terms & Privacy.</p>
<div class="clearfix">
<button type="button" onclick="document.getElementById('id02').style.display='none'" class="cancelbtn2">Cancel</button>
<!--
modify the button to a standard button rather than a submit
- this enables the ajax function to do what is intended.
An alternative would be to invoke `event.preventDefault()` within
the signUp(event) function to stop the submit button from actually
submitting the form
-->
<button type="button" class="signupbtn" onclick="signUp(event)">Sign Up</button>
</div>
</div>
</form>
</div>
</body>
</html>

Can't get the value from Email Input

I've downloaded a template form to sign in with bootstrap. When I try to get the value from the email or password field nothing happens.
the from looks like this
<form class="form-signin">
<img class="mb-4" src="https://getbootstrap.com/docs/4.3/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button onclick="autentica()" class="btn btn-lg btn-primary btn-block" type="submit" >Sign in</button>
</form>
and the function I'm trying to use looks like this:
<script>
function autentica(){
var mail = document.getElementById("inputEmail").value();
alert(mail);
if(document.getElementById("inputEmail").value() == "admin#admin.cl" && document.getElementById("inputPassword").value() == "admin"){
document.location.href= "dashboard.html";
}
}
</script>
Neither the alert nor the changing page works.
The "dashboard.html" file is on the same folder.
Thanks in advance.

There is no function value(), but it's a (string) property value. So the correct syntax would be: var mail = document.getElementById("inputEmail").value;

JavaScript validation of html form

I have a PHP file containing a HTML registration form. The form consists of a few fields including a phone number, password and repeat password field.
I would like these fields to be validated and require some guidance on how to validate the users input. These fields should be required and the two password fields should match.
If it fails validation I would like the user to have feedback and the form to be prevented from being submitted.
If it passes then the form should be submitted.
<div id="id02" class="modal">
<form class="modal-content animate" action="register.php" method="post">
<div class="imgcontainer">
<span onclick="document.getElementById('id02').style.display='none'" class="close" title="Close Modal">×</span>
</div>
<div class="container">
<label><b>Name:</b></label>
<input type="text" placeholder="Enter Name" name="name" required>
<label><b>Phone No.:</b></label>
<input type="text" placeholder="Enter Phone number" name="phone" required>
<label><b>Date of Birth:</b></label>
<input type="date" placeholder="Enter Date of Birth" name="dob" required>
<label><b>E-mail:</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label><b>Password:</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<label><b>Repeat Password:</b></label>
<input type="password" placeholder="Repeat Password" name="psw-repeat" required>
<input type="checkbox" checked="checked"> Remember me
<p>By creating an account you agree to our Terms & Privacy.</p>
<div class="clearfix">
<button type="submit" class="register">Register</button>
<button type="button" onclick="document.getElementById('id02').style.display='none'" class="cancelbtn">Cancel</button>
</div>
</div>
</form>
<script>
// Get the modal
var modal = document.getElementById('id02');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event)
{
if (event.target == modal)
{
modal.style.display = "none";
}
}
</script>

Taken from https://www.w3schools.com/js/js_validation.asp (one of the first google results when googling for your question. You might want to do so yourself the next time).
You might want to adapt your code like this:
<form class="modal-content animate" action="register.php" onsubmit="return validateForm()" name="formToValidate" method="post">
[...] your other code [...]
function validateForm() {
// get value of phone number field
var x = document.forms["formToValidate"]["phone"].value;
// check phone number for being empty
if (x == "") {
alert("Phone number must be filled in");
// return false to interupt the POST request.
return false;
}
// copy, paste and adapt for the other form elements
}