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.

How to start automatic download of pdf on after form submission

I am new into PHP and Html , I have a form where I am able to post details using third party service.I want to make this form submission in such a way that after submission this should start pdf download automatically.It should perform 2 actions on same button click. I have gone through many solutions but I am not able to make this work. Here is my form
<div class="modal-body">
<div class="media-container-column" data-form-type="formoid">
<div data-form-alert="" hidden="" class="align-center" > Thanks for filling out the form use this link to Download </div>
<form class="mbr-form" action="https://mobirise.com/ " method="post" data-form-title="Mobirise Form"><input type="hidden" name="email" data-form-email="true" value="bUMCs/mtytHWYRo/XjN7tA1PqfT+NB00KjPTWZfuYXvKQmJxQUOr1gzeKJUJwLqxqXI/Euh3h4TzMmnq0FW5UjTC1AjsnumlJFTc7U5521K+f6PwqF4lRJdVha0cCPLW" data-form-field="Email">
<div data-for="name">
<div class="form-group">
<input type="text" class="form-control px-3" name="name" data-form-field="Name" placeholder="Name" required="" id="name-header15-c">
</div>
</div>
<div data-for="email">
<div class="form-group">
<input type="email" class="form-control px-3" name="email" data-form-field="Email" placeholder="Email" required="" id="email-header15-c">
</div>
</div>
<div data-for="phone">
<div class="form-group">
<input type="tel" class="form-control px-3" name="phone" data-form-field="Phone" placeholder="Phone" id="phone-header15-c">
</div>
</div>
<span class="input-group-btn"><button onClick="header.php" type="submit" class="btn btn-secondary btn-form display-4">Download</button></span>
</form>
</div>
</div>
This form submission is working fine, how can I start downloading pdf after this, any sample code in javascript or php would be helpful.Thanks

You need to add an id="SampleForm" in your form.
<div class="modal-body">
<div class="media-container-column" data-form-type="formoid">
<div data-form-alert="" hidden="" class="align-center" > Thanks for filling out the form use this link to Download </div>
<form id="SampleForm" class="mbr-form" action="https://mobirise.com/ " method="post" data-form-title="Mobirise Form"><input type="hidden" name="email" data-form-email="true" value="bUMCs/mtytHWYRo/XjN7tA1PqfT+NB00KjPTWZfuYXvKQmJxQUOr1gzeKJUJwLqxqXI/Euh3h4TzMmnq0FW5UjTC1AjsnumlJFTc7U5521K+f6PwqF4lRJdVha0cCPLW" data-form-field="Email">
<div data-for="name">
<div class="form-group">
<input type="text" class="form-control px-3" name="name" data-form-field="Name" placeholder="Name" required="" id="name-header15-c">
</div>
</div>
<div data-for="email">
<div class="form-group">
<input type="email" class="form-control px-3" name="email" data-form-field="Email" placeholder="Email" required="" id="email-header15-c">
</div>
</div>
<div data-for="phone">
<div class="form-group">
<input type="tel" class="form-control px-3" name="phone" data-form-field="Phone" placeholder="Phone" id="phone-header15-c">
</div>
</div>
<span class="input-group-btn"><button onClick="header.php" type="submit" class="btn btn-secondary btn-form display-4">Download</button></span>
</form>
</div>
</div>
Then you need to add some code to process download on form Submit event.
<script>
var pdfUrl = "https://example.com/link-to-your-pdf";
$('#SampleForm').on('submit', function () {
window.open(pdfUrl, '_blank');
});
</script>

You'll have to handle submission with Javascript, instead of the default one.
There is some documentation about sending form submission throught javascript:
https://developer.mozilla.org/en-US/docs/Learn/Forms/Sending_forms_through_JavaScript

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>

Hide and Show Input Mask

