如何通过使用 PHP 在单独页面上单击 link 来自动填充表单页面上的下拉菜单
How to auto populate a dropdown menu on a form page from clicking a link on a separate page using PHP
所以我有两个页面,一个是 contact.php 页面,其中包含表单输入等。另一个页面是 index.php,我在其中提供了指向 contact.php 页。
我想做的是在单击索引页面上的一个链接后自动填充我的联系人页面上的下拉菜单。所以假设您单击 "Link A" 然后它应该将您重定向到在下拉菜单中选择 "Link A" 的联系人页面。
我已经尝试在我的 URL ex: "URL?department=Shipping%20Department" 中使用查询字符串,我相信我做的是对的,但是因为我没有为我的表单使用 GET 它没有'不工作?
最后,表单需要能够在提交后发送一封电子邮件,我已经弄明白了,只是自动填充让我卡住了。
我的作业 sheet 说 "You will also have a Contact Page that sends a query string to the Mail page to auto-populate the Department field"
以下是我目前对每一页的了解。
另外,提前抱歉,这是我的第一个 PHP class,所以大部分内容来自课程,这可能是一个我没有看到的简单错误。
Index.php
<?php
include('includes/validate.php');
include('includes/mail.php');
?>
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.form-send {
width: 100%;
max-width: 400px;
padding: 15px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<h1>Contact Us</h1>
<a href="contact.php">Shipping Department</a>
<br/><br/>
<a href="contact.php">Billing Inquiries</a>
<br/><br/>
<a href="contact.php">Party Planning Committee</a>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
这没有所有带有查询字符串的 html 链接。
Contact.php
<?php
include('includes/validate.php');
include('includes/mail.php');
$hasMailErrors = false;
$hasFormErrors = false;
$isSentMail = false;
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$reply_to_email = validate_email($_POST['email']);
$reply_to_name = validate_string($_POST['name']);
$department = validate_string($_POST['department']);
$message_subject = validate_string($_POST['message-subject']);
$message_body = validate_string($_POST['message-body']);
if ($reply_to_email != false &&
$reply_to_name != false &&
$department != false &&
$message_subject != false &&
$message_body != false) {
$isSentMail = send_custom_mail (
$reply_to_email,
$reply_to_name,
$department,
$message_subject,
"To Whom It May Concern, <br/> <br/>"
.$message_body.
"<br/> <br/> Sincerely, <br/> <br/>"
.$reply_to_name."<br>".$reply_to_email
);
if ($isSentMail) {
$hasMailErrors = true;
}
} else {
$hasFormErrors = true;
}
//validate
}
?>
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.form-send {
width: 100%;
max-width: 400px;
padding: 15px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<div class="text-center">
<?php if (!$isSentMail) {?>
<form class="form-send" method='post' action='<?php echo $_SERVER['PHP_SELF']; ?>'>
<?php if ($hasFormErrors) { ?>
<div class="alert alert-danger" role="alert">
There was an error with the form
</div>
<?php } ?>
<div class="form-input">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" name="name" placeholder="name">
</div>
<div class="form-input">
<label for="email-field">Email address</label>
<input type="email" class="form-control" id="email-field" name="email" placeholder="name@example.com">
</div>
<div class="form-input">
<label for="department">Department</label>
<select name="department" class="form-control" id="department">
<option selected="selected" value="Shipping Department">Shipping Department</option>
<option selected="selected" value="Billing Inquiries">Billing Inquiries</option>
<option selected="selected" value="Party Planning Committee">Party Planning Committee</option>
</select>
</div>
<div class="form-input">
<label for="subject">Subject</label>
<input type="text" class="form-control" id="subject" name="message-subject" placeholder="subject">
</div>
<div class="form-input">
<label for="message-body">Enter Message Below</label>
<textarea name="message-body" class="form-control" id="message-body" rows="3" placeholder="enter your message"></textarea>
</div>
<button class="submit-button" type="submit">Send</button>
</form>
<?php } else { ?>
<h1>Thank you!</h1>
<?php } ?>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
然后我有用于邮件和验证的包含...
Mail.php
<?php
require __DIR__.'/../vendor/autoload.php';
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;
function send_custom_mail($reply_to_email, $reply_to_name, $department, $subject, $message_body) {
$gmail_username = "";
$gmail_password = "";
$gmail_name = "";
$mailDebug = false;
$mail = new PHPMailer();
$mail->CharSet = "utf-8";
$mail->IsSMTP();
$mail->SMTPAuth = true;
$mail->Username = $gmail_username;
$mail->Password = $gmail_password;
$mail->SMTPSecure = "tls";
if ($mailDebug) {
$mail ->SMTPDebug = 2;
}
$mail->Host ="smtp.gmail.com";
$mail->Port = "587";
$mail->From = $gmail_username;
$mail->FromName = $reply_to_name;
$mail->AddReplyTo($reply_to_email, $reply_to_name);
$mail->AddAddress($gmail_username, $gmail_name);
$mail->IsHTML(true);
$mail->Subject = $department.' - '.$subject;
$mail->Body = $message_body;
if ($mail->Send()) {
return true;
} else {
if ($mailDebug) {
echo $mail->ErrorInfo;
}
return false;
}
}
Validate.php
<?php
function validate_email($email) {
$email = filter_var($email, FILTER_SANITIZE_EMAIL);
$email = filter_var($email, FILTER_VALIDATE_EMAIL);
return $email;
}
function validate_string($string) {
$string = filter_var($string, FILTER_SANITIZE_STRING);
if ($string === "") {
return false;
}
return $string;
}
请更新 index.php 中的链接,如下所示,
<a href="contact.php?department=Shipping Department">Shipping Department</a>
<a href="contact.php?department=Billing Inquiries">Billing Inquiries</a>
<a href="contact.php?department=Party Planning Committee">Party Planning Committee</a>
并如下更改 contact.php 中的选项,
<?php $department = isset($_GET['department']) ? $_GET['department'] : "Shipping Departmen"; ?>
<option <?php if ($department == "Shipping Department"): ?>selected="selected"<?php endif; ?> value="Shipping Department">Shipping Department</option>
<option <?php if ($department == "Billing Inquiries"): ?>selected="selected"<?php endif; ?> value="Billing Inquiries">Billing Inquiries</option>
<option <?php if ($department == "Party Planning Committee"): ?>selected="selected"<?php endif; ?> value="Party Planning Committee">Party Planning Committee</option>
如果两个文件都在同一目录中,它应该可以工作。
如果您像这样更改 index
页面上的 HTML:
<a href="contact.php?department=shipping">Shipping Department</a>
<a href="contact.php?department=billing">Billing Inquiries</a>
<a href="contact.php?department=planning">Party Planning Committee</a>
然后,在 contact
页面上更改 select
元素的结构,如下所示:
<select name="department" class="form-control" id="department">
<option value='error' selected hidden disabled>Please select
<?php
/* possible departments that might be selected by clicking hyperlink elsewhere */
$departments=[
'shipping' => 'Shipping Departmen',
'billing' => 'Billing Inquiries',
'planning' => 'Party Planning Committee'
];
/* filter querystring variable, remove junk and force lowercase */
$department=strtolower( trim( urldecode( filter_input( INPUT_GET, 'department', FILTER_SANITIZE_STRING ) ) ) );
/*
process all the departments and add an `option` to the `select` menu
- identifying if it is selected or not in the process.
*/
foreach( $departments as $key => $value ){
$selected = ( $department && $key === $department ) ? ' selected' : '';
printf('<option value="%1$s"%2$s>%1$s', $value, $selected );
}
?>
</select>
通过将 selected hidden disabled
添加到 select
菜单中的初始 option
,您可以确保用户看到菜单并且必须从中选择一个选项,而不是依赖于默认选择菜单中的第一个选项。如果用户修改查询字符串变量的值没有出现在 departments 数组的键中,那么这个 Please Select
将再次显示并且 error
的值将被 POSTed如果表单已提交。
一点:不要使用 $_SERVER['PHP_SELF']
作为表单操作 - 如果脚本是 POST 自身,则完全省略操作,因为 $_SERVER['PHP_SELF']
容易被劫持。
所以我有两个页面,一个是 contact.php 页面,其中包含表单输入等。另一个页面是 index.php,我在其中提供了指向 contact.php 页。
我想做的是在单击索引页面上的一个链接后自动填充我的联系人页面上的下拉菜单。所以假设您单击 "Link A" 然后它应该将您重定向到在下拉菜单中选择 "Link A" 的联系人页面。
我已经尝试在我的 URL ex: "URL?department=Shipping%20Department" 中使用查询字符串,我相信我做的是对的,但是因为我没有为我的表单使用 GET 它没有'不工作?
最后,表单需要能够在提交后发送一封电子邮件,我已经弄明白了,只是自动填充让我卡住了。
我的作业 sheet 说 "You will also have a Contact Page that sends a query string to the Mail page to auto-populate the Department field"
以下是我目前对每一页的了解。 另外,提前抱歉,这是我的第一个 PHP class,所以大部分内容来自课程,这可能是一个我没有看到的简单错误。
Index.php
<?php
include('includes/validate.php');
include('includes/mail.php');
?>
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.form-send {
width: 100%;
max-width: 400px;
padding: 15px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<h1>Contact Us</h1>
<a href="contact.php">Shipping Department</a>
<br/><br/>
<a href="contact.php">Billing Inquiries</a>
<br/><br/>
<a href="contact.php">Party Planning Committee</a>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
这没有所有带有查询字符串的 html 链接。
Contact.php
<?php
include('includes/validate.php');
include('includes/mail.php');
$hasMailErrors = false;
$hasFormErrors = false;
$isSentMail = false;
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$reply_to_email = validate_email($_POST['email']);
$reply_to_name = validate_string($_POST['name']);
$department = validate_string($_POST['department']);
$message_subject = validate_string($_POST['message-subject']);
$message_body = validate_string($_POST['message-body']);
if ($reply_to_email != false &&
$reply_to_name != false &&
$department != false &&
$message_subject != false &&
$message_body != false) {
$isSentMail = send_custom_mail (
$reply_to_email,
$reply_to_name,
$department,
$message_subject,
"To Whom It May Concern, <br/> <br/>"
.$message_body.
"<br/> <br/> Sincerely, <br/> <br/>"
.$reply_to_name."<br>".$reply_to_email
);
if ($isSentMail) {
$hasMailErrors = true;
}
} else {
$hasFormErrors = true;
}
//validate
}
?>
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.form-send {
width: 100%;
max-width: 400px;
padding: 15px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<div class="text-center">
<?php if (!$isSentMail) {?>
<form class="form-send" method='post' action='<?php echo $_SERVER['PHP_SELF']; ?>'>
<?php if ($hasFormErrors) { ?>
<div class="alert alert-danger" role="alert">
There was an error with the form
</div>
<?php } ?>
<div class="form-input">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" name="name" placeholder="name">
</div>
<div class="form-input">
<label for="email-field">Email address</label>
<input type="email" class="form-control" id="email-field" name="email" placeholder="name@example.com">
</div>
<div class="form-input">
<label for="department">Department</label>
<select name="department" class="form-control" id="department">
<option selected="selected" value="Shipping Department">Shipping Department</option>
<option selected="selected" value="Billing Inquiries">Billing Inquiries</option>
<option selected="selected" value="Party Planning Committee">Party Planning Committee</option>
</select>
</div>
<div class="form-input">
<label for="subject">Subject</label>
<input type="text" class="form-control" id="subject" name="message-subject" placeholder="subject">
</div>
<div class="form-input">
<label for="message-body">Enter Message Below</label>
<textarea name="message-body" class="form-control" id="message-body" rows="3" placeholder="enter your message"></textarea>
</div>
<button class="submit-button" type="submit">Send</button>
</form>
<?php } else { ?>
<h1>Thank you!</h1>
<?php } ?>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
然后我有用于邮件和验证的包含...
Mail.php
<?php
require __DIR__.'/../vendor/autoload.php';
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;
function send_custom_mail($reply_to_email, $reply_to_name, $department, $subject, $message_body) {
$gmail_username = "";
$gmail_password = "";
$gmail_name = "";
$mailDebug = false;
$mail = new PHPMailer();
$mail->CharSet = "utf-8";
$mail->IsSMTP();
$mail->SMTPAuth = true;
$mail->Username = $gmail_username;
$mail->Password = $gmail_password;
$mail->SMTPSecure = "tls";
if ($mailDebug) {
$mail ->SMTPDebug = 2;
}
$mail->Host ="smtp.gmail.com";
$mail->Port = "587";
$mail->From = $gmail_username;
$mail->FromName = $reply_to_name;
$mail->AddReplyTo($reply_to_email, $reply_to_name);
$mail->AddAddress($gmail_username, $gmail_name);
$mail->IsHTML(true);
$mail->Subject = $department.' - '.$subject;
$mail->Body = $message_body;
if ($mail->Send()) {
return true;
} else {
if ($mailDebug) {
echo $mail->ErrorInfo;
}
return false;
}
}
Validate.php
<?php
function validate_email($email) {
$email = filter_var($email, FILTER_SANITIZE_EMAIL);
$email = filter_var($email, FILTER_VALIDATE_EMAIL);
return $email;
}
function validate_string($string) {
$string = filter_var($string, FILTER_SANITIZE_STRING);
if ($string === "") {
return false;
}
return $string;
}
请更新 index.php 中的链接,如下所示,
<a href="contact.php?department=Shipping Department">Shipping Department</a>
<a href="contact.php?department=Billing Inquiries">Billing Inquiries</a>
<a href="contact.php?department=Party Planning Committee">Party Planning Committee</a>
并如下更改 contact.php 中的选项,
<?php $department = isset($_GET['department']) ? $_GET['department'] : "Shipping Departmen"; ?>
<option <?php if ($department == "Shipping Department"): ?>selected="selected"<?php endif; ?> value="Shipping Department">Shipping Department</option>
<option <?php if ($department == "Billing Inquiries"): ?>selected="selected"<?php endif; ?> value="Billing Inquiries">Billing Inquiries</option>
<option <?php if ($department == "Party Planning Committee"): ?>selected="selected"<?php endif; ?> value="Party Planning Committee">Party Planning Committee</option>
如果两个文件都在同一目录中,它应该可以工作。
如果您像这样更改 index
页面上的 HTML:
<a href="contact.php?department=shipping">Shipping Department</a>
<a href="contact.php?department=billing">Billing Inquiries</a>
<a href="contact.php?department=planning">Party Planning Committee</a>
然后,在 contact
页面上更改 select
元素的结构,如下所示:
<select name="department" class="form-control" id="department">
<option value='error' selected hidden disabled>Please select
<?php
/* possible departments that might be selected by clicking hyperlink elsewhere */
$departments=[
'shipping' => 'Shipping Departmen',
'billing' => 'Billing Inquiries',
'planning' => 'Party Planning Committee'
];
/* filter querystring variable, remove junk and force lowercase */
$department=strtolower( trim( urldecode( filter_input( INPUT_GET, 'department', FILTER_SANITIZE_STRING ) ) ) );
/*
process all the departments and add an `option` to the `select` menu
- identifying if it is selected or not in the process.
*/
foreach( $departments as $key => $value ){
$selected = ( $department && $key === $department ) ? ' selected' : '';
printf('<option value="%1$s"%2$s>%1$s', $value, $selected );
}
?>
</select>
通过将 selected hidden disabled
添加到 select
菜单中的初始 option
,您可以确保用户看到菜单并且必须从中选择一个选项,而不是依赖于默认选择菜单中的第一个选项。如果用户修改查询字符串变量的值没有出现在 departments 数组的键中,那么这个 Please Select
将再次显示并且 error
的值将被 POSTed如果表单已提交。
一点:不要使用 $_SERVER['PHP_SELF']
作为表单操作 - 如果脚本是 POST 自身,则完全省略操作,因为 $_SERVER['PHP_SELF']
容易被劫持。