javascript removeChild(this) from input[type="submit"] onclick breaks future use of form.submit() under firefox

Question

I have come across some strange behaviour, and I'm assuming a bug in firefox, when removing a input submit element from the DOM from within the click event.

The following code reproduces the issue:

<form name="test_form">
<input type="submit" value="remove me" onclick="this.parentNode.removeChild(this);" />
<input type="submit" value="submit normally" />
<input type="button" value="submit via js" onclick="document.test_form.submit();" />
</form>

To reproduce:

• Click "remove me"
• Click "submit via js". Note that the form does not get submitted, this is the problem.
• Click "submit normally". Note that the form still gets submitted normally.

It appears that, under Firefox, if you remove a submit button from within the click event it puts the form in an invalid state so that any future calls to form.submit() are simply ignored. But it is a javascript-specific issue as normal submit buttons within this form still function fine.

To be honest, this is such a simple example of this issue that I was expecting the internet to be awash with other people exeriencing it, but so far searching has yealded nothing useful.

Has anyone else experienced this and if so, did you get to the bottom of it?

Many thanks

Answer 1

Seems to be related to the fact that you're removing the node while processing the event.
This indeed looks like a bug from Firefox.

In the meanwhile, this hack seems to work but delaying the removal:

<script type="text/javascript">
function delsubmit(el) {
    window.setTimeout(function() {
        el.parentNode.removeChild(el);
    }, 50);

    return false;
}
</script>

<input type="submit" value="remove me" onclick="return delsubmit(this)" />

Answer 2

Thanks, thanks ... thanks a lot!

A half day I searched ... the code worked fine in IE, but not with FireFox.

I had a sub-form like

http://beispiel.server-daten.de/personen-und-mailadressen.html (its a part of my main project)

click there 'Neu', then add some mailaddresses. This works fine the last years. The old button is removed.

Two tables - the main table with Lastname, Firstname etc, the detail table with the main id and the mailaddresses.

Now a customer with two select-elements: A user selects something in the first select-element, then the onchange (with form.submit()) is fired and the server refreshes the second select-element. Works fine when using this in one table. But: The customer needs this in such a sub-form with detail rows.

onchange was executed, but no form.submit(). Now using the snippet resolves the problem!