When running this solution to hide and show an input mask, on page load I am seeing both input boxes. My script has been placed on the bottom of the page as last script. I am basically hiding and showing one or the other input box based on the checkbox. All appears to be working perfectly on jsfiddle and this code snippet, yet on Chrome, Android browser, Firefox and Safari both input boxes display on page load. After I toggle the checkbox, then it works properly. Not sure what is causing it to show both input boxes on page load. Any help wold be appreciated.
var showPass=false;
$('#c').change(function(){
showPass = ($('#c:checked').length>0);
if (showPass){
$('#p').hide();
$('#transaction_id').show();
}else{
$('#transaction_id').hide();
$('#p').show();
}
});
$('#p').change(function(){
if (!showPass) $('#transaction_id').val($('#p').val());
});
$('#transaction_id').change(function(){
if (showPass) $('#p').val($('#transaction_id').val());
});
#transaction_id{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/digitalBush/jquery.maskedinput/1.4.1/dist/jquery.maskedinput.js"></script>
<div class="bs-example">
<form role="search" class="navbar-form navbar-left" id="form2" name="form2" autocomplete="off" autocorrect="off" method="post" action="<?php echo $editFormAction; ?>">
<div class="form-group">
<label for="input">Scan Receipt, ID or </label>
<input type="checkbox" id="c">
<span class="phonenum">Phone Number</span>
<div class="input-group">
<input type="text" name="transaction_id" id="p" class="form-control" placeholder="receipt or ID" autofocus>
<input type="text" name="transaction_id" id="transaction_id" class="form-control" placeholder="(999) 999-9999" style="display:none" autofocus />
<input type="hidden" id="activity_id" name="activity_id" value="<?php echo $_GET['recordID']; ?>" />
<input type="hidden" name="MM_insert" value="form2" />
<span class="input-group-btn">
<button type="submit" id="Submit" name="Submit" class="btn btn-default" onclick="this.disabled = true;
this.value = 'Saving...';
this.form.submit();"><span class="glyphicon glyphicon-search"></span> Redeem Ticket</button>
</span>
</div>
</div>
</form>
</div>

After trial and error, I found the solution. Just needed to initially hide the 2nd input:
<input type="text" name="transaction_id" id="transaction_id" class="form-control"
placeholder="(999) 999-9999" style="display:none" autofocus />
Simple solution. I have also fixed the code snippet for anyone who wants to use it.

Why do i get 2 default characters in my password input field

I have a little problem.... see here : http://prntscr.com/5anqx8 : here you can see what's wrong, there are 2 default characters in those inputs... this happends on multiple pages and there is nothing in the code what could be the problem. I use Firefox but have Chrome as well. On Chrome is doesn't show these characters which is kinda weird. How do I get rid of these Characters?? I've tried clearing all history cache and stuff, the whole list. I restarted Firefox.... nothing works. I'm not sure if this is really a programming question but you guys are really smart so... I'm asking you :p
Thanks a lot,
Mike
CODE :
<!-- Right Content -->
<div class="col-md-6">
<div class="panel-box">
<div class="titles">
<h4>Registratie Formulier</h4>
</div>
<!-- Form Contact -->
<form class="form-theme">
<div class="row">
<div class="form-group">
<div class="col-md-6">
<label>Uw gebruikersnaam</label>
<input type="text" required="required" value="" maxlength="100" class="form-control" name="Name" id="name">
</div>
<div class="col-md-6">
<label>Uw email</label>
<input type="email" required="required" value="" maxlength="100" class="form-control" name="Email" id="email">
</div>
<div class="col-md-6">
<label>Uw wachtwoord</label>
<input type="password" required="required" value="" maxlength="100" class="form-control" name="Password" id="password">
</div>
<div class="col-md-6">
<label>Herhaal uw wachtwoord</label>
<input type="password" required="required" maxlength="100" class="form-control" name="Password2" id="password2">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<input type="submit" value="Registreer" class="btn btn-lg btn-primary">
</div>
</div>
</form>
<!-- End Form Contact -->
<div class="result"></div>
</div>
</div>
<!-- End Right Content -->

Some browsers can save form data like passwords, names and adresses.
When getting errors like this, remember to test in a private window/session to rule this out.