Отправить форму в div с помощью ajax, вернуть php в div без обновления

Question 1

У меня есть индексная страница с тремя кнопками вверху. При нажатии каждой кнопки 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('Y-m-d 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>';
  }
?>

php jquery ajax html

1

Austin Dennis 21 Дек 2012 в 19:48

Я предполагаю, что проблема в этой строке: $("#addstudent").validate({...});. Я бы вызвал действие AJAX на $("#addstudent").submit({ /* do a validation + AJAX call */ });.

–

shadyyx

21 Дек 2012 в 19:53

Answer

Когда вы загружаете форму на свою страницу с помощью метода load, большинство браузеров удаляют тег <head>.

На сайте jquery :

Во время этого процесса браузеры часто фильтруют элементы из документа. такие как элементы <html>, <title> или <head>. В результате элементы полученный с помощью .load () может не быть точно таким же, как если бы документ были получены непосредственно браузером.

Итак, включите свой javascript на главную страницу, а не на страницу формы, или вручную добавьте javascript на главную страницу динамически.

1

user657496user657496 21 Дек 2012 в 19:52

Я добавил javascript в моей индексной страницы, и это сработало! Большое спасибо!

–

Austin Dennis

21 Дек 2012 в 20:08

Question 2

Когда вы загружаете форму на свою страницу с помощью метода load, большинство браузеров удаляют тег <head>.

На сайте jquery :

Во время этого процесса браузеры часто фильтруют элементы из документа. такие как элементы <html>, <title> или <head>. В результате элементы полученный с помощью .load () может не быть точно таким же, как если бы документ были получены непосредственно браузером.

Итак, включите свой javascript на главную страницу, а не на страницу формы, или вручную добавьте javascript на главную страницу динамически.

1

user657496user657496 21 Дек 2012 в 19:52

Я добавил javascript в моей индексной страницы, и это сработало! Большое спасибо!

–

Austin Dennis

21 Дек 2012 в 20:08

Отправить форму в div с помощью ajax, вернуть php в div без обновления

1 ответ

Похожие вопросы

Связанные вопросы

Новые вопросы

php