LITTLEBLACKDOG.COM

I am trying to change a field from hidden to a checkbox. And I am able to do this fine in FireFox but not in IE.

Form Code

Code: Select all







<input type='Hidden' id='Heat1' name='mlsoptionsheat[]' value='Ceiling'>Ceiling<br>

Javascript

Code: Select all







document.getElementById('Heat1').type = "checkbox";

But when I do this in IE I get an error

Code: Select all







Line: 321 Char: 3 Error: Could not get the type property. This Command is not supported. Code: 0

Does anyone have any suggestions for this? Or how I can change a field from hidden to checkbox, or radio button, or type?

Posted: Mon Nov 20, 2006 3:34 pm Post subject:

Nest the input tag inside a DIV and rewrite it with innerHTML?

Posted: Tue Nov 21, 2006 11:58 am Post subject:

Nope that takes me back to where I was in the beginning by using innerHTML to create the value.

I think what I am going to have to do is determine the type of browser and then pull up the correct JavaScript file as per which browser the user is using.

At least until I can come up with a permanent solution. I have until Friday to get this site up and running.

Posted: Tue Nov 21, 2006 7:45 pm Post subject:

I'll put on a pot of coffee.

Stray Dog Joined: 24 Jul 2008 Age: 29 Posts: 2

I saw this thread from 2006..... , and ran into the same issue with IE.

I created a javascript function to change elements dynamically.

It works great, and all that is required is associating a prior a tag id to the associated button id, with a following "_a".

Works in FireFox also, although I had some issues with the value readout/report.

update : typos.... too much coffee (you guys inspired my to get javanated)

The script is as follows -

Code: Select all




<body>








<!-- THESE ARE THE INPUT ELEMENTS -->


<form name="thesillyform" id="thesillyform" method="post">


<a id="mybuttonvalue_a" name="mybuttonvalue_a" >


<input name="mybuttonvalue" id="mybuttonvalue" type="button" value="My Tricky Button 1" onmouseover="btnvalue=this.value;btnid=this.id;chgbk();">


</a><br>


<a id="mybuttonvalue2_a" name="mybuttonvalue2_a" >


<input name="mybuttonvalue2" id="mybuttonvalue2" type="button" value="My Tricky Button 2" onmouseover="btnvalue=this.value;btnid=this.id;chgbk();">


</a><br>


<a id="mybuttonvalue3_a" name="mybuttonvalue3_a" >


<input name="mybuttonvalue3" id="mybuttonvalue3" type="button" value="My Tricky Button 3" onmouseover="btnvalue=this.value;btnid=this.id;chgbk();">


</a><br>


<a id="mybuttonvalue4_a" name="mybuttonvalue4_a" >


<input name="mybuttonvalue4" id="mybuttonvalue4" type="button" value="My Tricky Button 4" onmouseover="btnvalue=this.value;btnid=this.id;chgbk();">


</a><br>


<a id="5_a" name="5_a" >


<input name="5" id="5" type="button" value="My Tricky Button 5" onmouseover="btnvalue=this.value;btnid=this.id;chgbk();">


</a><br>


<a id="blahblah_a" name="blahblah_a" >


<input name="blahblah" id="blahblah" type="button" value="button button" onmouseover="btnvalue=this.value;btnid=this.id;chgbk();">


</a><br><br><br>


<!-- END INPUT ELEMENTS -->











<!-- THIS IS THE READOUT OF THE INPUT ELEMENTS VARIABLES -->


<table width="27%" border="0" cellpadding="4" cellspacing="0" bgcolor="#CCCCCC">


  <tr>


    <td width="54%"><div align="right"><strong>Input Type: </strong></div></td>


    <td width="46%"><input type="text" name="status" id="status"></td>


  </tr>


  <tr>


    <td><div align="right"><strong><span id="idelement" name="idelement">Button </span>Id: </strong></div></td>


    <td><input type="text" name="ids" id="ids"></td>


  </tr>


  <tr>


    <td><div align="right"><strong><span id="valueelement" name="valueelement">Button </span> Value: </strong></div></td>


    <td><input type="text" name="value" id="value"></td>


  </tr>


    <tr>


    <td><div align="right"><strong><span id="atagelement" name="atagelement">A tag </span> ID (should be!): </strong></div></td>


    <td><input type="text" name="atag" id="atag"></td>


  </tr>


</table>


<!-- END READOUT OF THE INPUT ELEMENTS VARIABLES -->





</form>





<script>


/* Notice:  





I use the appended "_a" for the javascript function to recognize the related a tag innerHTML tied to the button ID.  


Rename / add as many input elements as you need as long as this structure is intact. 


///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////


ALSO: The Input Elements can be changed to any kind of input by modifying the "variant" variable in the below javascript.


PLEASE leave these comments intact.





Enjoy! - Ben Althauser 


*/





btnid = "";


btnvalue = "";





function chgbk()


{


variant = "button";


document.getElementById(btnid + "_a").innerHTML = "<input onmouseover=\"btnvalue=this.value;btnid=this.id;change();\" type=\"" + variant + "\" name=\"" + btnid + "\" id=\"" + btnid + "\" value=\"" + btnvalue + "\">";


document.getElementById('status').value = variant;


document.getElementById('ids').value = btnid;


document.getElementById('value').value = btnvalue;


document.getElementById('atag').value = btnid + "_a";


}


function change()


{


variant = "text";


document.getElementById(btnid + "_a").innerHTML = "<input onmouseout=\"btnvalue=this.value;btnid=this.id;chgbk();\" type=\"" + variant + "\" name=\"" + btnid + "\" id=\"" + btnid + "\" value=\"" + btnvalue + "\">";


document.getElementById('status').value = variant;


document.getElementById('ids').value = btnid; 


document.getElementById('value').value = btnvalue;


document.getElementById('atag').value = btnid + "_a";


}


</script>


</body>

Posted: Sun Jul 27, 2008 7:00 am Post subject:

Welcome aboard, Falkon303. Always good to see new members jumping right in.

Stray Dog Joined: 24 Jul 2008 Age: 29 Posts: 2

T wrote:
Welcome aboard, Falkon303. Always good to see new members jumping right in.

You know, as an update to this subject, don't bother using the script I posted. Although innerHTML methods *can* work, they by no means are proper, nor reliable.

Targetting - document.getElementById('whatever').firstNode.value/src/href

is a very nice approach to dynamically changing the behavior of elements.

My hat goes off to the gents at dyndrive for their assistance in learning this.

- Ben