Cant understand Why My Sites Keeps Navigating To Its Index Page?
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 javascr开发者_StackOverflow中文版ipt 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.
Firstly, you are missing a quotation in this line
<form id="reg_Form> // <--- missing a quote
also, you'll want to update it to something like this...
<form id="reg_Form" onsubmit="return(false);"> // <--- should prevent form submittion
Form has action attribute, which tells browser where to navigate after submit button is clicked. If no action attribute is specified then, by default it is current page, in your case "index.php".
HTML forms submit their data to a page, if none is specified, then it submits to the current page (index.php in your case).
<form id="reg_Form">
Is the same as
<form id="reg_Form" action="index.php" method="GET">
To stop the form from submitting, create an onsubmit handler that tells it not to submit.
$('#reg_Form').submit(function(e){
e.preventDefault(); // Tells the form not to submit
});
The reason that the form submits after clicking the button, despite not having an action attribute, is that the action attribute defaults to the URL of the current page if it is not specified.
One way to prevent the form from being submitted is to include an onsubmit attribute in the form tag. If the JavaScript code contained within this attribute returns false, then the form will not be submitted.
<form id="reg_Form" onsubmit="return false;">
加载中,请稍侯......
精彩评论