JavaScript onclick未显示在页面上

Question

I want to display a form after clicking on a link. ON the same page. Why is this code not working ?

<a href="javascript:;" onclick="forgot();" class="txtmenu">Click Here if you forgot your password</a>

<script type='text/javascript'>
function forgot()
{
  document.write("

<form action=\"<?php echo $_SERVER['PHP_SELF']?>\" method=\"post\" > 
<table width=\"300\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" align=\"center\">
  <tr>
    <td>Enter your email</td>
  </tr>
   <tr>
    <td><input type=\"text\" name=\"username\" maxlength=\"40\" class=\"form-field\" ><input class=\"submit-button\" type=\"submit\" name=\"forgot\" value=\"SEND MY PASS\" /></td>
  </tr>
</table>
</form>

 ");  
}
</script>

Answer 1

You must add an \\ symbol at all the end of lines in multiline string.

Like:

function forgot()
{
document.write("\
<form action=\"<?php echo $_SERVER['PHP_SELF']?>\" method=\"post\" >\
<table width=\"300\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" align=\"center\">\
  <tr>\
    <td>Enter your email</td>\
  </tr>\
   <tr>\
    <td><input type=\"text\" name=\"username\" maxlength=\"40\" class=\"form-field\" ><input class=\"submit-button\" type=\"submit\" name=\"forgot\" value=\"SEND MY PASS\" /></td>\
  </tr>\
</table>\
</form>\
 ");  
}

Answer 2

It doesnt work because you can't split a string over multiple lines like that. While I wouldnt recommend doing it your way with the document.write, you can fix it by doing this:

function forgot()
{
  document.write(

"<form action=\"<?php echo $_SERVER['PHP_SELF']?>\" method=\"post\" > " +
"<table width=\"300\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\"" +
      "align=\"center\">" +
  "<tr>"+
    "<td>Enter your email</td>"+
  "</tr>"+
   "<tr>"+
    "<td><input type=\"text\" name=\"username\" maxlength=\"40\""+ "class=\"form-field\" ><input class=\"submit-button\" type=\"submit\""+ "name=\"forgot\" value=\"SEND MY PASS\" /></td>"+
  "</tr></table></form>"

 );  
}

It's ugly but if you're going to be using document.write then it doesnt really matter as much ;)

Answer 3

You should not just document.write after document finished loading. It will not make you any good. You should have some id for the element and modify it later when some event happens.

For example you create a div where id="myDIV" and make it invisible and the onclick you just

var itisMyDiv = document.getElementById("myDIV");
itIsMyDiv.style.visibility = "visible";

or something like that.

Answer 4

You must add an \\ symbol at all the end of lines in multiline string or use string concatenation (see here ).

<a href="javascript:;" onclick="forgot()" class="txtmenu">Click Here if you forgot your password</a>
<script type='text/javascript'>
    function forgot()
    {
    document.write("\
    <form action=\"<?php echo $_SERVER['PHP_SELF']?>\" method=\"post\" >\
    <table width=\"300\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" align=\"center\">\
      <tr>\
        <td>Enter your email</td>\
      </tr>\
       <tr>\
        <td><input type=\"text\" name=\"username\" maxlength=\"40\" class=\"form-field\" ><input class=\"submit-button\" type=\"submit\" name=\"forgot\" value=\"SEND MY PASS\" /></td>\
      </tr>\
    </table>\
    </form>\
     ");  
    }
</script>

Using document.write() is bad idea, because it will overwrite the whole document. A quick and better way is to have some div , assign an id attribute to that div, then in forgot() function retrive that div using document.getElementById and replace contents by assigning your string to innerHTML property.