Question

我正在使用PHP和JQuery创建一个网站，并且在修复表单方面遇到了问题。

例如，我的index.php如下所示：

<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>

然后加载页眉，页脚，菜单区域和起始页面。加载的文件也包含在div区域中，因此最终的index.php呈现如下：

<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>

然后使用javascript代码将菜单项加载到web_contents DIV区域：

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

现在，代码将从菜单中选择的所有页面加载到web_Contents div区域。但我现在创建了一个名为register.php的页面，它有一些非常意外的功能。下面是它的渲染HTML，它也将加载到web_Contents div区域：

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

index.php页面将如下呈现：

<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>

问题在于，即使此表单没有功能也没有按钮，只要单击该按钮，网站就会导航到index.php页面。我真的不明白为什么？

任何人都可以看到为什么代码会导致触发按钮导航到index.php。此外，由于index.php只是require（）页面的集合，并且register.php也在那里加载，导致页面自动丢弃包含register.php的web_Contents div并将其替换为home的内容。 PHP？

这让我很困惑？

任何反馈都会非常感激。感谢。

Answer 1

首先，您在此行中缺少引号

<form id="reg_Form>  //   <--- missing a quote

另外，你会想要将它更新为这样......

<form id="reg_Form" onsubmit="return(false);">  //   <--- should prevent form submittion

Answer 2

表单有action属性，告诉浏览器单击提交按钮后导航的位置。如果没有指定action属性，那么默认情况下它是当前页面，在你的情况下为“index.php”。

Answer 3

HTML表单将数据提交到页面，如果没有指定，则提交到当前页面（在您的情况下为index.php）。

<form id="reg_Form">

与

相同

<form id="reg_Form" action="index.php" method="GET">

要停止提交表单，请创建一个onsubmit处理程序，告诉它不要提交。

$('#reg_Form').submit(function(e){
    e.preventDefault(); // Tells the form not to submit
});

Answer 4

尽管没有action属性，但在单击按钮后提交表单的原因是，如果未指定，则action属性默认为当前页面的URL。

阻止表单提交的一种方法是在表单标记中包含onsubmit属性。如果此属性中包含的JavaScript代码返回false，则表单将不会被提交。

<form id="reg_Form" onsubmit="return false;">

无法理解为什么我的网站会继续浏览其索引页面？

4 个答案: