I am creating a website using PHP and JQuery and have come into problems rearding forms.

For example, my index.php looks like the following:

```
<body>
    <?php
        echo "<div id=\"web_Page\">";
        require("public/templates/header.php");
        require("public/templates/menu.php");
        require("public/templates/home.php");
        require("public/templates/footer.php");
        echo "</div>";
    ?>
</body>

```

It then loads a header, footer, menu area and a starting page. The files that are loaded are also encased in div areas so the final index.php is rendered like so:

```
<div id="web_Page">
    <div id="web_Header">
        //contents of header.php loaded into this div//
    </div>
    <div id="web_Menu">
        //contents of menu.php loaded into this div//
    </div>
    <div id="web_Contents">
        //contents of home.php loaded into this div//
    </div>
    <div id="web_Footer">
        //contents of footer.php loaded into this div//
    </div>
</div>

```

The menu items are then loaded into the web\_contents DIV area using the javascript code:

```
$('#web_Menu a').click(function(e)
{
    e.preventDefault();
    $('#web_Content').load($(this).attr('href'), function()
    {
    });
}); 

```

Now the code loads all pages selected from the menu into the web\_Contents div area. But i have now created a page called register.php and it has some very unexpected functuality. Below is the rendered HTML for it, It will also load in the web\_Contents div area:

```
<div id="reg_Div">
    <form id="reg_Form>
        <label>Desired Username: </label><input type="text" name="uname"  id="uname" />
        <button>Register</button>
    </form>
</div>

```

The index.php page would then be rendered like this:

```
<div id="web_Page">
    <div id="web_Header">
        //contents of header.php loaded into this div//
    </div>
    <div id="web_Menu">
        //contents of menu.php loaded into this div//
    </div>
    <div id="web_Contents">
        <div id="reg_Div">
            <form id="reg_Form>
                <label>Desired Username: </label><input type="text" name="uname"  id="uname" />
                <button>Register</button>
            </form>
        </div>
    </div>
    <div id="web_Footer">
        //contents of footer.php loaded into this div//
    </div>
</div>

```

The problem is that even though this form has no functionality and neither does the button, whenever the button is clicked, the website navigates to the index.php page. I really cannot understand why?

Could anyone see why the code would then cause the triggered button navigate to index.php. Also, since index.php is just a collection of require() pages, and the register.php is also loaded there, what is causing the page to automatically discard the web\_Contents div that contained register.php and replace it with contents of home.php?

This is really confusing me?

Any feedback would be much appreciated.
Thanks.