Include problem

Question

Auch 0 Newbie Poster

15 Years Ago

Hi guys!
I'm still fresh on php and from time to time I hang on simple things. Well, this time I was trying to make an include with an onclick action but now I'm not even sure its possible the way I'm trying.

Here's the code (problem on line 18)

<body style="vertical-align:middle">

<div id="storage" style="display: none;"></div>

<form action="req.php" method="post"></form>
<table border="1" align="center" cellspacing="1">
  <tr>
    <td><table border="0" cellpadding="4" cellspacing="1" style="height:20px">
  <tr>
    <td><label>Name: </label></td>
    <td><input name="Name" type="text" width="200px"/></td>
  </tr>
  <tr>
    <td><label>Password: </label></td>
    <td><input name="Password" type="password" width="200px" /></td>
  </tr>
  <tr>
   <td height="10"><label style="color:#09F; font-size:9px;" onclick="document.getElementById('form').innerHTML ='<?php include('Login/register-form.php'); ?>'"><u>Not registered?</u></label></td>
</table>
</td>
  </tr>
  <tr>
    <td height="40" align="center"><input type="submit" value="Login" name="submitButton" style="width:100px"/></td>
  </tr>
 </table>
 <div>&nbsp;</div>
 <table style="height:20px" align="center">
  <tr>
  <td id="form" style="border:none" width="200px" >&nbsp;</td>
  </tr>
</table>

</body>

I dont really know what I'm missing, maybe it just doesnt work this way. I'd appreciate any hints

Thanks for reading

php

3 Contributors
7 Replies
89 Views
2 Days Discussion Span
Latest Post 15 Years Ago Latest Post by codejoust

codejoust 8 Junior Poster

15 Years Ago

I'd recommend just including the signup form in the tr#form then hide it on page load (

window.onload=document.getElementById('form').display='none';

)
(

onclick="document.getElementById('form').visibility='block';

)
Instead of keeping HTML in an attribute tag, then include the code instead of the nbsp.

diafol

15 Years Ago

The problem you have is that your include file has unexpected characters that can't be parsed into the innerHTML value. If you could get rid of all your carriage returns and tabs, it should work. In addition, you're using single quotes to encompass the innerHTML value, so any single quotes within your include file should be escaped with a backslash.
The resulting include file will look really messy - you could replace all carriage returns with '\n' and any tabs with '\t'.

However, changing the already 'filled-up' div would be better (as mentioned above).

Instead of using a direct property change, I'd use a class name change so that CSS deals with the hiding, showing and any other formatting, but that's just a matter of preference.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Auch 0 Newbie Poster · Answer 1 · 2009-09-02T14:50:18+00:00

Thanks for the reply.
I tried as suggested but I'm having a strange error : document.getElementById("form") is null

Strange because I have it written correctly as you can see on the code below

<script type="text/javascript">
window.onload=document.getElementById('form').display = 'none';
</script>

</head>

<body style="vertical-align:middle">

<form action="req.php" method="post"></form>
<table border="1" align="center" cellspacing="1">
  <tr>
    <td><table border="0" cellpadding="4" cellspacing="1" style="height:20px">
  <tr>
    <td><label>Name: </label></td>
    <td><input name="Name" type="text" width="200px"/></td>
  </tr>
  <tr>
    <td><label>Password: </label></td>
    <td><input name="Password" type="password" width="200px" /></td>
  </tr>
  <tr>
   <td height="10"><label style="color:#09F; font-size:9px;" onclick="document.getElementById('form').visibility='block';"><u>Not registered?</u></label></td>
</table>
</td>
  </tr>
  <tr>
    <td height="40" align="center"><input type="submit" value="Login" name="submitButton" style="width:100px"/></td>
  </tr>
 </table>
 <div>&nbsp;</div>
 <table style="height:20px" align="center">
  <tr>
  <td id="form" style="border:none" width="200px">
