Send data back to a form for editing with Jquery and PHP

Question

I am attempting a beginner PHP project I found online, in which I must create a simple contact form with PHP: Simple Web Contact Form

I have a basic form that submits data to be displayed onto a second page. I'm trying to include the bonus functionalities, however, and I am struggling with setting up an Edit function. I want to have an 'Edit' button on the display page that submits the data back to the original form for editing. I've read that jQuery/AJAX is one way to do this, but I can't figure it out. Any suggestions? I've tried reading the jQuery docs, but I can't wrap my head around it.

Here's what I have so far...

Contact Form:

<?php 

$name = "";
$email = "";
$subject = "";
$message = "";

if ($_SERVER["REQUEST_METHOD"] == "POST")
{    
    $name = $_POST['name'];
    $email = $_POST['email'];
    $subject = $_POST['subject'];
    $message = $_POST['message'];
}

?>

<?php require 'header.php' ?>

        <div class="container">
            <h2>Contact Form</h2>
            <div class="contact">

                <form method="POST" action="display_form.php" class="form" id="formContact">

                    <div class="form-group">
                        <label for="name">Your Name</label>
                        <input class="form-control" name ="name" type="text" id="name" placeholder="Enter your name" value="<?= htmlspecialchars($name); ?>">
                    </div>

                    <div class="form-group">
                        <label for="email">Email Address</label>
                        <input class="form-control" name="email" type="email" id="email" placeholder="Enter your email" value="<?= htmlspecialchars($email); ?>">
                    </div>

                    <div class="input-group mb-3">
                        <div class="form-group" class="input-group-prepend">
                            <label class="input-group-text" for="subject">Subject</label>
                        </div>
                        <select class="custom-select" name="subject" id="subject">
                            <option  value="Query" selected="selected">Query</option>
                            <option  value="Feedback" selected="selected">Feedback</option>
                            <option  value="Complaint" selected="selected">Complaint</option>
                            <option  value="Other" selected="selected">Other</option>
                            <option  value="" selected="selected"></option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="message">Message</label>
                        <textarea class="form-control" name="message" id="summernote" placeholder="Your message"><?= htmlspecialchars($message); ?></textarea>
                    </div>

                    <input type="submit" value="Submit">

                </form>
        
            </div>
        </div>

<?php require 'footer.php' ?>

Display Page:

<?php

$name = $_POST['name'];
$email = $_POST['email'];
$subject = $_POST['subject'];
$message = $_POST['message'];

?>

<?php require 'header.php' ?>

<div class="container text-center">
    <h2>Contact Form</h2>
    
    
    <form class="container" method="POST" id="edit_form">
        
        <div class="row">
            <div class="h5 col-sm text-right">Name:</div>
            <div class="col-sm text-left" id="name"><?= $name ?></div>

        </div>
        
        <div class="row">
            <div class="h5 col-sm text-right">Email:</div>
           <div class="col-sm text-left" id="email"><?= $email ?></div>
        </div>

        <div class="row">
            <div class="h5 col-sm text-right">Subject:</div>
            <div class="col-sm text-left" id="subject"><?= $subject ?></div>
        </div>

        <div class="row">
            <div class="h5 col-sm text-right">Message:</div>
            <div class="col-sm text-justify" id="message"><?= $message ?></div>
        </div>

        <div>
            <a href="/contact_form.php" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Back</a>
            <a href="/contact_form.php" class="btn btn-secondary btn-lg active" id="edit_button" role="button" aria-pressed="true">Edit</a>
        </div>

    </form>

</div>

<?php require 'footer.php' ?>

And JS file:

$(document).ready(function() {
    $('#summernote').summernote();
  });

$("#formContact").validate({
    rules: {
        name: {
            required: true
        },
        email: {
            required: true,
            email: true
        },
        subject: {
            required: true
        },
        summernote: {
            required: true
        }
    }
});

$("#edit_button").on('click', function (e) {
    $.ajax({
        url: '/contact_form.php',
        type: 'POST',
        data : {
            name: 'name',
            email: 'email',
            subject: 'subject',
            message: 'message'
        },
        
    });
    
});

Answer 1

I was not able to figure out how to use jQuery for this solution, but it turns out, I didn't need it. I simply created another form with display:none, and used that to send the inputs back to the original page for editing. Thanks to RiggsFolly for pointing out my formatting error, and to greenjaed for finding the jQuery thread - it ultimately helped me think of this simple solution.

<form class="container" method="POST" id="edit_form" action="contact_form.php">

        <div style="display: none;">
            <input name ="name" id="name" value="<?= htmlspecialchars($name); ?>">
            <input name="email" id="email" value="<?= htmlspecialchars($email); ?>">
            <input name="subject" id="subject" value="<?= htmlspecialchars($subject); ?>">
            <input name="message" id="message" value="<?= htmlspecialchars($message); ?>">
        </div>

        <div>
            <a href="/contact_form.php" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Clear Form</a>
            <input type="submit" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true" value="Edit">
        </div>

    </form>