Question

我有一个表单，使用提交按钮加载表格中的表格我希望该表单显示在同一个div中

下面的

是getdivision.php的代码

    <div id="record"></div>
  <form id='form4' action='viewrecord.php' method='POST'>
<table id='table-2'>
    <thead>
        <th>RATE</th>
        <th>LAST NAME</th>
        <th>FIRST NAME</th>
        <th>DIVISION</th>
        <th>WORKCENTER</th>
        <th>MENTOR</th>
        <th>View</th>
    </thead>
    <tbody>

 <?php 
  while($row = mysql_fetch_array($result))
 {
 echo "<tr>";
 echo "<td>" . $row[0] . "</td>";
      echo "<td>" . $row[1] . "</td>";
      echo "<td>" . $row[2] . "</td>";
      echo "<td>" . $row[3] . "</td>";
      echo "<td>" . $row[4] . "</td>";
      echo "<td>" . $row[5] . " " . $row[6] . " " . $row[7] . "</td>"
    echo "<td><input type='submit'  name='viewrecord' value='".$row[8]."' class='submit-                           button view-record' /></td>";
      echo "</tr>";
      }
    echo "
    <tbody>
    </table>
    </form>";

这里是ajax代码

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">        </script>
    <script>
    $("#form4").submit(function(event){
        event.preventDefault();
        $.post( viewrecord.php, $("#form4").serialize(), function(data){
            $("results").html(data);
        });
    });
    </script>

我似乎无法找到问题

form4是从php脚本生成的beging并放置在主页面的#result div中，这可能是一些请帮助的原因

这里是包含结果div

的index.php

    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <script type="text/javascript">

    function showdivision(str)
    {
    if (str=="")
      {
      document.getElementById("results").innerHTML="";
      return;
      } 
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("results").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET","getdivision.php?q="+str,true);
    xmlhttp.send();
    }

    function viewrecord()
    {

    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("results").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET","viewrecord.php");
    xmlhttp.send();
    }

    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

    </head>
    <body>
    <?php
    $con = mysql_connect("localhost","mykoll_frc","frcfrc");
    if (!$con)
      {
      die('Could not connect: ' . mysql_error());
      }


    ?>
    <form>

    <select name="DIVISIONS" onchange="showdivision(this.value)">
    <option value="">Select a Division:</option>
    <option value="600">Avionics</option>
    <option value="700">Armament</option>
    <option value="GMD">GMD</option>
    <option value="ADMIN">ADMIN</option>
    </select>
    <?php
    while($row = mysql_fetch_array($mentors))
    {
      echo "<option value=\"".$row['mentorid']."\">".$row['M_RATE']."         ".$row['M_LastName']."                 ".$row['M_FirstName']."\n  ";
    }
    ?>

    </select>

    <button type="button" onclick="showall()">View all records</button>
    <button type="button" onclick="showallmentors()">View Mentor List</button>

    </form>
    <br />
    <div id="results"><b>info will be listed here.</b></div>

    </body>
    </html>

它的工作方式是 index.php加载用户选择一个部门结果div从getdivision.php动态填充然后用户可以选择一条记录，记录应该填充结果div 我希望我说清楚

Answer 1

jQuery需要选择器上的#。

$.post( viewrecord.php, $("#form4").serialize(), function(data){
    $("#results").html(data); // changed results to #results
});

加载表单提交结果在同一个div中

1 个答案: