onChange event : load different page

Forum Moderators: open

Message Too Old, No Replies

onChange event : load different page

kristof_v

8:16 am on Apr 12, 2007 (gmt 0)

Hi all,

I would liek to include a different page after the user selects an option in a <select>

this tis the code I have:


<form name="actionForm" method="post" action="<?php $_SERVER['PHP_SELF'];?>">
          <select name="actionSelect" onChange="loadMenu();">
           <option value="create">create new user</option>
           <option value="delete">delete user</option>
           <option value="show">show details</option>
           <option value="passwd">change password</option>
           <option value="who">show activity</option>
          </select>
          <br />
          <br />
          <?php include("menus/create.php");?>
          </form>

So when the user selects the create option, the create page should be included with php include, when the user selects delete, the delete page should be included etc...

but I don't know how to accomplish this in JS.

grtz

kristof_v

8:32 am on Apr 12, 2007 (gmt 0)

problem solved, I was able to do it with document.getElementById().innerHTML = '...';

kristof_v

8:59 am on Apr 12, 2007 (gmt 0)

Apparently it isn't ok yet :(

This is the code I have:


<head>
<script language="javascript">
function loadMenu() {
  document.getElementById('menuDiv').innerHTML = "<?php include('menus/create.php');?>";
}
</script>
</head>

But this gives the follwoing when I look into the html source:


<head>
<script language="javascript">
function loadMenu() {
  document.getElementById('menuDiv').innerHTML = "Username:<br />
<input type="text" name="user" value="jos" />
<br />
<br />
Password:<br />
<input type="password" name="passwd" />
<br />
<br />
Retype password:<br />
<input type="password" name="passwd2" />
<br />
<br />
<input type="submit" value="ok" name="submit" />
";
}
</script>
</head>

So the include happens in the js function instead of the <div id="menuDiv"></div>

Probably because PHP is processed before JS is processed.
Any ideas on how to solve this?

Dabrowski

11:31 am on Apr 12, 2007 (gmt 0)

This is the problem:

document.getElementById('menuDiv').innerHTML = "Username:<br />
<input type="text" name="user" value="jos" />
<br />
<br />
Password:<br />
<input type="password" name="passwd" />
<br />
<br />
Retype password:<br />
<input type="password" name="passwd2" />
<br />
<br />
<input type="submit" value="ok" name="submit" />
";

All those linebreaks are breaking the string, see where the last "; has ended up? You're probably getting a syntax error or expected " or something like that.

Get your PHP function to output that HTML with no linebreaks. It should still look the same on page.

kristof_v

12:20 pm on Apr 12, 2007 (gmt 0)

that didn't do it Dabrowski

Dabrowski

12:31 pm on Apr 12, 2007 (gmt 0)

ok next problem is the " marks. Take the statement:

var myText = "<input name="thing" value="stuff">";

See what's wrong with that? The string will terminate as "<input name=" and the rest will throw an error. You need to either escape your "'s or use single quotes which I find neater. Take your pick of these 2 examples:

var myText = "<input name=\"thing\" value=\"stuff\">"; 
var myText = "<input name='thing' value='stuff'>";

See how that goes.

kristof_v

12:42 pm on Apr 12, 2007 (gmt 0)

you're right, i created a simple file (menus/test.php) now:


<table><tr><td>testje</td></tr></table>

now the js function:


<script language="javascript">
function loadMenu() {
  document.getElementById('menuDiv').innerHTML = "<?php include('menus/test.php');?>";
}
</script>

this is the output:


<script language="javascript">
function loadMenu() {
  document.getElementById('menuDiv').innerHTML = "<table><tr><td>testje</td></tr></table>
";
}

it seems like the <?php include();?> automatically puts a line break after it has executed, so the string breaks at the end and it doesn't work.

how can we workaround this?

kristof_v

12:48 pm on Apr 12, 2007 (gmt 0)

I could always drop the php include stuff and put the content as plain text in the js function, but maybe there's a more elegant solution?

Dabrowski

1:24 pm on Apr 12, 2007 (gmt 0)

There is a better solution I think - manipulate the style with your JS. I'm going to write a bit of code for you, based on the following assumptions:

a) The only thing you are using the PHP for is to set value='jos' on the username field
b) You want the same login to appear no matter what option they select on the SELECT.

First, put your html together without JS, but wrap your login bit in a DIV and hide it. I've left your PHP bit in there so you can make it insert only the pre-filled username field, although you could still insert the whole thing with PHP if you wanted to.

<form name="actionForm" method="post" action="<?php $_SERVER['PHP_SELF'];?>">
<select name="actionSelect" onChange="loadMenu();">
<option value="create">create new user</option>
<option value="delete">delete user</option>
<option value="show">show details</option>
<option value="passwd">change password</option>
<option value="who">show activity</option>
</select>
<br />
<br />
<div id='loginform'>
<?php INSERT PRE-FILLED USERNAME FIELD?>
<br />
<br />
Password:<br />
<input type="password" name="passwd" />
<br />
<br />
Retype password:<br />
<input type="password" name="passwd2" />
<br />
<br />
<input type="submit" value="ok" name="submit" />
</div>
</form>

To hide the login form add:

#loginform { display: none; }

into your stylesheet. Now make the loadMenu function not so much load it as unhide it:

function loadMenu() {
var div = document.getElementById( "loginform");
div.style.display = "block";
}

Try that and see how you get on.

kristof_v

2:02 pm on Apr 12, 2007 (gmt 0)

that works great, thx!