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>
Related
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();
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 have this little piece of code:
<script>
$(window).bind('beforeunload', function() {
$.ajax({
async: false,
type: 'POST',
url: '/something'
});
});
</script>
I wonder, how could I disable this request when user hits the submit button.
Basically something like here, on SO. When your asking a question and decide to close the page, you get a warning window, but that doesn't happen when you're submitting the form.
Call unbind using the beforeunload event handler:
$('form#someForm').submit(function() {
$(window).unbind('beforeunload');
});
To prevent the form from being submitted, add the following line:
return false;
Use
$('form').submit(function () {
window.onbeforeunload = null;
});
Make sure you have this before you main submit function! (if any)
This is what we use:
On the document ready we call the beforeunload function.
$(document).ready(function(){
$(window).bind("beforeunload", function(){ return(false); });
});
Before any submit or location.reload we unbind the variable.
$(window).unbind('beforeunload');
formXXX.submit();
$(window).unbind("beforeunload");
location.reload(true);
Looking for Detect onbeforeunload for ASP.NET web application well I was,
I've to show warning message if some input control changes on the page using ASP.NET with Master Page and Content Pages. I'm using 3 content placeholders on the master page and the last one is after the form
<form runat="server" id="myForm">
so after the form closing tag and before the body closing tag used this script
<script>
var warnMessage = "Save your unsaved changes before leaving this page!";
$("input").change(function () {
window.onbeforeunload = function () {
return 'You have unsaved changes on this page!';
}
});
$("select").change(function () {
window.onbeforeunload = function () {
return 'You have unsaved changes on this page!';
}
});
$(function () {
$('button[type=submit]').click(function (e) {
window.onbeforeunload = null;
});
});
</script>
beforeunload doesn't work reliably this way, as far as binding goes. You should assign it natively
so I got it working like this bind and unbind didn't work out for me also With jQuery 1.7 onward the event API has been updated, .bind()/.unbind() are still available for backwards compatibility, but the preferred method is using the on()/off() functions.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.dirtyforms/2.0.0-beta00006/jquery.dirtyforms.min.js"></script>
<script type="text/javascript">
$(function() {
$('#form_verify').dirtyForms();
})
</script>
<title></title>
<body>
<form id="form_verify" action="a.php" method="POST">
Firt Name <input type="text">
Last Name <input type="file">
<input type="submit">
</form>
if you're using bind then use this:
$('form').submit(function () {
$(window).unbind('beforeunload');
});
This will be good for all form submit.
Super old question but might be useful to others.
Simply detaching the "beforeunload" from the "submit" event would not work for me - because the submit handler was being called even when there were errors in the form that the user had to fix. So if a user attempted to submit the form, then received the errors, then clicked to another page, they would be able to leave without the warning.
Here's my workaround that seems to work pretty well.
(function($) {
var attached = false,
allowed = false;
// catch any input field change events bubbling up from the form
$("form").on("change", function () {
// attach the listener once
if (!attached) {
$("body").on("click", function (e) {
// check that the click came from inside the form
// if it did - set flag to allow leaving the page
// otherwise - hit them with the warning
allowed = $(e.target).parents("form").length != 0;
});
window.addEventListener('beforeunload', function (event) {
// only allow if submit was called
if (!allowed) {
event.preventDefault();
event.returnValue = 'You have unsaved changes.';
}
});
}
attached = true;
});
}(jQuery));
This way, if the click to leave the page originated from inside the form (like the submit button) - it will not display the warning. If the click to leave the page originated from outside of the form, then it will warn the user.
I have an ajax plugin with a load of ajax files from a tag. When user clicks on it I don't see it to redirecting to the other page. Although we stop redirecting page using events like:
$(button).click(function (e) {
e.preventDefault();
})
I want a function that stop page from redirecting without events.
function functionName() {
functiontostopredirect(); // I need a function like this.
}
You can return false from that function:
function functionName() {
return functiontostopredirect(); // i need a function like this.
}
functiontostopredirect(){ return false;}
add return false , onclick of button:
<button type="submit" onclick="return false;">Submit</button>
There are a few similar questions to this but none quite the same.
I want to know if there is an event that can be used to execute some JS before a page is submitting (i.e. POSTed).
Something like this?
<form onsubmit="do_something()">
function do_something(){
// Do your stuff here
}
If you put return like the code below, you can prevent the form submission by returning false from the do_something() function.
<form onsubmit="return do_something()">
function do_something(){
// Do your stuff here
return true; // submit the form
return false; // don't submit the form
}
If you are working with the form, you can use onsubmit event.
Using jQuery you can do that with
$('#myform').submit(function() {
// your code here
});
You can bind an event handler to the submit event (following code assumes you have an id on your form):
document.getElementById("someForm").onsubmit = function() {
//Do stuff
};
Yes, you can use on the onsubmit event on your form.
In pure HTML (without jQuery), you can use:
<form onSubmit="mySubmitFunction()">
...
</form>
More details here: https://www.w3schools.com/jsref/event_onsubmit.asp
The following code will abort the submission from the window level, which will not submit the form.
window.onsubmit = function() { alert('aborting submit'); return false; };
Tested with IE11, so it should work for some legacy applications without jQuery.