我正在为我和我的朋友开发一个小型的 Interrail Planner。 目前，我正在尝试创建一个模式来编辑/更新旅行者信息。
首先，我把它放在一个单独的文件中。 工作流程：
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).
现在，我希望它看起来像模态。我试过了，但是没成功。
pass.php 文件：
<?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>
我尝试了 YouTube、ChatGPT、一些博客/文章的一些帮助，但没有任何反应。 我的代码只有在单独的文件中执行时才有效。
我虽然将其作为 iframe 元素进行，即构建另一个文件并通过 iframe 导入它。但是，如何将 $traveler['id'] 传递到 iframe 中？
首先，我注意到您的代码中出现了一些坏习惯。例如：
$sql = "SELECT * FROM travelers WHERE id=$id";
$result = $conn->query($sql);
您的代码很容易受到 SQL 注入攻击。我宁愿使用 SQL 准备，然后使用 bindParam，如下所示：
$sql = "SELECT * FROM travelers WHERE id= :id";
$sql = $conn->prepare($sql);
$sql->bindParam(":id",$id);
$result = $sql->execute()->fetch(); //Only fetching one line
甚至更好：
$sql = "SELECT * FROM travelers WHERE id= ?";
$sql = $conn->prepare($sql);
$result = $sql->execute([$id])->fetch(); //Only fetching one line
有多种方法可以做到这一点，但是永远不要相信用户的输入！
其次，不要使用：
"<?php echo $street ?>" //(Plus there is an error because you forgot the ";")
只需使用 php 标签：
"<?= $street ?>"
而且你不应该使用这种方法:
<?php //Some code...
echo "<div>
$variable
</div>";
//Some code
?>
但是：
<?php //Some code... ?>
<div>
<?= $variable ?>
</div>
<?php //Some code ?>
虽然理论上这两种方法都会得到相同的结果，但第一种方法确实不方便阅读，应该避免。良好的 PHP 代码总是易于阅读，因为该语言是为其构建的。
这样做会让你的代码更加干净和清晰。这样您和我们就能更容易地发现错误。
对于您关于 iframe 的问题，就像在浏览器上打开一个新选项卡一样。这是一个完全不同的 PHP 脚本，正在运行新的 HTTP 请求。
您可以通过 GET 方法或 POST 传递它来共享它。您还可以使用 $_SESSION 来共享值。
但是我有很多问题要问你: