doufan6886
2012-12-21 15:48
浏览 43

使用ajax在div中提交表单,在div中返回php而不刷新

I have an index page with three buttons at the top. On the click of each button a php file is loaded into the main div. One of these buttons loads a form that users fill out and submit. On submitting of the form I need it to not refresh the page and to load the resulting data into a div on the form page...not the main div.

If I load the form page on it's own (ie, not by clicking on the button, but just typing in the address of the form itself)...everything works fine. The form validation works, it submits without a refresh and the resulting data is returned into the results div on the form.

However, I load the index page and click on the button to load the form. The form loads correctly, but when I click submit it just refreshes the page...which causes the form to disappear since the div into which it is loaded is originally hidden. Also, the form doesn't validate and doesn't execute the php action.

Again, the form and its associate php work perfectly on their own. The issue only comes up when I load the form in the index page. So I'm assuming that this issue has something to do with me loading it into a div on the index page. Any help would be greatly appreciated.

Index code:

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

Form Code

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

Form processing php code:

<?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>';
  }
?>
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • doufeng9567 2012-12-21 15:52
    已采纳

    When you load the form into your page using the load method, most browsers delete the <head> tag.

    As from the jquery website:

    During this process, browsers often filter elements from the document such as <html>, <title>, or <head> elements. As a result, the elements retrieved by .load() may not be exactly the same as if the document were retrieved directly by the browser.

    So, include your javascript in the main page instead of in the form page, or manually add the javascript to your main page dynamically.

    打赏 评论

相关推荐 更多相似问题