Member Avatar for vedmack

Hi
Im trying to submit a form , which holds another form tags inside (i must do it this way)
the problem is that this doesn't work on IE, while it works perfect on Firefox

the button seems to have no effect on the page... its like it is not connected to the form....

this is how the page looks like ( i minimized it to show here...)

I did tryed to change the button to input type=submit... but it doesn't work also....

<form name="submitPage" action="package.servletName">
<table border="0" id="tblClass">
            <tbody>
            <tr>
                <td><center>Class ID</center></td>
                <td><center>Life Cycle State</center></td>
                <td><center>VSSite</center></td>
                <td><center>Condition</center></td>
            </tr>
            <tr>
                <td><input type="text" name="reqClassId" value="-" /></td>
                <td><input type="text" name="reqLifeCycleState" value="-" /></td>
                <td><input type="text" name="reqVSSite" value="-" /></td>
                <td><input type="text" name="reqCondition" value="-" /></td>
            </tr>
            </tbody>
        </table>
<form name="ieBad">
<table border="0" id="tblRevision1">
            <tbody>
            <tr>
                <td><center>Event ID</center></td>
                <td><center>Event Format</center></td>
                <td><center>Event Data</center></td>
            </tr>
            <tr>
                <td><input type="text" name="reqEventID1" value="-" /></td>
                <td><input type="text" name="EventFormat1" value="-" /></td>
                <td><input type="text" name="reqEventData1" value="-" /></td>
            </tr>
            </tbody>
</table>
</form> 
<button name="Add" value="submit" type="submit" >Add</button>
</form>

Any Ideas?

Thanks ahead!

Daniel
  • 4 Contributors
  • 7 Replies
  • 286 Views
  • 1 Year Discussion Span
  • Latest Post Latest Post by newboi

Dani AI

Generated

— the root cause here is the invalid markup. As and pointed out, browsers try to "fix" nested forms in different ways; Firefox may appear forgiving, Internet Explorer often produces a DOM where the submit button is no longer associated with the inputs you expect. That mismatch is why document.getElementById('tblRevision1') or the submit action can behave differently in each browser.

Practical fix: stop nesting forms. Put one form around the area you need to submit, and add rows/inputs into the inner table with DOM methods instead of injecting another <form>. Using table DOM methods avoids IE/innerHTML quirks and keeps the DOM consistent across browsers:

<form id="mainForm" method="post" action="package.servletName">
  <table id="tblClass">…</table>
  <table id="tblRevision1"></table>
  <button type="button" id="addRow">Add</button>
  <button type="submit">Submit</button>
</form>

<script>
document.getElementById('addRow').addEventListener('click', function(){
  var t = document.getElementById('tblRevision1');
  var r = t.insertRow(-1);
  var c = r.insertCell(0);
  var input = document.createElement('input');
  input.name = 'reqEventID[]';
  input.value = '-';
  c.appendChild(input);
});
</script>

If you must keep logically separate controls, either place the second form outside the first (no nesting) or use HTML5’s form attribute on inputs to associate them with a form by id (note: older IE versions don’t support that). Debugging tips: inspect the live DOM (F12 tools), confirm element IDs exist after you append them, and prefer getElementById / querySelector over brittle numeric document.forms[2] indexing.

Checklist: remove nested <form> tags, build rows with insertRow/createElement, confirm IDs in the live DOM, and submit the single outer form (or use HTML5 form attribute if you can drop legacy IE support).

Recommended Answers

All 7 Replies

Member Avatar for Fungus1487

you cannot nest a form within a form as set by w3c.

Member Avatar for DangerDev

dont nest forms

(i must do it this way)

what actually you want to do ?

Member Avatar for vedmack

Thanks 4 the reply...

dont nest forms

what actually you want to do ?

I'm adding dynamically using js a table with two tr which holds several td's

i must enter this table under other table (which is present from the first time as default)

unlsess i surround the default table with a form tag i wont be able to add the new table underneath it by using "tabBodyRev=document.forms[2];"

the problem is that "tabBodyRev=document.getElementById("tblRevision1");" doesnt work in IE... it works fine in FF but when i try to do browse it with IE it doesnt work, and the "tabBodyRev=document.forms[2];" is the only thing that works....

Member Avatar for Fungus1487

There is a problem with your javascript code somewhere as "document.getElementById" is perfectly fine for obtaining a table element with an ID.

Member Avatar for DangerDev

ok
getElementById works fine in IE and FF. just check your js code.
see one example:

<html>
<head>
<script type='text/javascript'>
	function clickMe()
	{
		document.getElementById('txt_id').value="hi how are you";
	}
</script>
</head>
<body>
<input type='text' id='txt_id'/>
<input type='button' value='click me!' onclick='clickMe()'/>

</body>
</html>
Member Avatar for vedmack

Thx alot 4 the replys , the reason i think that its not js error is cause the code works perfect in FF and when i checked the page with IE, it did not work at all... i figured what was the problem...
IE and FF acts differently when generating/appending new tables with js...

Thanx again.. solved.... :)

Member Avatar for newboi

Somebody pls help me. I'm having the same problem... Vedmack how did you get it working?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.