I have a page which calls an external library, this library adds a payment form:
<form name="multipay_form" onsubmit="private_payment_send(); return false;">
....
</form>
I can not change any code here. I need to call a function after form is submitted. What I have done is:
jQuery('form[name="multipay_form"]').on('submit', function() {
alert("myfunction");
});
Which works ok, but there is one exception, the method "private_payment_send()", does form validation, I need to know if their function returned true or false, to be able to trigger my function or not.
Is this possible?. I want to avoid doing the validation again on my end, since if they add new field or any new rule I would have to do the same on my code, which is not optimal. Any ideas?
Is there a way to unattach the function from the form through javascript?, in that way I can call private_payment_send() from my function
<form name="multipay_form" onsubmit="private_payment_send(); return false;">
<button type="submit">test</button>
</form>
document.getElementsByName("multipay_form")[0].setAttribute('onsubmit','');
This will make it so the onsubmit is removed from the form without touching the HTML
Try to use done() function in Jquery
.done(function( n ) {
$( "p" ).append( n + " we're done." );
});
Following is Jquery documentation
https://api.jquery.com/deferred.done/
You can trigger your function only when the called function, here "private_payment_send" has returned true. This can be done like this
<form name="multipay_form" onsubmit="if (private_payment_send()) { alert("myFunction") }; return false;">
...
</form>
If you only want to use the jQuery part, you can completely remove the onSubmit attribute and only assign the submit handler using jQuery
jQuery('form[name="multipay_form"]').on('submit', function() {
if (private_payment_send())
alert("myfunction");
return false;
});
Related
I have the following:
<input type="text" name="field1" onblur="numericField(this);" />
But I also need to excecute numericField() for the element before the form is submitted.
I tried document.getElementById("Campo1").onblur() but it returns undefined. How can I do this?
First of all, binding events the way you do it is not a good idea. Instead, use element.addEventListener instead.
Guessing from your question you want to do a validation right before you submit the form. In this case you should write:
document.querySelector("form").addEventListener("submit",function(){
// validate your fields - basically run numericField() on both your input fields
// if your numericField correctly returns true or false, the submit element will
// be canceled if validation fails
return numericField(your_element);
});
If you really wont to emit the blur event on a specific element, you can do the following:
var el = document.querySelector("<select your element here>");
el.focus();
el.blur();
Also with HTML5 you can now do a direct validation of the imput field on blur with defining the type correctly (e.g. if it's a Number set the type to number) and/or the pattern attribute (Docs). Now the browser intrinsic validation directly triggers on blur.
If you need to do something before submit I suggest writting a validation function. It is much more transparent.
Example: JQuery
<form id="form">
...
</form>
You can use the following jQuery code to do something before the form is submitted:
$(function() {
$('#form').submit(function() {
// DO STUFF
return true; // return false to cancel form action
});
});
I was using this first:
HTML:
<form onsubmit="return validate()">
...
<input type="submit" id="submit-button"/>
</form>
JS:
function validate() {
// many lines for a big validation with regex and so on...
$('form').submit();
}
I noticed, that this was loading very long, so I changed it to:
HTML:
<form>
...
<input type="submit" id="submit-button"/>
</form>
JS:
function validate() {
// many lines for a big validation with regex and so on...
$('form').submit();
}
$('#submit-button').on('click', function(e) {
e.preventDefault();
validate();
});
And the loading time was OK and about 100 times faster!
Can someone give me a - hopefully - short answer to this?
On the first example, you are firing a submit event inside the submit callback, then the call stack exceeds [see fiddle].
The second example relies on a click event, so things seem to work, but you should better fire your HTTP call via ajax after validation.
Your function is called validate(), but I don't see any validation, just a submit event. The thing is, the way you have it set-up is wrong. validate() should be returning true/false so the form knows if it should continue or not. So instead, your validate function should look more like this:
function validate() {
//many lines for a big validation with regex and so on...
if (val=='') { return false; }
else { return true; }
}
Now your form will only submit when the validate() function returns true, otherwise, it will not continue. This will fix your issue, so you are not looping out.
I have a form which is made like this:
<form id= 'lol' name = 'whyyyyy'>
<input name='dumbo'>
<input name='idiot'>
<input type='submit' value='I have no idea why its like this' onclick='document.lol.submit()'>
</form>
Now, I want to prevent the actual sending of the form, but so far all attempts failed.
My current code looks like this:
$(document).ready(function(){
$('form[name="whyyyyy"]').submit(function(e){
e.preventDefault();
alert(1);
return false;
});
})
but the inline submit command bypasses as it seems the jQuery function.
Can someone shred light into it?
EDIT:
The form CANNOT be changed, I don't have permission to change.
the on click code should trigger the submit function, it some complex validation wall of code in it. So I have to cache the submit action that it triggers, but I can't do that at moment.
the submit function should be triggered on send but it does not get triggered.
Here is an example of the code in jfiddle. As you can see it gets past by jQuery...
http://jsfiddle.net/StCPp/4/
if you don't need a submit button, why don't you use a regular button instead
<input type="button" />
<input type='button' value='i have no idea why he done it like this' onclick='document.getElementById('lol').submit()'>
Just use a normal button instead of a submit.
If you want to bypass a submit button you can make the class of the button cancel.
<input type='submit' class='cancel' value='i have no idea why he done it like this' onclick='document.lol.submit()'>
In your add-on JavaScript, remove the inline onclick event and replace it with whatever you desire. Problem solved.
You could also completely remove his button and replace it with one of your choice.
Remove the document.lol.submit function. This way, you can do whatever you want.
// Magic line
delete document.lol.submit;
// Or
$('form[name="whyyyyy"] input[type=submit]').attr('onclick', '');
$(document).ready(function(){
$('form[name="whyyyyy"]').submit(function(e){
e.preventDefault();
alert(1);
return false;
});
});
Ok so if I got this right you could remove the inline event handler onclick and add your custom handler (where you do the validation and all necessary steps):
$(document).ready(function() {
var $submit_button = $('input[type=submit]');
$submit_button.removeAttr('onclick');
$submit_button.click(function() {
//TODO: implement your custom handler
//execute validation etc.
});
});
Remove the onclick
$('input[type=submit]').attr('onclick','')
Then add the click event to function ready
$('input[type=submit]').on('click',function(){
//do your event
});
You aren't necessarily required to use jquery to implement this. You could use standard javascript.
$(document).ready(function(){
document.whyyyyy.submit = function(e){
alert(1);
return false;
};
});
This example works, but you might be hitting a jquery bug.
In my application I'm using a plugin that generates the following markup:
<form id="addCommentForm"
action="/foo/add"
method="post"
onsubmit="
jQuery.ajax({type:'POST', data:jQuery(this).serialize(),
url:'/foo/add',
success:function(data,textStatus) {
jQuery('#comments').html(data);
},
});
return false">
<!-- form elements here -->
</form>
When the form is submitted successfully I want to do something else after the success handler defined by the plugin, say alert('hello');.
The reason I'm struggling with this is because I can't just add my code to the end of the success handler above, because this code is not under my control.
I looked for a form event that executes after onsubmit that I could attach my code to, but didn't find anything.
If you can't really change it, you could use .ajaxSuccess() to handle all the external ajax calls and filter the one you need:
$('form').ajaxSuccess(function(evt, request, settings) {
if (settings.url == 'xxx')
alert('test');
});
Not pretty but it might work for you.
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.