Using innerHTML

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • reenav
    New Member
    • Jul 2008
    • 2
    #1

    Using innerHTML

    Hello
    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.

    Thanks
    reena

    Here is the code:

    form code :

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



    js functions :


    Code:
    <script language="JavaScript">
function changeFirstName()
	{
		var first= document.getElementById("first");
		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>";
	}
function saveFirstName()
	{
		var firstform=document.getElementById("fname");
		if(isEmpty(firstform.firstname.value))
			alert("Please provide your first name!");
		else
			firstform.submit();
	}

function isEmpty (val) {
	if ( val.replace(/^\s*|\s*$/g,"") == "" ) {
		return true;
	} else {
		return false;
	}
</script>
    Tags: None
    • MikeLin
      New Member
      • Jul 2008
      • 1
      #2
      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:

      [HTML]
      <html>
      <head>
      <script type="text/javascript">
      function showFirst(){
      var first = document.getEle mentById('first ');
      first.className = 'first-visible';
      }
      </script>
      <style type="text/css">
      #first {
      display: none;
      }
      #first.first-visible {
      display: block;
      }
      </style>
      </head>
      <body>
      <div>
      <input type="button" onclick="showFi rst();" value="Show First"/>
      </div>

      <div id="first">
      bla bla bla
      </div>

      text after first
      </body>
      </html>[/HTML]

        Comment

        • reenav
          New Member
          • Jul 2008
          • 2
          #3
          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.

            Comment

            • acoder
              Recognized Expert MVP
              • Nov 2006
              • 16032
              #4
              Set the className back to "first".

                Comment

                Previous template Next
                Working...