CODEWITHSUNDEEP
javascripthtmldominnerhtml
David Fulton
David Fulton

Reputation: 767

innerHTML not updating properly

I'm trying to build some basic HTML form validation in Javascript. My form is held in a table and I've got an extra column to the right of each input with an ID of "ErrorX", which is initially populated with some text to show it's a required field.

<FORM NAME="ContactForm" METHOD=POST ACTION='Order3.php' onsubmit="return validateForm()">
<TABLE>
 <TR>
  <TD ALIGN=LEFT>Your name:</TD>
  <TD ALIGN=RIGHT><INPUT TYPE=TEXT ID="Field1" NAME="Field1"></TD>
  <TD ALIGN=LEFT ID="Error1">Required</TD>
 </TR>
</TABLE>
<input type=submit value='Confirm ->'></FORM>

When the submit button is pressed, I've got the code validates the fields and attempts to change the right-most column text. The line of code that does this is:

document.getElementById("Error1").innerHTML = "ERROR";

The code executes and detects the error correctly, and the existing wording is removed, but the new text does not appear. If I query the value of document.getElementById("Error1").innerHTML, I get the correct text, but it's not appearing on the screen.

I'm using Safari v5.1.2 and it works with basic examples I've copied from the web, so I think it's my code rather than the browser.

Upvotes: 5

Views: 9073

Answers (3)

Appasaheb Kapase
Appasaheb Kapase

Reputation: 1

I had similar issue on iPAD safari, it is not updating div value properly. I have gone through lot of posts and tried out lot of options, but what works for me is text().

Upvotes: 0

codeandcloud
codeandcloud

Reputation: 55308

innerHTML works for sure in safari. See this demo http://jsfiddle.net/zxMKM/

The obvious reason is that your html markup is invalid and the browser does its own error recovery and producing its own DOM in the process.
So please validate your html http://validator.w3.org/

Also please note that td.innerHTML is read only for IE8.
So, its more cross platform friendly to use td.innerText

Upvotes: 3

craig1231
craig1231

Reputation: 3877

<td align="left"><div id="Error1">Required</div></td>

Upvotes: -2

Related Questions