Search code examples
phpdrop-down-menuquery-stringauto-populate

How to auto populate a dropdown menu on a form page from clicking a link on a separate page using PHP


So I have two pages, one is the contact.php page which has the form inputs, etc. The other page is the index.php where I have the links that lead you to the contact.php page.

What I am trying to do is auto-populate my drop-down menu on my contact page after clicking one of the links on the index page. So say you click "Link A" then it should redirect you to the contact page with "Link A" selected in the drop-down menu.

I've tried using query strings in my URL ex: "URL?department=Shipping%20Department" and I believe I've been doing it right but since I'm not using GET for my form it doesn't work?

In the end, the form needs to be able to send an email after submitting which I have all figured out, it's just the auto-populate that has me stuck.

My assignment sheet says "You will also have a Contact Page that sends a query string to the Mail page to auto-populate the Department field"

Below is what I have so far for each page. Also, sorry in advance, this is my first PHP class so most of this is from lessons and it could be a simple mistake I'm not seeing.

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>

This is without all the html links with query strings.

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="[email protected]">
                </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>

Then I have my includes for mail and validation...

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

Solution

  • Please update links in index.php as bellow,

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

    and change the options in contact.php as follow,

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

    It should work if both files are in same directory.