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.

Ajax works in IE and Edge but not Firefox when form is submitted using bootstrap 4 template

I'm trying to validate form Input field and run Ajax code in a login page using a bootstrap 4 template (called Deskapp) before the form is submitted. There are only two input fields userid and password.
Most of the code has been provided by the template, i have just adjusted the code to my need. The code works fine in IE and Edge, but the Ajax code does not work in Firefox.
// html code
<div class="login-wrap customscroll d-flex align-items-center flex-wrap justify-content-center pd-20">
<div class="login-box bg-white box-shadow pd-30 border-radius-5">
<img src="vendors/images/login-img.png" alt="login" class="login-img">
<h2 class="text-center mb-30">Login</h2>
<form class="needs-validation" novalidate>
<div class="input-group custom input-group-lg">
<input class="form-control" name="userid" type="number" placeholder="userid" required="required">
<div class="input-group-append custom input-tip-div" class="input-tip-div">
<span class="input-group-text"><i class="fa fa-user" aria-hidden="true"></i></span>
</div>
<div class="invalid-feedback"> <?php echo REQUIRED.NUMBERS;?>
</div>
</div>
<div class="input-group custom input-group-lg">
<input type="password" class="form-control" placeholder="**********">
<div class="input-group-append custom">
<span class="input-group-text"><i class="fa fa-lock" aria-hidden="true"></i></span>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="input-group">
<input id="send" class="btn btn-outline-primary btn-lg btn-block" type="submit" value="Sign In">
</div>
</div>
</div>
</form>
</div>
</div>
// script code
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() == false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
$.ajax({
type:"POST",
url:"user/logindo.php",
data: $("#send").closest("form").serialize(),
success:function (data) {
alert ("This is the Data from Json: "+data);
}
});
}, false);
});
}, false);
})();
I expect the form input field validate first, then execute the Ajax code and finally the form should be submitted.
The actual result in Firefox, the two input field validates correctly, then Firefox ignores the Ajax code and submits the form, but IE and Edge browsers runs smoothly by executing all the code as expected. Thank You in Advance

Redirect to controller codeigniter after checking validation

