Submit form in div with ajax, return php in div wi

2020-06-06 07:06发布

站内问答 / PHP
2013 1 6

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条回答
家丑人穷心不美
2楼-- · 2020-06-06 07:41

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)