Built a form with HTML, CSS, Javascript linked to a Google Sheet. Built in VSCode.
TWO QUESTIONS:
1/ A pop-up box is supposed to pop up on form submission saying "Application Submitted!" if filled out with required fields. The pop-up box is not showing up -- but the data is being processed into the linked Google Sheet. The application instead just reloads.
2/ If filled out incorrectly, a pop-up box is supposed to pop up saying "Error!". However, even if filled out incorrectly, the data is being processed into the linked Google Sheet without this pop-up (and then reloading the page like above). It's like the Javascript is overriding the HTML code such as requiring email to be in an email format, etc.?? The HTML worked prior to writing in the Javascript linking to the Google Sheet.
JAVASCRIPT:
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<script>
function SubForm (){
$.ajax({
url:'[NOTE: URL IS HERE]',
type:'post',
data:$("#survey-form").serializeArray(),
success: function(){
alert("Application Submitted!")
},
error: function(){
alert("Error!")
}
});
}
</script>
ALSO THE HTML FOR THE BUTTON:
<button onclick="SubForm()" class="btn submit" type="submit" value="Let's Bop!" />Let's Bop!</button>
I think there are two things to observe here.
First,
Let's see what is the form action? or the action="" part of your form? Since you are using a button type='submit' and assuming this is inside your form, the form will submit and perform the action part.
If this is the case then you need your form to stop doing default behavior on submit so that the page stays and give time to your ajax to finish up so that alert can appear.
Second,
Let the form handle onSubmit, and remove onClick from the button as it is a submit button let it submit the form, but handle the onsubmit event. Even in this case, we will have to stop the form to perform its default behavior.
Here is a codepen you can refer https://codepen.io/vbrmnd/pen/eYjbRgw
Related
I am trying to use an invisible re-captcha v2 on a form that is submitted through JS. Every example I see online shows a regular plain HTML submitted form with a specified action and method, but I am using preventDefault() on my form to submit it with ajax. It seems like such a simple thing but I've been searching for hours and can't find a single person online who has ever done this.
HMTL:
<form id="form-login">
<!-- ...form fields... -->
<div
class="g-recaptcha"
data-sitekey="<site_key>"
data-size="invisible"
></div>
<button class="uk-button uk-button-primary" type="submit">Submit</button>
</form>
JS:
$('#form-login').submit(function(event) {
event.preventDefault();
console.log(grecaptcha.getResponse()); // <-- always comes back empty
});
I can see that the captcha is initializing because I can see the icon in the bottom right.
I've seen grecaptcha.execute() but it doesn't seem to do anything for me.
There are no errors in the console.
Recently I had a problem like you, making captcha invisible created a lot of issues for me e.g. https://github.com/google/recaptcha/issues/269 which is still an opened issue on GitHub.
I solved it with dynamically genarated captcha on each time form is submitted. Here is a bit of code I used. (commented code is a call to backend to verify response with Google API).
https://gist.github.com/ANTOSzbk/75ed7003e914162550f61399122a3bd4
Then you just use my function like this:
$('#form-login').submit(async function(event) {
event.preventDefault();
const response = await captchaVerification();
if (response) { } // proper submit code execution
else { } // on invalid captcha response
});
this is my javascript code :
<script type="text/javascript">
$(document).ready(function(){
$('#saveBtn').click(function(){
var prenom_length = $('#form_prenom').val().length;
if (prenom_length<5) {
$('#prenom_error').html("please enter an other name");
}
});
});
</script>
the jquery code is working few seconds after form submission the displays the error text just before the page reloads but after reloading the page it disappears , i want it to keep the same text even after the page refresh how to do ?
If I understand you correctly, you want to show an error message after someone submits the form so that they know they should correct it. By default if you press a submit button in an HTML form the browser wil send the request to the server and the server will give the user a new page.
You want to prevent that last bit from happening. The browser should execute your jQuery and if you find an error in the form you want to prevent that default submit to the server from happening. As it happens (pun intended) jQuery can do exactly that, check out the documentation here.
By using the .hide() and .show() jquery methods i was able to hide and make visible a sign up form on my website.
After filling the sign up form and submit button is pressed the form submits and automatically hides back, because of this auto hiding the user is unable to see any error message when the submit button is clicked.
The error messages can be seen when the user clicks on the sign up button again.
I want someone to please tell me how to prevent this sign up form from auto hiding when the submit button is clicked so that the user can be able to see the errors without clicking on the sign up button the second time.
My validation is written in php. ** Thanks in advance.
If I understand you correctly, the problem you are having is because the form is submitting when the submit button is clicked.
A trick I like to do: I don't use input type submit but instead use a generic button and submit the form once validation has passed, this will stop the form from submitting when submit is clicked and allow you to show any errors:
<button id="submit_form" class="submit">Submit</submit>
Hope it helps.
Of course a code sample would better help me understand your problem.
Without code : From My understanding , You can do it in two ways.
First Ajax :
$('#submitButton').click(function (e){
e.preventDefault();
$.ajax({
type: "POST",
url: url, //action
data: form.serialize(),
success: function (html) {
// if html get error then show at above the form as yourt wish
}
});
});
If you submit form and get back at same page with error in $error varible. Then print your in contact form . and you can show your popup by script code and php
if(isset($error)){
?> <script>
$('#signupform').modal('show'); // if your form in bootstrap modal Otherwise
$('#signupform').show();
</script> <?php
}
Hope it will helpfull for you.
Basically mysimplewebform.php form submits when the toggle is clicked, as opposed to after the form is loaded, used by user and SUBMITTED via submit button at form. Obviously I need to have form operate functionally; user fills it out, and clicks submit. I simply used AJAX to bring in the form on the template page. Now everytime toggle button is clicked 'Form is submitted with empty values' and then appears in the toggle. Making it pretty useless at this point, I have been struggling with this forever. I think this is a matter of toggling the data: below --
$(document).ready(function() {
$('#toggle3').click(function(){
var tog = $('.toggle');
$.ajax({
type: 'POST',
url: '/mysimplewebform.php',
data: $(this).closest('form').serialize(), // This was a recent suggestion
success: function (fields){
tog.html(fields);
tog.slideToggle(1000);
}
});
});
});
Branched out from: How to send external form POST data through AJAX
Ok, so you want to display an html form when a user clicks a button? In that case you can use the simplified jquery load method:
$('#yourbutton').click(function(){
$('#somediv').load('/mysimplewebform.php');
});
I know this doesnt handle your toggle requirement, but i dont think that is where you are having issues.
Now onto the php. I dont know exactly what should be in mysimplewebform so heres an example
if(isset($_POST['fname'])){
//we have a post request, lets process it
echo 'hello'.$_POST['fname'];
}?>
<form action="absolute/path/to/mysimplewebform.php" method="post" id="mysimplewebform">
<input type="text" name="fname" placeholder="Enter Name">
<input type="submit" value="submit">
</form>
Notice the action is an absolute path to the file, because a relative path will be wrong if the form is loaded into another page via ajax.
Now when this form is submitted, the browser will be redirected to mysimplewebform.php.
I expect you want to stay on the same page, in which case you could submit the form via ajax:
$('#mysimplewebform').submit(function(ev){
ev.preventDefault();//stop normal redirecting submit
$.post( $(this).attr('action'), $(this).serialize(), function(data){
$('#somediv').html(data)
});
This replaces the whole form in the dom with the output, so the hello message would be displayed.
All of the above is an attempt to help you understand where you have been going wrong in your attempts. It is not the best solution to your overall problem - i would separate the html form and processing into seperate files for a start, but it should be familiar to you.
I am trying to submit a mailchimp form from within my DNN (DotNetNuke) site. Typically, you just remove the form tags and put some javascript in the onclick event of the submit button...like here. This works and you can see as such here.
But, I am using this popup module, as I want this form to pop up when someone comes to the site. And in this configuration it does not work. It will submit the form to the designated URL, but no form data is passed. This page is here.
A couple of observations:
When you view the page source, the popup form is within the form tags, yet a this.form returns null in the script.
When you inspect the submit button element in Chrome, you see that the html form is then OUTSIDE the form tags.
So maybe there is some javascript with this popup module that is moving the DOM element on page load???
I created a js function to call on the input button submit; code is as follows:
function submitSubscription(clickedElement){
$form = $('body').find('form');
$form.attr('action', 'http://InciteResults.us2.list-manage1.com/subscribe/post?u=6d82b6a028c94cc75005eb4fe&id=1c7ceabac4');
$form.submit();
}
Note: in this function clickedElement.form is returning null.
Because your content is not in a <form>, you're going to put it inside a <form> in order for your script to work. You can either dynamically create a <form> element, or move your content back inside the main <form> when you submit. Try something like this:
function submitSubscription(clickedElement){
var $form = $('<form></form>', { action: 'http://InciteResults.us2.list-manage1.com/subscribe/post?u=6d82b6a028c94cc75005eb4fe&id=1c7ceabac4' });
$('#mc_embed_signup').wrap($form);
$form.submit();
}