I validated my form Using AJAX
Here is my form
<p class="login-box-msg">
<?php
echo "<span id='error'>Sign in to start your session</span>";
?>
</p>
<div class="form-group has-feedback">
<input type="text" class="form-control" placeholder="Employee ID" name="empid">
<span class="glyphicon glyphicon-envelope form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input type="password" class="form-control" placeholder="Password" name="pw">
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="row">
<div class="col-xs-4 col-xs-offset-8">
<button type="button" class="btn btn-primary btn-block btn-flat" id="submit">Sign In</button>
</div>
<!-- /.col -->
</div>
</div>
<!-- /.login-box-body -->
<form>
Then I validated this using my ajax code
$("#submit").click(function(){
var form = $("form").serialize();
$.ajax({
url:'verify',
data: form,
dataType:'json',
type:'post',
success: function(e)
{
console.log(e.length);
if(e.length < 1)
{
$("#error").text("Invalid Login Credentials!");
$("#error").css("color","red");
setTimeout(function(){
$("#error").text("Sign in to start your session!");
$("#error").css("color","black");
},3000);
}
else
{
"What shoud I do"
// I tried $("form").submit() but it just repeat
//$("#submit").click(function())
}
}
});
On else bracket, I want to redirect to Controller on codeigniter called setCredentials() wherein it would set the credentials needed and redirect me to another page when the validation is completed (without error).

In else part enter the below code with the url you want to redirect to:
window.location = "<?php echo 'your/url'; ?>";

Uncaught ReferenceError: submit_ajax is not defined at HTMLButtonElement.onclick

Killing myself here about this error. The function is definitely defined. Chrome keeps saying that it's not.
Stripped down HTML...
<form class="form-signup" id="create_student">
<div class="form-group">
<div class="row">
<div class="col-md-6" style="text-align: left">
<label for="username">Student Username*</label>
<br>
<div style="display: block">
<input class="form-control popover_onfocus" type="text" name="username" id="username" placeholder="Username" value="<?php if (!$form_valid && !empty($_POST)){ echo $username;} ?>" data-toggle="popover" data-placement="top" data-content="Your student can login with this or his/her email address if you provide one. Have this be betwen <?=$settings->min_un?> and <?=$settings->max_un?> characters please." required>
</div>
</div>
<div class="col-md-6" style="text-align: left">
<label for="contact_info">Student's Email (Optional)</label>
<br>
<div>
<input class="form-control popover_onfocus" type="text" name="email" id="email" placeholder="Student's Email" value="<?php if (!$form_valid && !empty($_POST)){ echo $email;} ?>" data-toggle="popover" data-placement="top" data-content="This is optional, but if your student has an email, he/she can login with this and also get important emails that are relevant to them for a course, tutoring, etc.">
</div>
</div>
</div>
<br>
</div>
<button onclick="submit_ajax()" class="btn btn-primary btn-block" id="next_button" style="font-size: 24px" disabled="disabled">Create Student Account</button>
Stripped down Javascript...
//For submitting form data via AJAX
$(document).ready(function(){
function submit_ajax(){
data = {'username':$('#username').val(),'password':$('#password').val(),'confirm':$('#confirm').val(),'fname':$('#fname').val(),'lname':$('#lname').val(),'email':$('#email').val()}
$.ajax({
type: 'POST',
url: '<?php echo AJAX_DIR; ?>/create_student_account.php',
data: data,
success: function() {
//AJAX success
$('#success_fail_icon').html('<span class="glyphicon glyphicon-ok-sign lom_big_success_icon"></span>');
$('#success_fail_message').html('Success! Student account created for ' + data['fname'] + '.');
},
error: function() {
//Ajax failure
$('#success_fail_icon').html('<span class="glyphicon glyphicon glyphicon-remove-sign lom_big_fail_icon"></span>');
$('#success_fail_message').html('Uh oh! Something went wrong. Please try again, or contact us for assistance.');
}
});
}
});
Clearly, the function IS defined. I have no idea why this isn't working. I'd appreciate any assistance.
Note: I know that the data variable has more form elements than are shown. I'm trying to display a stripped down version of my problem instead of the whole thing to make this post not so long.

You define submit_ajax inside another function. it won't be accessible outside it. Just remove $(document).ready(... since it's unnecessary in this case, then you should be good.

AJAX/PHP Mulitple form POST submit

I am attempting to submit the form data to another page to be processed and am currently need receiving any data. Below are the forms in question. Default form is the login for requesting username/password. One submit button.
<div id="form_wrapper" class="form_wrapper">
<form class="register">
<h3>Register</h3>
<div>
<label>Username:</label>
<input type="text" name="regname"/>
<span class="error">This is an error</span>
</div>
<div>
<label>Password:</label>
<input type="password" name="regpass" />
<span class="error">This is an error</span>
</div>
<div class="bottom">
<div class="remember"><input type="checkbox" /><span>Keep me logged in</span></div>
<input type="submit" value="Register"></input>
You have an account already? Log in here
<div class="clear"></div>
</div>
</form>
<form class="login active">
<h3>Login</h3>
<div>
<label>Username:</label>
<input type="text" name="username"/>
<span class="error">This is an error</span>
</div>
<div>
<label>Password: Forgot your password?</label>
<input type="password" name="password" />
<span class="error">This is an error</span>
</div>
<div class="bottom">
<div class="remember"><input type="checkbox" /><span>Keep me logged in</span></div>
<input type="submit" value="Login"></input>
You don't have an account yet? Register here
<div class="clear"></div>
</div>
</form>
<form class="forgot_password">
<h3>Forgot Password</h3>
<div>
<label>Username or Email:</label>
<input type="text" name="forgotuser" />
<span class="error">This is an error</span>
</div>
<div class="bottom">
<input type="submit" value="Send reminder"></input>
Suddenly remebered? Log in here
You don't have an account? Register here
<div class="clear"></div>
</div>
</form>
</div>
I would like to submit what ever the current form data is
$form_wrapper.find('input[type="submit"]')
.click(function(e){
e.preventDefault();
$.ajax({
url: 'locallogin.php',
type: 'POST',
data: $(this).serialize(),
success: function (results) {
alert(results);
}
});
});
locallogin.php
<?php
print_r($_POST);
?>
Right now the only response is an empty Array. Any ideas?

There are two issues - one as indicated in the comments - you need to use $_POST.
Another lies in,
data: $(this).serialize(),
$(this) is pointing to the button, so you are posting the serialized button. Try as follows :
data: $(".register").serialize(),

As mentioned previously, fix the $(this) and make it $("#form_wrapper") also fix the $POST to $_POST. Your JS should look like this.
$('#form_wrapper').find('input[type="submit"]')
.click(function(e){
e.preventDefault();
$.ajax({
url: 'locallogin.php',
type: 'POST',
data: $(this).closest('form').serialize()+'&buttonName='+$(this).val(),
success: function (results) {
alert(results);
}
});
});
AFTER THE QUESTION ABOUT THE BUTTON NAME.
Added code to the data line of the ajax call.

First, you're serializing $(this) in the click even of an input element. You might want to use data: $(this).closest('form').serialize(). Second, it's print_r($_POST) (you're missing the underscore).