Question

I am a newby so appologise for asking a basic question.

I have a php page – a ‘create new project’ page

There are some simple data such as name, deadline etc…

but depending on the type of the project I have 4 different ends (different pages?) in this FORM and I can’t find the solution for it.

Here is my code:

<h1>New Project</h1>
<form name="newpr">
New project name:<input type="text" placeholder="new project name..."><br />
New project end date:<input type="text" placeholder="date..."><br />
New project type:
<select name="menu" onChange="location=document.newpr.menu.options[document.newpr.menu.selectedIndex].value;" >
<?php 
$listdata = mysql_query("SELECT * FROM lists WHERE tag='prtype' ORDER BY listing ASC");
while($listresult = mysql_fetch_array($listdata))
{
if ($listresult["listing"]!="...") $link=$listresult["value"].".php";
else $link="";

echo "<option value='".$link."'>".$listresult["listing"]."</option> ";
}
?>
</select>
</form>

As you see the select list comes from Mysql and I would like a div under a form to be able to open page1.php or page2.php etc as user selects…

Thanks in advance

Andras

it might be ajax question…

Answer 1

I’d solve this the following way

<!-- using jQuery -->

<h1>New Project</h1>

<form method="" action="post">
    New project name:<input type="text" placeholder="new project name..."><br/>
    New project end date:<input type="text" placeholder="date..."><br/>
    New project type:
    <select name="menu">
        <?php 
        $listdata = mysql_query("SELECT * FROM lists WHERE tag='prtype' ORDER BY listing ASC");
        while($listresult = mysql_fetch_array($listdata))
        {
            $link = '';
            if($listresult['listing'] != '...') {
                $links = $listresult['value'] . ".php";
                echo "<option value='$link'>${listresult['listing']}</option>";
            }
        }
        ?>
    </select>

    <div id="page">
        <!-- container for loaded page -->
    </div>

    <script type="text/javascript">
        $("select[name=menu]").change(function() {
            var url = $("option:selected", this).val();
            // Load a page to the container
            $("#page").load(url);
        });
    </script>
</form>

Using jQuery I added on change handler on select box and if it’s changed it loads via ajax a page to the div container.

And let me give you and advice – try to avoid mixing code and html. It leads to difficulties in further development and maintenance.