I have the following script on my page to help users stop closing the window accidentally and to notify them if they're navigating away from the page.
<script>$(window).on( 'beforeunload.edit-post', function() {return true;});</script>
However, when a user submits a form on my page, I don't want this pop up to trigger. I tried adding .preventDefault(); to it but it didn't work. How do I make it so the beforeunload pop up doesn't appear when the user submits the form with the button?
<script>
function submit() {
$(window).on('beforeunload.edit-post').preventDefault();
$("#form").submit();
}
</script>
<form id="form"><input name="example" value="example"></form>
<button onclick="submit()">Submit</button>
The submit() function should remove the beforeunload listener.
function submit() {
$(window).off('beforeunload.edit-post');
}
It doesn't need to call $("#form").submit(), that happens by default unless it calls event.preventDefault();
Related
Any idea why the once modifier doesn't work on form submitting in Svelte?
In the following example:
<form action="./" on:submit|preventDefault|once={() => alert('You submitted the form')}>
<button type="submit">Save</button>
</form>
when I submit the form first time - I see the alert, but after that, when I submit - the page refreshes - as a normal form submitting.
(I tried with the button on:click - on:click|preventDefault|once... - but got same result.)
Looks like the 'once' is working, but after running and being removed the default submit behaviour of the form seems to be active again.
Couldn't find any information if disabling this listener is possible any other way than by adding a submit listener with preventDefault.
But this way, when adding a second listener only preventing the default, you can see that 'once' is only executed once -> REPL
<script>
function submitOnce() {
console.log('this logs once')
// put logic here you want to execute once
}
function handleSubmit() {
// console.log('this logs with every submit')
// this prevents default submit behaviour
}
</script>
<form on:submit|preventDefault={handleSubmit} on:submit|once={submitOnce}>
<button>Submit</button>
</form>
can simply be replaced by on:submit|preventDefault={() => {}}
I have two ways of using form on a page.
First one is standard way when user types something in input field and clicks the submit button.
Second one is that the form is automatically filled and submitted depending on if a query string is passed to a page. (www.website.com/contact?fillform=true)
Everything works fine except I need yet to trigger the submit button for when query string is passed but currently it just refreshes the page.
I have done part in PHP, I have checked variables and they are ok.
Here is Codepen, e.preventDefault() is commented out since it doesn't work on window load
$(window).load(function() {
// Function for submitting form
function submitForm(e) {
console.log('I am in');
e.preventDefault();
jQuery.ajax({
... // Submit form
})
}
// Normal way of submitting form, works ok
$contactForm.on('submit', function(e) {
submitForm(e);
});
// This should trigger form automatically
if(fillFormAutomatically) {
// Everything so far works ok
// I just need to trigger form without page refresh but none of these works
$submitBtn.trigger('click');
$submitBtn.triggerHandler('click');
$contactForm.submit(e);
$contactForm.submit(function(e) {
console.log(e); // nothing in console shows here
submitForm(e);
});
submitForm(); // This triggers function but I can't pass event?
}
});
I think there is a couple of problems.
.load() was depreciated in jQuery 1.8, so don't use that. See: https://api.jquery.com/load-event/
Secondly, when you call submitForm() on window.ready(), there is no event. So you're trying to call .preventDefault() on undefined. Just move it to the .submit() function.
Does that answer your question?
$(window).ready(function() {
var $form = $("#form");
var $submitBtn = $("#submitBtn");
// Send form on window load
submitForm();
// Normal way
$form.submit(function(e) {
e.preventDefault();
submitForm(e);
});
// Send form
function submitForm() {
$('#vardump').append('Sending form...');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" id="form">
<input type="text" value="Somedata">
<button id="submitBtn">Submit</button>
</form>
<div id="vardump"></div>
I'm having an issue with my onsubmit code. I'm using a calculator from a third party company and I am trying to trigger some javascript when the form is submitted. The alert will fire off but if I have the return set to false the form still submits.
Here is the line of code I am working with in my own environment:
document.getElementsByTagName("Form")[3].onsubmit = function () { alert('Test'); return false; };
I have built a replica here:
(For what ever reason it wont load in the snippet, I copied the same code to my server and it works fine, so here is it in action. Page)
function myFunction() {
document.getElementsByTagName("Form")[0].onsubmit = function () { alert('Test'); return false; };
}
<button onclick="myFunction()">Wait for script to load then press this button to add the onsubmit, then you can press calculate</button>
<script src="https://calculators.symmetry.com/widget/js/salary.js?key=RHA0Slc2ZjEydjNkR0Y2eTEvOUxpZz09"></script>
I haven't figured out how to do an onload detection for a script yet so that's why you have to wait for the script to load then press the button to insert the javascript.
Thanks for any help.
Well.. in your solution you are adding a new event handler to the form on every button click
Instead of declaring the event handler on page load and then trigger it
It should be....
<script>
function onMyPageLoaded()
{
document.getElementsByTagName("Form")[0].onsubmit = function (e)
{
e.preventDefault();
// place your code here
return false; // cancel form submit
};
}
function doSomething() // use this ONLY if you intend to by-pass the native submit mechanism
{
document.getElementsByTagName("Form")[0].submit(); // trigger the event here
}
</script>
<body onload="onMyPageLoaded()">
<form>
<button type="submit">send</button>
</form>
</body>
I have the following javascript to show a confirm box when a user leaves the page.
My problem is, it is showing even when user clicks the submit button inside a form in my page. I don't want this to be triggered on form submit and on a span click.
How can I allow form submit and span click in the function below?
window.onbeforeunload = function (e) {
e = e || window.event;
return '';
};
EDIT-------------------------------
sorry, it is now a form, it is simple button and a href:
I have one page that uses only a button:
<input type="button" value="Save" id="btn-crop" />
and a link:
<a href="done.php" class=button2>Save</a>
You could call [Event].stopPropagation in an callback of submit event for each button in the page.
This function would stop the callback function of the beforeunload event when would go submit the button.
You can read more about the [Event].stopPropagation
here.
Like so: Button.addEventListener("submit",function(Event){Event.stopPropagation()})
You should be able to check what object dispatched the event using e.currentTarget property and then show the prompt if necessary.
I have a page with a form that is submittes via ajaxSubmit() (so, without changing the page).
My goal is that, when the user try to change page (or even to close the browser), i ask him if really want to exit the page without sending the form (exactly as gmail does).
Gmail for example do this with a window.confirm-like popup, but if it is possible, i'll like to handle it with custom messages and options.
jQuery have the unload event:
$(window).unload( function () { alert("Bye now!"); } );
but it permits me just to do something before exit the page; i need to 'block' the page exit, if the user click the relative button.
So, how to handle (and cancel) the page-exit event?
try the following. Demo here
<script type="text/javascript">
function unloadPage(){
return "dont leave me this way";
}
window.onbeforeunload = unloadPage;
</script>
It's possible bind the "onbeforeunload" event with jQuery:
$(window).bind('beforeunload', function(e) {
return "ATTENZIONE!!";
});
It works!!