<?php
	if( isset($_SESSION['ERRMSG_ARR']) && is_array($_SESSION['ERRMSG_ARR']) && count($_SESSION['ERRMSG_ARR']) >0 ) {
		echo '<ul class="err">';
		foreach($_SESSION['ERRMSG_ARR'] as $msg) {
			echo '<li>',$msg,'</li>'; 
		}
		echo '</ul>';
		unset($_SESSION['ERRMSG_ARR']);
	}
?>
<form id="regForm" name="regForm" method="post" action="register-exec.php">
  <table width="300" border="0" align="center" cellpadding="2" cellspacing="0">
    <tr>
      <th>First Name </th>
      <td><input name="fname" type="text" class="textfield" id="fname" /></td>
    </tr>
    <tr>
      <th>Last Name </th>
      <td><input name="lname" type="text" class="textfield" id="lname" /></td>
    </tr>
    <tr>
      <th width="124">Login</th>
      <td width="168"><input name="login" type="text" class="textfield" id="login" /></td>
    </tr>
    <tr>
      <th>Password</th>
      <td><input name="password" type="password" class="textfield" id="password" /></td>
    </tr>
    <tr>
      <th>Confirm Password </th>
      <td><input name="cpassword" type="password" class="textfield" id="cpassword" /></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td><input type="submit" name="Submit" value="Register" /></td>
    </tr>
  </table>
</form>
  </td>
  </tr>
</table>

</body>

I will try the css when I get this working but I dont quite follow on the carriage and tab return :S Will google it
I do understand "strange" characters not being able to parsed into html and thus not working.

Have tried window.onload=document.getElementById('form').style.display = 'none'; and php echoing the form to no avail

diafol · Answer 2 · 2009-09-02T21:27:00+00:00

Ok Auch,

First of all you have at least 3 options:

1) Try to display the div form from the include file (as you originally tried)
2) Do as codejoust suggests by hiding/showing the div form directly (through properties).
3) Do as codejoust suggests, but use the className property of the div to hide/show the div form.

Do not try to follow ALL of these options. I apologize for any confusion.

OPTION 1
If your include file, which I assume contains the html for the form to be displayed, will be formatted with carriage returns and tab indents. These need to be deleted. Below is a simple form:

<form method="profile.php" action="post" id="nickform" name="nickform">
   <label for="nickname">Nickname:</label>
   <input type="text" id="nickname" name="nickname" />
   <input type="submit" id="send" name="send" value="Send Me" />
</form>

You need to change this to:

<form method="profile.php" action="post" id="nickform" name="nickform"><label for="nickname">Nickname:</label><input type="text" id="nickname" name="nickname" /><input type="submit" id="send" name="send" value="Send Me" /></form>

If you have any single quotes in this form they should be escaped with a backslash or changed to double quotes (if possible), otherwise the innerHTML won't change.

The other options depend on the fact that the form is already there and is simply hidden or shown depending if the link is pressed or not. I'm using option 3 (the className option):

e.g.

<div id="form" class="hidden">
   <form ....>
      ....(rest of form)....
   </form>
</div>

In the CSS file, have a class selector thus:

.hidden{
   display:none;
}

Your js attribute (onclick) will then be:

<a href="#" onclick="document.getElementById('form').className='';">show form</a>

codejoust 8 Junior Poster · Answer 3 · 2009-09-02T21:48:41+00:00

Your receiving that error becuase 1. You have 2 or more elements with the ID form 2. There is not element with the ID of form.
That error means document.getElementById('') does not return an element.

Auch 0 Newbie Poster · Answer 4 · 2009-09-03T12:57:19+00:00

ardav thank you for the small example, made it perfectly clear.
I did not had two similar id's, I must have been doing some typo somewhere but I could not find it.

I resorted to the css since its more elegant and its working fine.
Thank you both

codejoust 8 Junior Poster · Answer 5 · 2009-09-03T19:49:26+00:00

I typically always use classnames with jquery (addClass and removeClass), but if there is no reason to use jQuery, I typically use the ClassName of an element, but when you modify (and delete) whatever is there.
I find it less destructive in terms of compatiability.