CODEWITHSUNDEEP
javascriptjqueryhtmlinnerhtml
Deepak Kumar Padhy
Deepak Kumar Padhy

Reputation: 4388

innerHTML not working properly in firefox?

I am setting the value of a form field using javascript. Now when I select the HTML content of that field using innerHTML the value gets disappeared. Here is the code.

function test() {
  document.getElementById("fname").value = "Deepak";
}

function test2() {
  alert(document.getElementById("testform").innerHTML);
}
<form id="testform">
  <input type="text" name="fname" id="fname">
</form>
<input type="button" value="Set Value" onclick="test()">
<input type="button" value="Show Inner HTML" onclick="test2()">

I can not use jquery in this , so have to do it using JS only. The output should be <input name="fname" id="fname" type="text" value="Deepak"> But currently it shows, <input name="fname" id="fname" type="text">

Any workaround to solve this issue? This works fine on IE.

Upvotes: 0

Views: 1313

Answers (1)

JLRishe
JLRishe

Reputation: 101778

The behavior you are observing in FireFox is the correct behavior. Changing the value of an input should not change its value attribute (if it even has one). Newer versions of IE will behave the same way as FireFox does, and older versions of IE have a bug on which your code was relying. You can see this in the DOM level 2 spec:

Changing [the value property] changes the contents of the form control, but does not change the value of the HTML value attribute of the element.

If I'm not mistaken, you should be able to pass a DOM node directly to Modalbox.show():

Modalbox.show(document.getElementById('RAForm'), {title: 'Create RA', width:700});

So please try that. I believe that should solve your issue.

Upvotes: 1

Related Questions