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.
Related
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
I want to create login form, and then the result is going to another page, using js to catch the value and create the process.
I have success created it using onclick, but I want to change onclick to onsubmit as I don't want to click the button, just press 'Enter' keyboard, the process is working. I have tried change from onclick to onsubmit process, but I still not get the value on the js page.
Here's the login form
<form >
<div class="input-group form-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-user"></i></span>
</div>
<input type="text" class="form-control" placeholder="Phone Number" name="phone_number" id="phone_number">
</div>
<div class="input-group form-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-key"></i></span>
</div>
<input type="password" class="form-control" placeholder="Password" name="password" id="password">
</div>
<div class="form-group">
<input type="button" value="Login" class="btn float-justify login_btn" onClick="login()">
</div>
</form>
<script src="<?= base_url() ?>assets/js-process/login/login.js" type="text/javascript"></script>
Here's the js page
function login()
{
var phone_number = $('#phone_number').val();
var password = $('#password').val();
console.log(phone_number)
}
I have changed the onclick to onsubmit, but I can't get the value on the js page again.
here's my change
<form id="myform" onsubmit="login()">
......
<div class="form-group">
<input type="submit" value="Submit" class="btn float-justify login_btn">
</div>
Do you know where's the error on my code ?
Thank you
As I see it , everything is good , where should be looking now on 2 things
first its jquery you are using but i can not see its link
second check your base url , it is properly being generated or not
Below you can see its working on onclick
same way you can do with on submit but you have to pass event in function so that you can stop its default action . you can do that using event.preventDefault();
function login(e)
{
e.preventDefault();
var phone_number = $('#phone_number').val();
var password = $('#password').val();
alert(phone_number)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form onSubmit="login(event)">
<div class="input-group form-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-user"></i></span>
</div>
<input type="text" class="form-control" placeholder="Phone Number" name="phone_number" id="phone_number">
</div>
<div class="input-group form-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-key"></i></span>
</div>
<input type="password" class="form-control" placeholder="Password" name="password" id="password">
</div>
<div class="form-group">
<input type="submit" value="Login" class="btn float-justify login_btn" >
</div>
</form>
I am new to HTML, PHP and JavaScript, so expect mistakes.
I've got the form working and sending contents via email in my PHP file. That works. I'm using the Iframe to keep people on page and that seems to work as intended.
I'm trying to get a bootstrap alert to appear once the form is submitted. So it's collapsed by default and I simply want it to appear once the form is submitted or the button pressed. I cannot figure it out for the life of me. The form will submit as expected but the script does not seems to run with the alert.
The script is within the HTML doc:
<script>
function FormSubmit(){
alert("The form was submitted");
$('#AlertSuccess'.show('fade');
}
</script>
<div id="AlertSuccess" class="alert alert-success collapse">
<!--<a id="CloseAlert" href="#" class="close">×</a> -->
<strong>Awesome</strong> We will contact you shortly
</div>
<div class="contact_form_container">
<iframe name="keepitneat" style="display:none;">
</iframe>
<form id="contact_form" class="contact_form" action="/contact_send_btn.php" method="post" target="keepitneat" onsubmit="FormSubmit()">
<input id="contact_form_name" name="name" class="input_field contact_form_name" type="text" placeholder="Name" required="required" data-error="Name is required.">
<input id="contact_form_email" name="email"class="input_field contact_form_email" type="email" placeholder="E-mail" required="required" data-error="Valid email is required.">
<input id="contact_form_number1" name="number1"class="input_field contact_form_number1" type="text" placeholder="Mobile Number" required="required" data-error="Phone number is required">
<input id="contact_form_number2" name="number2"class="input_field contact_form_number2" type="text" placeholder="Landline Number">
<button id="contact_send_btn" type="submit" onclick="FormSubmit()" class="contact_send_btn trans_200" value="Submit">send</button>
</form>
</div>
Please make me feel silly and point out the typo or logic mistake as I've been stuck on this for a while.
You have to hide the #AlertSuccess in default and on form submit, call the show() to display the message.
And you have forgot to close the bracket in $('#AlertSuccess'.show('fade');.
It should be
$('#AlertSuccess').show('fade');
function FormSubmit(){
$('#AlertSuccess').show('fade');
}
.hidden{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="AlertSuccess" class="alert alert-success collapse hidden">
<!--<a id="CloseAlert" href="#" class="close">×</a> -->
<strong>Awesome</strong> We will contact you shortly
</div>
<div class="contact_form_container">
<iframe name="keepitneat" style="display:none;"></iframe>
<form id="contact_form" class="contact_form" action="/contact_send_btn.php" method="post" target="keepitneat" onsubmit="FormSubmit()">
<input id="contact_form_name" name="name" class="input_field contact_form_name" type="text" placeholder="Name" required="required" data-error="Name is required.">
<input id="contact_form_email" name="email"class="input_field contact_form_email" type="email" placeholder="E-mail" required="required" data-error="Valid email is required.">
<input id="contact_form_number1" name="number1"class="input_field contact_form_number1" type="text" placeholder="Mobile Number" required="required" data-error="Phone number is required">
<input id="contact_form_number2" name="number2"class="input_field contact_form_number2" type="text" placeholder="Landline Number">
<button id="contact_send_btn" type="submit" onclick="FormSubmit()" class="contact_send_btn trans_200" value="Submit">send</button>
</form>
</div>
The browser console (F12) should tell you about the syntax error in you javascript. You forgot the closing ) in $('#AlertSuccess'.show('fade');.
$('#AlertSuccess').show('fade');
here is my html code
<form method="post" action="email-check.php" class="col-lg-6 col-md-offset-3">
<div class="form-group">
<input class="form-control" type="email" name="email" placeholder="Email" required>
</div>
<div class="g-recaptcha" data-sitekey="#####" ></div>
<button class="btn btn-info" type="submit">submit</button>
</form>
what jquery code i must to add to my page to avoid submit form when user not check
checked box google recaptcha
I have a form in my webpage Index.html. When I submit my form it redirects to the action page.
I want the page to redirect to itself (index.html) after completing the action.
<div class="container">
<div class="row marginbot-80">
<div class="col-md-8 col-md-offset-2">
<form id="contact-form" method="post" action="mailfunc.php" class="wow bounceInUp" data-wow-offset="10" data-wow-delay="0.2s">
<div class="row marginbot-20">
<div class="col-md-6 xs-marginbot-20">
<input type="text" class="form-control input-lg" id="name" placeholder="Enter name" required="required" />
</div>
<div class="col-md-6">
<input type="email" class="form-control input-lg" id="email" placeholder="Enter email" required="required" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input type="text" class="form-control input-lg" id="subject" placeholder="Subject" required="required" />
</div>
<div class="form-group">
<textarea name="message" id="message" class="form-control" rows="4" cols="25" required="required" placeholder="Message"></textarea>
</div>
<button "style=width:40 height:40" class="btn btn-skin" type="submit" id="btnContactUs">Send Message</button>
</div>
</div>
</form>
</div>
</div>
</div>
You could redirect after the script in mailfunc.php to your index.html like this:
header("Location: index.html");
exit();
Currently your submit will open a POST request to mailfunc.php where your form data (most probably) will be processed.
You can quite easily forward from mailfunc.php to index.html using some Javascript code like:
window.location.href = 'index.html';
Try this.
$referer = $_SERVER['HTTP_REFERER'];
header("Location: $referer");
This helps you to redirect to the same page where you are submitting the form
Refer this link to know more about HTTP_REFERER