Question

我有一个简单的网页，看起来像这样。

enter image description here

单击“加载”按钮时，它应在组合框下显示一个小表单（该表单的ID为frmUpdateService）。

问题是，当我点击加载按钮时，它会显示表格，但在出现后会立即消失！

这是页面的HTML代码。

<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheets/styles.css" />
<script type="text/javascript" src="scripts/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="scripts/scripts.js"></script>
</head>
<body id="body_services">

<?php

include_once 'DatabaseHandler.php';
$db = DatabaseHandler::getInstance();

//loading taxi service names for updating combobox
$queryLoadSids = $db->prepare("SELECT * FROM taxi_services ORDER BY SID");
$queryLoadSids->execute();
$dropdown = "<select name='serviceID'>";
while ($row = $queryLoadSids->fetch(PDO::FETCH_ASSOC))
{
    $dropdown .= "\r\n<option value='{$row['SID']}'>{$row['Name']}</option>";
}
$dropdown .= "\r\n</select>";

?>

<?php

if(isset($_POST['btnload']))
{
    $param = $_POST['serviceID'];

    $queryLoadToUpdate = $db->prepare("SELECT * FROM taxi_services WHERE SID = :serviceID");
    $queryLoadToUpdate->bindParam(':serviceID', $param, PDO::PARAM_STR);
    $queryLoadToUpdate->execute();
    $results = $queryLoadToUpdate->fetchAll(PDO::FETCH_ASSOC);

    $loadedSID = $results["SID"];
    $loadedName = $results["Name"];
    $loadedCost = $results["Cost"];
    $loadedActive = $results["Active"];
}

?>

<div id="tasks">
    <ul>
        <li><a id="add" href="#">Add a new taxi service</a></li>
        <li><a id="update" href="#">Update a taxi service</a></li>
        <li><a id="delete" href="#">Delete a taxi service</a></li>
        <li><a id="view" href="#">View taxi services</a></li>
    </ul>
</div>

<form id="cmbServiceIDs" name="sids">
<table width="380" border="0">
  <tr>
    <td><label for="serviceId">Select the Service ID</label></td>
    <td><?php echo $dropdown; ?></td>
    <td><input id="load" type="submit" value="Load" name="btnload" /></td>
  </tr>
</table>
</form>

<form id="frmUpdateService" name="Update" action="" method="post">
<table width="300" border="0">
  <tr>
    <td><label for="sid">Service ID</label></td>
    <td><input type="text" name="sid" value="<?php echo $loadedSID; ?>" /></td>
  </tr>
  <tr>
    <td><label for="name">Name</label></td>
    <td><input type="text" name="name" value="<?php echo $loadedName; ?>" /></td>
  </tr>
  <tr>
    <td><label for="cost">Cost</label></td>
    <td><input type="text" name="cost" value="<?php echo $loadedCost; ?>" /></td>
  </tr>
  <tr>
    <td><label for="active">Active</label></td>
    <td><input type="checkbox" name="active" value="<? echo $loadedActive; ?>" <?php echo $loadedActive ? 'checked="checked"' : ''; ?> /></td>
  </tr>
  <tr>
    <td></td>
    <td><input type="reset" value="Cancel" /> <input type="submit" value="Update" name="update" /></td>
  </tr>
</table>
</form>

</body>
</html>

我使用jQuery来显示显示/隐藏效果。

$(function()
{
    $("#frmUpdateService").hide();
    $("#cmbServiceIDs").hide();

    $("#update").click(function()
    {
        $("#cmbServiceIDs").slideDown("slow");
        $("#frmUpdateService").hide();
    });
    $("#load").click(function()
    {
        $("#frmUpdateService").fadeIn("slow");
    });
});

任何人都可以解释为什么会发生这种情况以及如何纠正它？

谢谢。

Answer 1

#load按钮执行您的要求，然后继续提交页面，刷新所有内容。您应该使用普通按钮或某种可点击的div，或者使用preventDefault()按钮的点击处理程序中的#load。

Answer 2

问题是由提交按钮引起的，该按钮将页面POST到服务器，然后重新加载响应（这会导致隐藏表单的行运行）。

要么改变这个

<input id="load" type="submit" value="Load" name="btnload" />

到这个

<input id="load" type="button" value="Load" name="btnload" />

或将您的点击事件更改为以下内容：

$("#load").click(function(e)
{
    $("#frmUpdateService").fadeIn("slow");
    e.preventDefault();
});

Answer 3

这是因为这两个陈述：

$("#frmUpdateService").hide();
$("#cmbServiceIDs").hide();

每次加载页面都会执行。这可以通过Ajax很好地解决。

如果你不想使用完整的回发来解决这个问题，你应该确保正确的html，包括可见和不可见的内容都由服务器端处理。

HTML Combobox在出现后立即消失

3 个答案: