Click event is just refreshing the page?_问答_开发者

Click event is just refreshing the page?

开发者 https://www.devze.com 2023-03-20 00:48 出处：网络

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 so

相关专题：php

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.

Question: Why is my page not submitting, it is just 'refreshing'? (after adding the Ajax function and populating drop down list from php file)

<SCRIPT type="text/javascript"> 
function populatematerial(str)
{   
    if (window.XMLHttpRequest) 
    {
    // IE7+, Firefox, Chrom开发者_JS百科e, 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
$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
?>

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:

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
}

In addition to gilly3's answer, you may also do return false in onclick event of the button.

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