Good Day,
Currently, I have a page that has a form that will allow 2-15 fieldsets, to display the other fieldsets the user is required to press the “Add” button to display another fieldset.
The issue with the above is that the user needs to press the button twice to initiate the function and currently I can not find the source problem for this.
Please see the below code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<link href="https://cdn.jsdelivr. net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min .css" rel="stylesheet">
<link rel="stylesheet" href="https://unicons.iconscout .com/release/v3.0.6/css/line.css">
<link rel="stylesheet" href="https://pro.fontawesome .com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
</head>
<body style="background-color:#404258;">
<?php
include "classes/access.classes.php";
userAccess("ROLE_SYSADMIN");
// Check if user has access or not.
require('admin.sidebar.php');
//include "classes/view.classes.php" to return SQL Views
include "classes/view.classes.php";
//include "classes/list.classes.php" to return list items for "select";
include "classes/list.classes.php";
if (isset($_GET['id']))
{
$procedureGroupID = $_GET['id'];
}
$listClass = new Lists();
$returnView = new view(NULL,$procedureGroupID);
foreach($returnView->getEscalationProcedureGroupInfo() as $getEscalationProcedureGroupInfo) {
$procedureGroupID = $getEscalationProcedureGroupInfo['escalationProcedureGroupID'];
$procedureGroup = $getEscalationProcedureGroupInfo['procedureGroup'];
$description = $getEscalationProcedureGroupInfo['description'];
$status = $getEscalationProcedureGroupInfo['status'];
}
?>
<section id="wrapper">
<!-- Include The Top Navigation Bar -->
<?php require "main.nav.php"; ?>
<div class="p-4">
<section class="display-container">
<div class="display-content p-4">
<div class="display-content-container">
<div class="display-content-header">
<h2>Add Procedure Steps</h2>
</div>
<form action="includes/company.inc.php" method="post">
<div id="addFieldset-1">
<fieldset class="border p-2 text-center mt-4" id="fieldset">
<legend class="float-none w-auto">| Step 1 |</legend>
<div class="row mt-4">
<div class="col-md-6 p-2">
<div class="row">
<div class="mb-4 row form-outline">
<label for="procedure-procedureID" class="col-sm-3 col-form-label">SystemID</label>
<div class="col-sm-8">
<input type="text" class="form-control-plaintext pl-2" id="procedure-procedureID" name="procedure-procedureID" value="<?php echo $procedureGroupID; ?>" readonly>
</div>
</div>
</div>
<div class="row">
<div class="mb-4 row form-outline">
<label for="procedure-procedureID" class="col-sm-3 col-form-label">SystemID</label>
<div class="col-sm-8">
<input type="text" class="form-control-plaintext pl-2" id="procedure-procedureID" name="procedure-procedureID" value="<?php echo $procedureGroupID; ?>" readonly>
</div>
</div>
</div>
<div class="row">
<div class="mb-4 row form-outline">
<label for="procedure-procedureID" class="col-sm-3 col-form-label">SystemID</label>
<div class="col-sm-8">
<input type="text" class="form-control-plaintext pl-2" id="procedure-procedureID" name="procedure-procedureID" value="<?php echo $procedureGroupID; ?>" readonly>
</div>
</div>
</div>
<div class="row">
<div class="mb-4 row form-outline">
<label for="procedure-procedureID" class="col-sm-3 col-form-label">SystemID</label>
<div class="col-sm-8">
<input type="text" class="form-control-plaintext pl-2" id="procedure-procedureID" name="procedure-procedureID" value="<?php echo $procedureGroupID; ?>" readonly>
</div>
</div>
</div>
</div>
<div class="col-md-6 p-2">
<div class="row">
<div class="mb-4 row form-outline">
<label for="procedureStep-procedureGroup" class="col-sm-3 col-form-label">Procedure Group</label>
<div class="col-sm-8">
<input type="text" class="form-control-plaintext pl-2" id="procedureStep-procedureGroup" name="procedureStep-procedureGroup" value="<?php echo $procedureGroup; ?>" readonly>
</div>
</div>
</div>
<div class="row">
<div class="mb-4 row form-outline">
<label for="procedureStep-procedureGroup" class="col-sm-3 col-form-label">Procedure Group</label>
<div class="col-sm-8">
<input type="text" class="form-control-plaintext pl-2" id="procedureStep-procedureGroup" name="procedureStep-procedureGroup" value="<?php echo $procedureGroup; ?>" readonly>
</div>
</div>
</div>
<div class="row">
<div class="mb-4 row form-outline">
<label for="procedureStep-procedureGroup" class="col-sm-3 col-form-label">Procedure Group</label>
<div class="col-sm-8">
<input type="text" class="form-control-plaintext pl-2" id="procedureStep-procedureGroup" name="procedureStep-procedureGroup" value="<?php echo $procedureGroup; ?>" readonly>
</div>
</div>
</div>
<div class="row">
<div class="mb-4 row form-outline">
<label for="procedureStep-procedureGroup" class="col-sm-3 col-form-label">Procedure Group</label>
<div class="col-sm-8">
<input type="text" class="form-control-plaintext pl-2" id="procedureStep-procedureGroup" name="procedureStep-procedureGroup" value="<?php echo $procedureGroup; ?>" readonly>
</div>
</div>
</div>
</div>
</div>
</fieldset>
</div>
<div id="addFieldset-2">
<fieldset class="border p-2 text-center mt-4" id="fieldset">
<legend class="float-none w-auto">| Step 2 |</legend>
<div class="row mt-4">
<div class="col-md-6 p-2">
<div class="row">
<div class="mb-4 row form-outline">
<label for="procedure-procedureID" class="col-sm-3 col-form-label">SystemID</label>
<div class="col-sm-8">
<input type="text" class="form-control-plaintext pl-2" id="procedure-procedureID" name="procedure-procedureID" value="<?php echo $procedureGroupID; ?>" readonly>
</div>
</div>
</div>
</div>
<div class="col-md-6 p-2">
<div class="row">
<div class="mb-4 row form-outline">
<label for="procedureStep-procedureGroup" class="col-sm-3 col-form-label">Procedure Group</label>
<div class="col-sm-8">
<input type="text" class="form-control-plaintext pl-2" id="procedureStep-procedureGroup" name="procedureStep-procedureGroup" value="<?php echo $procedureGroup; ?>" readonly>
</div>
</div>
</div>
</div>
</div>
</fieldset>
</div>
<div id="addFieldset-3">
<fieldset class="border p-2 text-center mt-4" id="fieldset">
<legend class="float-none w-auto">| Step 3 |</legend>
<div class="row mt-4">
<div class="col-md-6 p-2">
<div class="row">
<div class="mb-4 row form-outline">
<label for="procedure-procedureID" class="col-sm-3 col-form-label">SystemID</label>
<div class="col-sm-8">
<input type="text" class="form-control-plaintext pl-2" id="procedure-procedureID" name="procedure-procedureID" value="<?php echo $procedureGroupID; ?>" readonly>
</div>
</div>
</div>
</div>
<div class="col-md-6 p-2">
<div class="row">
<div class="mb-4 row form-outline">
<label for="procedureStep-procedureGroup" class="col-sm-3 col-form-label">Procedure Group</label>
<div class="col-sm-8">
<input type="text" class="form-control-plaintext pl-2" id="procedureStep-procedureGroup" name="procedureStep-procedureGroup" value="<?php echo $procedureGroup; ?>" readonly>
</div>
</div>
</div>
</div>
</div>
</fieldset>
</div>
<div id="addFieldset-4" style="display:none;">
<fieldset class="border p-2 text-center mt-4" id="fieldset">
<legend class="float-none w-auto">| Step 4 |</legend>
<div class="row mt-4">
<div class="col-md-6 p-2">
<div class="row">
<div class="mb-4 row form-outline">
<label for="procedure-procedureID" class="col-sm-3 col-form-label">SystemID</label>
<div class="col-sm-8">
<input type="text" class="form-control-plaintext pl-2" id="procedure-procedureID" name="procedure-procedureID" value="<?php echo $procedureGroupID; ?>" readonly>
</div>
</div>
</div>
</div>
<div class="col-md-6 p-2">
<div class="row">
<div class="mb-4 row form-outline">
<label for="procedureStep-procedureGroup" class="col-sm-3 col-form-label">Procedure Group</label>
<div class="col-sm-8">
<input type="text" class="form-control-plaintext pl-2" id="procedureStep-procedureGroup" name="procedureStep-procedureGroup" value="<?php echo $procedureGroup; ?>" readonly>
</div>
</div>
</div>
</div>
</div>
</fieldset>
</div>
<div class="add-container mb-4">
<ul>
<li class="add-list"><input type="button" onclick="adddt()" value="Add"></li>
<script type="text/javascript">
var count = 2;
var countMax = 4;
function adddt() {
if(count > countMax)
return;
document.getElementById('addFieldset-' + count + '').style.display = 'block';
count++;
}
</script>
</ul>
</div>
<div class="row">
<div class="col-sm-12">
<button type="submit" name="companyEdit-submit" class="btn btn-primary btn-block mb-2 float-right">Update Company</button>
</div>
</div>
</form>
</div>
</div>
</section>
</div>
</section>
</body>
</html>
How would I go to fix this? The function should be initiated with 1 click.