Handling forms with overwritten methods (submit/reset)

Handling forms with overwritten methods (submit/reset)


Brandon,
here is a sample of the trick used to overcome these "form"
annoyances, I will gladly open an enhancement ticket if deemed
interesting to have in jQuery. I will first let it here for comment
reviews.
Some point:
- I used DOM0 event "onmouseup" to avoid including cross-browser code
adaption, and because they fire first
- nothing useful in this snippet alone, it is a tentative fix for some
bug due to badly chosen element names in forms
- the interesting objective is just be able to restore the needed
methods before invoking them, to avoid errors
- the fix here is used through an event just to show how a general
form fix could look but it is not strictly necessary this is wired to
an event, it could be simply done programmatically in your own code
<html lang="en">
<head>
<title>Handling forms with overwritten methods</title>
<script type="text/javascript">
document.onmouseup = function(event) {
var e;
event || (event = window.event);
e = event.target || event.srcElement;
// only do this for clicks on submit/reset
if ('|reset|submit|'.indexOf(e.type) > 0) {
// this is how we detect offending names (on forms)
if (e.form && e.form[e.type].nodeName) {
// save current attribute
var oId = e.id, oName = e.name;
// remove offending attribute
oId && e.removeAttribute('id');
oName && e.removeAttribute('name');
// steal the method of a newly created form element
e.form[e.type] = document.createElement('form')[e.type];
// invoke method
e.form[e.type]();
// restore offending attribute
oId && e.setAttribute('id', oId);
oName && e.setAttribute('name', oName);
}
}
}
</script>
</head>
<body>
<h1>Handling forms with overwritten methods</h1>
<div id="container">
<form id="aform" onsubmit="alert('Submit'); return false;"
onreset="alert('Reset');">
<input value="default" />
<input type="submit" id="submit" name="submit" />
<input type="reset" id="reset" name="reset" />
<input type="text" id="elements" name="elements" value="12345" />
</form>
</div>
</body>
</html>
the solution seems easy but there may be quirks I am not considering.
So comment please.
Diego