У меня есть индексная страница с тремя кнопками вверху. При нажатии каждой кнопки файл php загружается в главный div. Одна из этих кнопок загружает форму, которую пользователи заполняют и представляют. При отправке формы мне нужно, чтобы она не обновляла страницу и загружала полученные данные в div на странице формы … не основной div.
Если я загружаю страницу формы самостоятельно (т. Е. Не нажав на кнопку, а просто набрав адрес самой формы) … все работает нормально. Валидация формы работает, она отправляется без обновления и результирующие данные возвращаются в результат div в форме.
Однако я загружаю индексную страницу и нажимаю кнопку, чтобы загрузить форму. Форма загружается правильно, но когда я нажимаю кнопку «Отправить», она просто обновляет страницу …, которая вызывает исчезновение формы, поскольку div, в который он загружен, изначально скрыт. Кроме того, форма не проверяет и не выполняет действие php.
Опять же, форма и ее ассоциированный php работают совершенно самостоятельно. Проблема возникает только при загрузке формы на индексной странице. Поэтому я предполагаю, что эта проблема связана с тем, что я загружаю ее в div на индексной странице. Любая помощь будет принята с благодарностью.
Индексный код:
<html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> </head> <body> <div id="header"> <center><h2>OMS Tutoring Database</h2></center> </div> <div id="navbar"> <center> <button class="navbutton" id="buttonview" type="button">View Tutoring Lists</button> <button class="navbutton" id="buttonadd" type="button">Add Students</button> <button class="navbutton" id="buttonadmin" type="button">Admin</button> </center> <br> </div> <div id="content"></div> <script> $(document).ready(function() { $('#buttonview').click(function(){ $('#content').load('tutoring.php', function(){ }); }); $('#buttonadd').click(function(){ $('#content').load('addtest.php', function(){ }); }); $('#buttonadmin').click(function(){ $('#content').load('admin.php', function(){ }); }); }); </script> </body> </html> Код формы
<html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#addstudent").validate({ debug: false, rules: { studentid: "required", teacher: "required", assignment: "required", date: "required", }, messages: { studentid: "Please enter the student's ID number.", teacher: "Please enter your name.", assignment: "Please select a tutoring assignment.", date: "Please select a day.", }, submitHandler: function(form) { $.ajax({ url: 'add.php', type: 'POST', data: $("#addstudent").serialize(), success: function(data) { $("#studentid").val(""); $('#studentid').focus(); $("#results").empty(); $("#results").append(data); } }); return false; } }); }); </script> </head> <title>OMS Tutoring - Add Student</title> <body> Use this form to add students to the tutoring list. <p> <div style="float:left;width:100%;margin-bottom:10;"> <div> <form name="addstudent" id="addstudent" action="" method="post"> <fieldset><legend>Add student to tutoring list</legend> <div><label for="studentid">ID number</label><input type="text" name="studentid" id="studentid"></div> <div><label for="day">Date</label><select name="date" id="date"> <option value="">Please select a day</option> <option value="mon">Monday <? echo $monday; ?></option> <option value="tue">Tuesday <? echo $tuesday; ?></option> <option value="wed">Wednesday <? echo $wednesday; ?></option> <option value="thu">Thursday <? echo $thursday; ?></option> <option value="fri">Friday <? echo $friday; ?></option> </select></div> <div><label for="assignment">Tutoring assignment</label><select name="assignment" id="assignment"> <option value="">Please select an assignment</option> <option value="att">Activity Time</option> <option value="acc">ACC</option> <option value="tech">ACC Tech </option> <option value="ast">After School</option> </select></div> <div><label for="teacher">Assigning teacher</label><input type="text" name="teacher" id="teacher"></div> <input type="submit" name="submit" value="submit"> </fieldset> </form></div></div> <div id="results" style="margin-left:4;width:350;"><div> </body> </html>
Обработка php-кода обработки форм:
<?php $mysqli = new mysqli('localhost', 'xxx', 'xxx', 'xxx'); $studentid = $_REQUEST['studentid']; $day = $_REQUEST['date']; $assignment = $_REQUEST['assignment']; $teacher = $_REQUEST['teacher']; $dayquery = $mysqli->query("SELECT date FROM days WHERE day='$day'"); $dayresult = $dayquery->fetch_array(); $date = array_shift($dayresult); $timestamp = date('Ymd H:i:s'); $mysqli->query("INSERT INTO assign (id, assignment, assignteacher, date, timestamp) VALUES ('$studentid', '$assignment', '$teacher', '$date', '$timestamp')"); $namequery = $mysqli->query("SELECT first, last FROM students WHERE students.id='$studentid'"); $nameresult = $namequery->fetch_array(); echo $nameresult['first'].' '.$nameresult['last'].' successfully added.'; $teacherquery = $mysqli->query("SELECT assignteacher FROM assign WHERE id='$studentid' AND date='$date'"); $rowcount = $teacherquery->num_rows; if ($rowcount > 1) { while ($row = $teacherquery->fetch_array()) { $teachernames[] = $row[0]; } $teachers = implode(', ', $teachernames); echo '<br><br>Caution: '.$nameresult['first'].' '.$nameresult['last'].' has already been added by the following teachers: '.$teachers.'. '; echo 'They may have precedence.'; } else { } $alreadyadded = $mysqli->query("SELECT assign.id, students.first, students.last, assign.assignment, assign.assignteacher FROM assign LEFT JOIN students ON assign.id=students.id WHERE assign.date='$date' AND assign.assignteacher='$teacher' ORDER BY assign.assignment ASC, students.last ASC"); echo '<br><br><br>You already have the following student(s) assigned to tutorials on this day'; echo '<table border="1">'; while ($row = $alreadyadded->fetch_array()) { echo '<tr><td>'.$row['id'].'</td><td>'.$row['first'].'</td><td>'.$row['last'].'</td><td>'.$row['assignment'].'</td></tr>'; } ?>
Когда вы загружаете форму на свою страницу с помощью метода load , большинство браузеров удаляют <head> .
Как с сайта jquery:
Во время этого процесса браузеры часто фильтруют элементы из документа, такие как элементы
<html>,<title>или<head>. В результате элементы, полученные методом .load (), могут быть не такими, как если бы документ был получен непосредственно браузером.
Итак, включите ваш javascript на главной странице, а не на странице формы, или вручную добавьте javascript на свою главную страницу динамически.