Question

我有点迷失，试图解决这个错误，请和我一起裸露。当我点击“提交”按钮时，页面似乎刷新，并且没有显示任何消息，这些消息被认为是“已完成”或“未”。我添加了一些Ajax函数来动态填充一些下拉列表以获取来自MySQL数据库的信息。

问题：为什么我的页面没有提交，只是'刷新'？（在添加Ajax功能并从php文件填充下拉列表之后）

<SCRIPT type="text/javascript"> 
function populatematerial(str)
{   
    if (window.XMLHttpRequest) 
    {
    // IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
    }

    else
    {
    // IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange=function()
    {
      if (xmlhttp.readyState==4 && xmlhttp.status==200) {
        document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
      }
    }

    xmlhttp.open("GET","getmaterial.php?q="+str,true);
    xmlhttp.send();
}

<form name='form1' method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<table border="0" width="100%" id="table1">
    <tr>
        <td width="144">DB Username</td>
        <td><input type="text" name="dbusername" size="32"></td>
    </tr>
    <tr>
        <td width="144">DB Password</td>
        <td><input type="password" name="dbpassword" size="32"></td>
    </tr>
    <tr>
        <td width="144">Tank Type</td>
        <td><select name="tanktype" id="tools" onChange="populatematerial(this.value)">
        <option></option>
        <option value="Metal">Metal</option>
        <option value="Rinse">Rinse</option>
        </select>
        </td>
    </tr>
    <tr id="material_show" style="display:none;">
        <td width='144'>Material</td>
        <td>
        <select size='1' name='material' id="txtHint">
        </select>
        </td> 
    </tr>
</table>
<p><input type="submit" value="Submit" name="result" ></p>

 <?php
if (isset($_POST['result']))
{
session_start();

// check user id and password 

 if (!authorized($dbuser1,'#####')) {
  echo "<h2>You are not authorized.  Sorry.</h2>";
  // exit to different page
 }

// open database connection

// upload some data via $submitquery

mysql_query($submitquery) or die('UNABLE TO SUBMIT DATA');
echo "<b>Submit Successful</b><p>";

// close database connection

?>

填充材料下拉列表的PHP文件：

<?php
$q=$_GET["q"];

// open database connection

$query = "select * from r2rtool.platingmaterialtype where type = '".$q."'";
$result = mysql_query($query);

$option = "";

while($row = mysql_fetch_array($result))
{
    $option.="<option value=\"{$row['Material']}\">{$row['Material']}</option>";
}
echo "<option value='0'></option>";
echo $option;

// close database connection
?>

Answer 1

单击表单中的提交按钮将提交页面。如果您不希望这种情况发生，您必须通过处理form.onsubmit事件并取消事件来明确地阻止它：

document.forms.form1.onsubmit = function(e)
{
    e = e || window.event;
    if (e.preventDefault) e.preventDefault();
    e.returnValue = false;

    // Do something else instead here
}

您还可以取消提交按钮的点击事件：

document.forms.form1.result.onclick = function(e)
{
    e = e || window.event;
    if (e.preventDefault) e.preventDefault();
    e.returnValue = false;

    // Do something else instead here
}

Answer 2

除了gilly3的回答之外，您还可以在按钮的onclick事件中返回false。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
</head>
<body>
    <form>
        <input type="submit" onclick="return false;" value="Click me" />
    </form>
</body>
</html>

点击事件只是刷新页面？

2 个答案: