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.
Related
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
I have a html form on my page. Im using a php file to send an email from the form, and after a successful email send its redirects back to the html form.
After that i want to fade in a bootstrap success-alert.
Is there any event that can handle this or anyway to solve this problem?
This is my JS now, but its dont run because if I hit the send button, its call the php file.:
<script type="text/javascript">
$(document).ready(function() {
$('#btnSubmit').click()(function(){
$('#myAlert').show('fade');
});
});
</script>
I'm assuming you need show alert after the form request is processed and page is redirected to original form page, In that case You need to pass some parameter as a flag in query string while redirecting from server side. On form page you need to check for that flag and show alert.
On server side while redirecting
header("Location:form_page.php?status=success");
On form page
$status = $_GET['status'];
Assign value of $status to js variable and show alert.
Use ajax to achieve that.
Catch the submit event with
$("#btnSubmit").submit(function(){//your ajax});
In the success do your $('#myAlert').show('fade');
You have a good example here : How to submit html form without redirection?
I have a simple form, that asks if you're sure you want to submit it.
$(document).ready(function(){
$("form#myform").on('submit', function(e)
{
if (!confirm('Are you sure?')){
e.preventDefault();
}
else {
console.log("submitting...");
}
});
});
Submit form, hit "ok" to the "are you sure" prompt, form submits just fine.
--refresh the page, clean slate--
Submit form, hit cancel to the "are you sure" prompt. Form does not submit, as expected. Submit form again, hit "ok" to the "are you sure" prompt, form still does not submit, "submitting..." gets logged to console. From this point on, the form will never submit until I refresh the page and hit "ok" to the prompt the first time.
If I swap
e.preventDefault();
with
return false;
nothing changes, exact same behavior.
I'm completely stumped. What am I doing wrong?
edit:
Here's a jsFiddle link https://jsfiddle.net/8ac3Lgzg/. The HTML and JavaScript in that fiddle are /exactly the same/ as the code I have in my project. The issue I describe above does NOT happen when run on jsFiddle, but does in my project.
Your code works perfectly, here is a jsFiddle demonstrating it. I literally copy and pasted, there must be some other javascript influencing the form somewhere on your page.
jsFiddle link below
http://jsfiddle.net/xbhvqvp7/1/
Also might be worth checking the in browser network logs to see if the form is actually being submitted
The issue occurs due to a piece of code another developer on my team wrote that I was unaware of, that attaches to every form and caches it's onSubmit handler result. Because my form would return false upon failing validation, that result would be cached for the next attempted submission even if it passed validation.
Without wanting to break his code, my solution was to add an attribute to my form, "no-cache", and I updated his method to check for that attribute. This has solved my problem.
Thanks to everybody who helped, I greatly appreciate it!
try this manner
function SendForm(){
if (!confirm('Are you sure?')){
return false;
}
else {
console.log("submitting...");
return true;
}
}
put the function sendForm in the submit button like this
<input type="submit" value="submit" onclick="return SendForm();" />
obviously not display anything on the console because when you submit the form, the browser reloads
I am currently viewing all the possibilities for preventing multiple submission with button tag. The problem I am facing is that if users click submit button really fast it will enable them to submit multiple posts. I would like to restrict the submission to just one submission. I tried to use onclick="this.disabled = true, but it makes the button not working at all. The current button tag looks like this:
return "<button class='button btn btn-primary' id='gform_submit_button' onclick='this.disabled = true' type='submit'><span>Submit!/span></button>";
Can anyone guide me as to how to achieve this?
Ultimately, you cannot prevent multiple submissions on the client-side. You would have to implement these security measures on the server-side, in whatever server-side language you are using (e.g., PHP).
On the client side, you could do something like this
var canSubmit = true;
$('.button').click(function(){
if(canSubmit)
{
// fire missiles
canSubmit = false;
}
else
{
// sorry missiles loading
}
});
Now since after clicking once canSubmit has been set to false, a second click would not run the code. After validating or processing your submitted data you can set canSubmit back to true.
When the button is onClicked call this function:
function submitFunc(formId){. document.getElementById(formId).submit();
}
Submitting a page is always going to be tricky. There are two challenges with submit
As you rightly mentioned that user can submit same page multiple times
After submitting page if user refresh the page then also page is going to be resubmitted
There is one trick to handle this challenge redirect the page with GET call. The GET call which you have used to load the data. Read more about it here.
So I would recommend to redirect page to GET once form is submitted.
In this process the new form will be loaded and if user try to submit the form validations will be fired that will handle 1st challenge.
And due to redirect as your last call is GET on refresh data will be loaded and there is no harm in it.
I have a javascript code that, whenever a checkbox is checked, will reload my current page and then is supposed to grey out some input fields.
However, it is only doing the reload when the page is reloaded the input fields are never greyed out.
$(document).ready(function(){
$("#storePickUp").on("click", function () {
if ($(this).is(":checked")) {
document.getElementById("shippingForm").submit();
document.getElementById("shippingAdress").disabled = true;
document.getElementById("shippingState").disabled = true;
document.getElementById("shippingCity").disabled = true;
document.getElementById("shippingZip").disabled = true;
document.getElementById("shippingZipCode").disabled = true;
document.getElementById("shippingButton").disabled = true;
}
});
});
So in your code on the 4th line where you call .submit()... unless you have some extra magic on the page that you are not showing, this line will proceed to post/get your form to whatever url you have configured in that form.
What this means is that the lines underneath that do not matter at all, since they will not be executed on the forms target page.
To get around this if you truly need the form post in the middle, you would need to post to a specific url and use that url as a trigger on page load to disable those elements. Not directly after the click, but rather on the newly loaded page that is the target of the form... make sense?
I think that's because it's only disabling them when you click on #storePickUp but if your page is reloaded it will reset.
Method submit is executed, page reloads, code after submit is never executed. Even if that code would be executed, page refresh nullifies any changes.
You should probably do submitting with ajax, not with submit method. If you are using jQuery, it will make it easy for you:
http://api.jquery.com/category/ajax/