点击事件只是刷新页面？

Question

When I click the 'Submit' button the page just seems to refresh and no messages are displayed that are suppose to read either 'Completed' or 'Not'.当我单击“提交”按钮时，页面似乎只是刷新了，并且没有显示任何应该阅读“已完成”或“未完成”的消息。 I added was some Ajax functions to populate some drop down list dynamically for information from MySQL database.我添加了一些 Ajax 函数来动态填充一些下拉列表以获取来自 MySQL 数据库的信息。

Question: Why is my page not submitting, it is just 'refreshing'?问题：为什么我的页面没有提交，它只是“刷新”？ (after adding the Ajax function and populating drop down list from php file) （在添加 Ajax function 并从 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 file that populates material dropdown:填充材料下拉列表的 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

Clicking a submit button in a form will submit the page.单击表单中的提交按钮将提交页面。 If you don't want that to happen, you have to prevent it explicitly by handling the form.onsubmit event and cancelling the event:如果您不希望这种情况发生，则必须通过处理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
}

You can also cancel the click event of the submit button:也可以取消提交按钮的点击事件：

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

In addition to gilly3's answer, you may also do return false in onclick event of the button.除了 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 个解决方案

解决方案1
1 2011-07-11 18:31:15

解决方案2
1 2011-07-11 18:36:48

点击事件只是刷新页面？

问题描述

2 个解决方案

解决方案1 1 2011-07-11 18:31:15

解决方案2 1 2011-07-11 18:36:48

解决方案1
1 2011-07-11 18:31:15

解决方案2
1 2011-07-11 18:36:48