Блог

Главная - Вопросы по программированию - Не могу понять, почему мои сайты продолжают переходить на свою индексную страницу?

Не могу понять, почему мои сайты продолжают переходить на свою индексную страницу?

#php #javascript #jquery #ajax #forms

#php #javascript #jquery #ajax #формы

Вопрос:

Я создаю веб-сайт, используя 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>

Затем пункты меню загружаются в область web_contents DIV с использованием кода javascript:

 $('#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>

The 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 также загружается там, что заставляет страницу автоматически отбрасывать web_Contents div, который содержал register.php и замените его содержимым home.php ?

Это действительно сбивает меня с толку?

Буду признателен за любую обратную связь. Спасибо.

Ответ №1:

Во-первых, вам не хватает цитаты в этой строке

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

кроме того, вы захотите обновить его до чего-то подобного этому…

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

Комментарии:

1. Вы также можете поместить список в событие отправки… : $('reg_Form').submit(function(){ e.preventDefault(); return false; });

Ответ №2:

Форма имеет атрибут action, который сообщает браузеру, куда перейти после нажатия кнопки отправки. Если атрибут action не указан, то по умолчанию это текущая страница, в вашем случае «index.php «.

Ответ №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
});

Ответ №4:

Причина, по которой форма отправляется после нажатия кнопки, несмотря на отсутствие action атрибута, заключается в том, что атрибут action по умолчанию соответствует URL текущей страницы, если он не указан.

Один из способов предотвратить отправку формы — включить onsubmit атрибут в тег формы. Если код JavaScript, содержащийся в этом атрибуте, возвращает false, то форма не будет отправлена.

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