Removing row with removeChild precludes form submission if row contains input of type image

UNCONFIRMED
Unassigned

Status

()

UNCONFIRMED
12 years ago
9 years ago

People

(Reporter: mmauws, Unassigned)

Tracking

1.8 Branch
x86
All
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

(Reporter)

Description

12 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.8) Gecko/20061025 Firefox/1.5.0.8
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.8) Gecko/20061025 Firefox/1.5.0.8

When removeChild is used to delete a row from a form, and the row contains an input of type image (e.g., <input type="image">), elements with an onclick event that includes form.submit(), or called functions that try to submit the form, no longer work. The problem can be avoided by substituting <a href="javascript: form.submit()"><img src="..."></a>.

The following HTML can be used to reproduce the problem. Deleting a row using the DELETE button will have no effect, whereas deleting a row using the image will render the SUBMIT button at the top useless:

<form name="TestForm" action="" method="post" onsubmit="return false;">
<input type="button" name="button" value="SUBMIT" onclick="this.form.submit();" />
<br>
<table border="1" id="testTable">
  <tr>
    <td>HEADING1</td>
    <td>HEADING2</td>
    <td>HEADING3</td>
    <td></td>
  </tr>
  <tr>
    <td><input type="text" name="text" /></td>
    <td><select name="select"><option value="1">Test</option></select></td>
    <td><select name="select2"></select></td>
    <td><input type="image" src="/public/images/delete.gif" name="button" onclick="this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);"  /></td>
  </tr>
</table>
<br><br>
<table border="1" id="testTable2">
  <tr>
    <td>HEADING1</td>
    <td>HEADING2</td>
    <td>HEADING3</td>
    <td></td>
  </tr>
  <tr>
    <td><input type="text" name="text" /></td>
    <td><select name="select"><option value="1">Test</option></select></td>
    <td><select name="select2"></select></td>
    <td><input type="button" src="/public/images/delete.gif" value="DELETE" name="button" onclick="this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);"  /></td>
  </tr>
</table>
</form>
<script type="text/javascript" language="javascript"><!--
tBody = document.getElementById("testTable").getElementsByTagName('tbody')[0]
for(i=0;i<5;i++) {
  tr = tBody.getElementsByTagName('tr')[1]
  trCopy = tr.cloneNode(true);
  tBody.insertBefore(trCopy,tr);
}
tBody = document.getElementById("testTable2").getElementsByTagName('tbody')[0]
for(i=0;i<5;i++) {
  tr = tBody.getElementsByTagName('tr')[1]
  trCopy = tr.cloneNode(true);
  tBody.insertBefore(trCopy,tr);
}
--></script>

Reproducible: Always

Steps to Reproduce:
1. Delete a row containing <input type="image"> using removeChild.
2. Click on an input such as <input type="button" onclick="this.form.submit();">
3. Nothing will happen.

Actual Results:  
Nothing.

Expected Results:  
The form should have been submitted.

Note that the above generates no warnings or errors in the javascript console. Note as well that it works fine in Internet Explorer.
Does this work in firefox 2.0?
(Reporter)

Comment 2

12 years ago
(In reply to comment #1)
> Does this work in firefox 2.0?
> 

I initially encountered the problem while running 1.5. I then upgraded to 2.0, but the problem remains.
I've attached your code from comment 0, but I still don't know what to do to reproduce this? Could you be more explicit, or even make a more reduced testcase? You can attach it using the "Create a New Attachment" link. Thanks!
(Reporter)

Comment 5

12 years ago
(In reply to comment #4)
> I've attached your code from comment 0, but I still don't know what to do to
> reproduce this? Could you be more explicit, or even make a more reduced
> testcase? You can attach it using the "Create a New Attachment" link. Thanks!
> 

Steve:

I've created a demonstration page at http://www.mauws.com/delete-test

Let me know if there's anything else I can do to help out.

...michael
some observations (linux trunk):
* problem observed also with type=submit in place of type=image
* problem not observed when deleting rows manually
* problem not observed when onclick deletes different row from the one clicked on
* problem not ovserved when row deleting onclick on a span even with image or submit input on row
* problem not observed when submit button is type=submit
OS: Windows XP → All
Assignee: nobody → form-submission
Component: General → HTML: Form Submission
Product: Firefox → Core
QA Contact: general → ian
Version: unspecified → 1.8 Branch
Assignee: form-submission → nobody
QA Contact: ian → form-submission
You need to log in before you can comment on or make changes to this bug.