I am developing a small Interrail Planner for me and my friends. At the moment, I am trying to create a modal to edit/update the travelers information.
Firstly, I have made it in a separated file. A workflow:
USER click on edit button ----> Redirects to a new windows with a small centered card ------------
---------> USER updates/changes the traveler information and clicks on change ----> The PHP backend
extracts the inputs values and updates them into MySQL database (set in config.php) ----> USER is
redirected pack to the original page (pass.php).
Now, I want it to appear like a modal. I have tried to do it but it ain't work.
The pass.php file:
<?php
session_start();
include_once('config.php');
/* *** CHECK IF USER IS ALREADY LOGED IN | IF NOT, REDIRECT TO LOGIN PAGE *** */
if(empty($_SESSION)){
print '<script>location.href="index.php";</script>';
}
/* *** SET THE CONNECTON WITH THE TABLE IN DATABASE *** */
$sql = "SELECT * FROM travelers";
$result = $conn->query($sql);
/* *** POPULATE THE MODAL WITH THE TRAVELLER INFO *** */
if(!empty($_GET['id'])) {
$id=$_GET['id'];
$sql = "SELECT * FROM travelers WHERE id=$id";
$result = $conn->query($sql);
while($traveler = mysqli_fetch_assoc($result)) {
$name = $traveler['name'];
$birth_date = $traveler['birth_date'];
$street = $traveler['street'];
$street_no = $traveler['street_no'];
$pc_1 = $traveler['post_code_1'];
$pc_2 = $traveler['post_code_2'];
$post_city = $traveler['post_city'];
$tax_no = $traveler['tax_no'];
$ss_no = $traveler['ss_no'];
$id_no = $traveler['id_no'];
$pass_no = $traveler['pass_no'];
$pass_type = $traveler['pass_type'];
$exp_date = $traveler['exp_date'];
}
}
/* *** EXTRACT THE NEW INPUTS AND UPDATE THE DATA BASE *** */
if(isset($_POST['save-btn'])) {
$id = $_POST['id'];
$name = $_POST['name'];
$birth_date = $_POST['birth-date'];
$street = $_POST['street'];
$street_no = $_POST['street-no'];
$pc_1 = $_POST['postal-code-1'];
$pc_2 = $_POST['postal-code-2'];
$post_city = $_POST['postal-city'];
$tax_no = $_POST['tax-no'];
$ss_no = $_POST['ss-no'];
$id_no = $_POST['id-no'];
$pass_no = $_POST['pass-no'];
$pass_type = $_POST['pass-type'];
$exp_date = $_POST['pass-date'];
$sql = "UPDATE travelers SET name='$name', birth_date='$birth_date', street='$street', street_no='$street_no', post_code_1='$pc_1', post_code_2='$pc_2', post_city='$post_city', tax_no='$tax_no', ss_no='$ss_no', id_no='$id_no', pass_no='$pass_no', pass_type='$pass_type', exp_date='$exp_date' WHERE id='$id'";
$result = $conn->query($sql);
header('Location: pass.php');
exit();
}
?>
<!DOCTYPE html>
<html lang="pt_PT">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IR PLANNER</title>
<link rel="stylesheet" href="Styles\general_styles.css">
<link rel="stylesheet" href="Styles\pass_styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
</head>
<body>
<!-- <div id="fade" class="hide"></div> -->
<header>
<text>INTERRAIL PLANNER</text>
<div class="nav_icons">
<i class="fa-solid fa-house" onclick="goHome()" id="home"></i>
<i class="fa-solid fa-right-from-bracket" onclick="buttonLogout()" id="logout"></i>
</div>
</header>
<main>
<div class="pass_holders_main">
<?php
while($traveler=$result->fetch_assoc()) {
echo "
<div class='pass-holder-info'>
<div class='header'>
<div id='header-title'>
<h2>PASSHOLDER $traveler[id]</h2>
</div>
<div id='btns'>
<a onclick='editTraveller()' id='edit-btn'>
<i class='fa-regular fa-pen-to-square'></i>
</a>
</div>
</div>
<div class='pass-body'>
<div class='primary-info'>
<div id='pass-name'>
<label for='name'>Full Name:</label>
<input type='text' name='name' id='name' value='$traveler[name]' readonly>
</div>
<div id='pass-birth-date'>
<label for='birth-date'>Birth Date:</label>
<input type='date' name='birth-date' id='birth-date' value='$traveler[birth_date]' readonly>
</div>
</div>
<div class='fiscal-info'>
<div class='first-line'>
<div id='pass-street'>
<label for='street'>Street:</label>
<input type='text' name='street' id='street' value='$traveler[street]' readonly>
</div>
<div id='pass-no'>
<label for='street-no'>No.:</label>
<input type='text' name='street-no' id='street-no' value='$traveler[street_no]' readonly>
</div>
<div id='pass-post-code'>
<label for='post-code'>Post Code:</label>
<input type='text' inputmode='numeric' name='post-code' id='post-code-1' value='$traveler[post_code_1]' readonly>
<label>-</label>
<input type='text' inputmode='numeric' name='post-code' id='post-code-2' value='$traveler[post_code_2]' readonly>
<label for='post-city' id='post-city-label'>City:</label>
<input type='text' name='post-city' id='post-city' value='$traveler[post_city]' readonly>
</div>
</div>
<div class='second-line'>
<div id='pass-tax'>
<label for='tax-no'>Tax Payer No.:</label>
<input type='tax-no' inputmode='numeric' name='tax-no' id='tax-no' value='$traveler[tax_no]' readonly>
</div>
<div id='pass-ss'>
<label for='ss-no'>Social Security No.:</label>
<input type='text' inputmode='numeric' name='ss-no' id='ss-no' value='$traveler[ss_no]' readonly>
</div>
<div id='pass-id'>
<label for='id-no'>ID No.:</label>
<input type='text' name='id-no' id='id-no' value='$traveler[id_no]' readonly>
</div>
</div>
</div>
<div class='pass-info'>
<div id='pass-no'>
<label for='pass-no'>Pass No:</label>
<input type='text' name='pass-no' id='pass-no' value='$traveler[pass_no]' readonly>
</div>
<div id='pass-type'>
<label for='pass-type'>Pass Type:</label>
<input type='text' name='pass-type' id='pass-type' value='$traveler[pass_type]' readonly>
</div>
<div id='pass-expiration'>
<label for='exp-date'>Expiration Date:</label>
<input type='date' name='exp-date' id='exp-date' value='$traveler[exp_date]' readonly>
</div>
</div>
</div>
</div>
";
}
?>
</div>
</main>
<div id="fade" class="hide"></div>
<form class="modal" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
<div class="modal-header">
<h2>UPDATE TRAVELER INFORMATION</h2>
</div>
<div class="modal-body">
<div id="traveler-info">
<div id="name">
<label for="name">Full Name:</label>
<input type="text" name="name" id="name" value="<?php echo $name ?>">
</div>
<div id="birth-id">
<div>
<label for="birth-date">Birth Date:</label>
<input type="date" name="birth-date" id="birth-date" value="<?php echo $birth_date ?>">
</div>
<div>
<label for="id-no">Id No.:</label>
<input type="text" name="id-no" id="id-no" value="<?php echo $id_no ?>">
</div>
</div>
<div id="tax-ss">
<div>
<label for="tax-no">Tax No.:</label>
<input type="text" name="tax-no" id="tax-no" value="<?php echo $tax_no ?>">
</div>
<div>
<label for="ss-no">SS No.:</label>
<input type="text" name="ss-no" id="ss-no" value="<?php echo $ss_no ?>">
</div>
</div>
<div id="street-1">
<div>
<label for="street">Street:</label>
<input type="text" name="street" id="street" value="<?php echo $street ?>">
</div>
<div>
<label for="street-no">No.:</label>
<input type="text" name="street-no" id="street-no" value="<?php echo $street_no ?>">
</div>
</div>
<div id="street-2">
<div>
<label for="postal-code-1">Postal Code:</label>
<input type="number" name="postal-code-1" id="postal-code-1" value="<?php echo $pc_1 ?>">
<label>-</label>
<input type="number" name="postal-code-2" id="postal-code-2" value="<?php echo $pc_2 ?>">
</div>
<div>
<label for="postal-city">City:</label>
<input type="text" name="postal-city" id="postal-city" value="<?php echo $post_city ?>">
</div>
</div>
<div id="pass">
<div>
<label for="pass-no">Pass No.:</label>
<input type="text" name="pass-no" id="pass-no" value="<?php echo $pass_no ?>">
</div>
<div>
<label for="pass-type">Type:</label>
<select name="pass-type" id="pass-type">
<option value=""></option>
<option value="<?php echo $pass_type ?>" selected><?php echo $pass_type ?></option>
<option value="7-d / 1-m">7-d / 1-m</option>
<option value="4-d / 1-m">4-d / 1-m</option>
<option value="5-d / 1-m">5-d / 1-m</option>
<option value="10-d / 2-m">10-d / 2-m</option>
<option value="15-d / 2-m">15-d / 2-m</option>
<option value="15 days">15 days</option>
<option value="22 days">22 days</option>
<option value="1 month">1 month</option>
<option value="2 months">2 months</option>
<option value="3 months">3 months</option>
</select>
</div>
<div>
<label for="pass-date">Exp. Date:</label>
<input type="date" name="pass-date" id="pass-date" value="<?php echo $exp_date ?>">
</div>
</div>
</div>
<input type="hidden" name="id" value="<?php echo $id ?>">
<div id="save">
<input type="submit" name="save-btn" id="save-btn" value="SAVE">
</div>
</div>
</form>
<footer>
<div>Developed by Ruben Rodrigues © 2023</div>
</footer>
<script src="script.js"></script>
<script>
const openModal = document.querySelector("#edit-btn");
const modal = document.querySelector(".modal");
const fade = document.querySelector("#fade");
const toggleModal = () => {
[modal, fade].forEach((el) => el.classList.toggle("hide"));
};
[openModal, fade].forEach((el) => {
el.addEventListener("click", () => toggleModal())
});
</script>
</body>
</html>
I have tried some help from YouTube, ChatGPT, some blog/articles, but nothing happens. The code I have only works if I do it in separeted files.
I though doing it as an iframe element, i.e., build in another file and import it through iframe. However, how can I pass the $traveler['id'] into the iframe?
