submit a form with mooTools, and have the forms inline onsubmit event fire…help
Question
Im writing a class that replaces all input type="button" and input type="submit" in the document with a custom button, that is actually a span stuffed inside of an anchor tag, i've got everything written, and it all works, except the inline onsubmit event is not being fired when the form is submitted with a javascript.
Actually, even writing a static anchor tag
<a href="javascript:void(0)" onclick="document.FORMNAME.submit();">Submit</a>
will not fire the inline onsubmit event for the form, but <input type="submit" /> will fire the event...anyways there has to be a way to fire this onsubmit event with javascript.
Heres a snippet of what im working with:
click: function() {
//get parent form
var thisForm = this.getParent('form');
//fire onsubmit event
thisForm.fireEvent('submit'); //this doesnt work!
//submit form...the event isn't fired here either!
thisForm.submit();
}
anybody have any ideas? this class needs to need no configuration and there are some older sites using our cms system that we want to plug this into, and there are quite a few inline submit events on the forms we need to account for
Thanks
UPDATE,
I took the suggestion and came up with this:
if(this.getParent().onsubmit()) {
this.getParent().submit();
}
works perfectly for evaluating the forms onsubmit event and submitting the form based on its output, but what if the function doesn't exist at all? Any ideas?
2 answers
solution1
1 ACCPTED 2011-03-19 07:15:45
Firing submit on a form doesn't trigger it's inline onSubmit , this is default javascript behaviour (found this: http://www.codestore.net/store.nsf/unid/DOMM-4QS3RL/ )
You can try calling onsubmit yourself though, this works for me:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.1/mootools-yui-compressed.js"></script>
<script type="text/javascript" charset="utf-8">
window.addEvent('domready', function(e) {
$$('span.submit').each(function(el) {
el.addEvent('click', function(e) {
this.getParent().onsubmit();
});
});
});
</script>
</head>
<body>
<form method="post" onsubmit="alert('hi');" class="form">
<input type="text" value="test" />
<span class="submit">Submit the form</span>
</form>
</body>
</html>
solution2
0 2013-08-21 13:35:39
You might want to try this code instead as it will check to see if the onsubmit event has been attached as an event listener rather than being a hard encoded attribute. If the event was attached as a listener the [form element].onsubmit() part won't work.
function myOnSubmit(formId){
var f = document.getElementById(formId);
if(document.createEvent){
var e = document.createEvent('Event');
e.initEvent('submit',true,false);
f.dispatchEvent(e);
} elseif(document.createEventObject){
var e = document.createEventObject('Event');
e.button = 1;
f.fireEvent('onsubmit',e);
} elseif(typeof(f.onsubmit) == 'function'){
f.onsubmit();
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.