使用 Jquery 和 PHP 將數據發送回表單以進行編輯

Question

我正在嘗試我在網上找到的初學者 PHP 項目，其中我必須使用 PHP 創建一個簡單的聯系表： 簡單 Web 聯系表

我有一個基本表單，可以提交要顯示到第二頁的數據。 但是，我正在嘗試包含獎勵功能，並且正在努力設置編輯 function。 我想在顯示頁面上有一個“編輯”按鈕，將數據提交回原始表單進行編輯。 我讀過 jQuery/AJAX 是做到這一點的一種方法，但我無法弄清楚。 有什么建議么？ 我試過閱讀 jQuery 文檔，但我無法理解它。

這是我到目前為止所擁有的...

聯系表：

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

顯示頁面：

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

和 JS 文件：

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

我無法弄清楚如何將 jQuery 用於此解決方案，但事實證明，我不需要它。 我只是創建了另一個帶有 display:none 的表單，並使用它將輸入發送回原始頁面進行編輯。 感謝 RiggsFolly 指出我的格式錯誤，感謝 greenjaed 找到 jQuery 線程 - 它最終幫助我想到了這個簡單的解決方案。

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