By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,567 Members | 1,185 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,567 IT Pros & Developers. It's quick & easy.

Using innerHTML

P: 2
I am relatively new to javascript.
I am trying to dynamically load a form when the user clicks the edit button for his/her name. The onclick event points to a JS function that changes the innerHTML of the foll div.
But I get a js Object expected error.
Please help me understand, why I get this error.
Any suggestions on a good debbuger for javascript, will also be very helpful.


Here is the code:

form code :

[HTML]<b>FIRST NAME:</b>Reena<img src="/fast/images/tdd/btn_md_edit.jpg" onclick="javascript:changeFirstName()"/> <br/></tr>
<tr><div id="first"></div></tr>[/HTML]

js functions :

Expand|Select|Wrap|Line Numbers
  1. <script language="JavaScript">
  2. function changeFirstName()
  3.     {
  4.         var first= document.getElementById("first");
  5.         first.innerHTML="<form name="fname" method="post" action="employee_account_page.dl"><input type=\"text\" name=\"firstname\"><img src=\"/fast/images/tdd/btn_md_save.jpg\" onclick=\"javascript:saveFirstName()\"/></form>";
  6.     }
  7. function saveFirstName()
  8.     {
  9.         var firstform=document.getElementById("fname");
  10.         if(isEmpty(firstform.firstname.value))
  11.             alert("Please provide your first name!");
  12.         else
  13.             firstform.submit();
  14.     }
  16. function isEmpty (val) {
  17.     if ( val.replace(/^\s*|\s*$/g,"") == "" ) {
  18.         return true;
  19.     } else {
  20.         return false;
  21.     }
  22. </script>
Jul 28 '08 #1
Share this Question
Share on Google+
3 Replies

P: 1
My first post here. Let's see if I format this right.

Rather than trying to display stuff with with innerHTML just have your form already rendered as html but hidden. eg something like this:

<script type="text/javascript">
function showFirst(){
var first = document.getElementById('first');
first.className = 'first-visible';
<style type="text/css">
#first {
display: none;
#first.first-visible {
display: block;
<input type="button" onclick="showFirst();" value="Show First"/>

<div id="first">
bla bla bla

text after first
Jul 28 '08 #2

P: 2
Thanks a lot Mike , it is working now :)
Is it possible to hide the display again once it has been set to visible.
I want to hide the block when the user hits a cancel button.
Jul 28 '08 #3

Expert Mod 15k+
P: 16,027
Set the className back to "first".
Jul 29 '08 #4

Post your reply

Sign in to post your reply or Sign up for a free account.