Home/ Questions/Q 8554283
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T14:50:47+00:00

I have a simple web page which looks like this. When clicked on the

  • 0

I have a simple web page which looks like this.

enter image description here

When clicked on the Load button, it should show up a small form under the combobox (the id given to that form is frmUpdateService).

The problem is when I click on the load button, it shows the form but it gets disappeared immediately after showing up!

Here’s the HTML code of the page.

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

And I use jQuery for appearing show/hide effects.

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

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

Can anyone explain why this is happening and how to correct it?

Thank you.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The problem is caused by the submit button, which POSTs the page to the server, and reloads the response (which causes the line that hides the form to run).

    Either change this

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

    to this

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

    or change your click event to something like this:

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