时间戳

首页 > 解决方案 > 如何将一组帖子数据从一个 html 表单发送到另一个？

html - 如何将一组帖子数据从一个 html 表单发送到另一个？

问题描述

我想发送从表单获取的所有输入数据html并以另一种形式显示它们（作为预览）html。

我的第一个 html 表单：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cafteria details</title>
    <link rel="stylesheet" href="styles.css">
   
        
</head>
<body>
    <h2>Cafeteria registration</h2>
    <form id="details" method="POST">
        Full name: <input type="text" id="name" size=25 "><br><br>
        Organization:<div id="org"><input type="checkbox" id="cb1" onclick="check()">ID no: <input type="number" id="org_number" style="visibility: hidden"><br><br>
                     <input type="checkbox" id="cb2" onclick="check()">Mobile No: <input type="tel" id="ph_number" style="visibility: hidden" required></div><br><br>
        
        E-mail: <input type="email" id="email" size=25><br><br>
        Upload ID Card: <input type="file" accept=".jpeg , .png" id="img"><br><br>
        
    </form>
    <button id="button" style="background-color: whitesmoke" onclick="submit()" >Register</button>
    <script src="back_end.js" async></script>
</body>
</html>

javascript (back_end.js)

var btn=document.getElementById("button");
function submit(){
var file = document.getElementById("img").files[0];
        const reader = new FileReader();
        reader.addEventListener("load", (event) => {
            localStorage.setItem("Image", event.target.result);

            const dForm = document.getElementById('details');          
            dForm.addEventListener('submit', function(e) {
                e.preventDefault();
                fetch("preview.html", {
                    method: 'post',
                    mode: 'cors',
                    headers: {'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*', 
                              'Access-Control-Allow-Methods': 'GET, POST, HEAD, OPTIONS'},
                    body: JSON.stringify({
                        full_name: document.getElementById("name").value, 
                        mobile: document.getElementById("ph_number").value,
                        Email: document.getElementById("email").value,
                        image: localStorage.getItem('Image'),
                        id: document.getElementById("org_number").value
                    })
                }).then(function (response){
                    return response.text();
                }).then(function (text){
                    console.log(text);
                }).catch(function (error){
                    console.error(error);
                })
            });
            window.location.href = "preview.html";
        });
        reader.readAsDataURL(file);
}

我的第二个html表单：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Preview</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="preview_back_end.js"async></script>
    <link rel="stylesheet" href="preview_styles.css">
</head>
<body>
    <h2>Please finalize your details</h2>
    <form id="details" method="post" class="form">

        Full name: <strong name="name_1" value=""></strong><br><br>
        ID No:<strong name="org_number_1" value=""></strong><br><br>
        Mobile No:<strong name="ph_number_1" value=""></strong><br><br>
        
        E-mail: <strong name="email_1"></strong><br><br>
        ID Card: <img src="" alt="preview" name="image" style="width: 100px; height: 100px;" value=""><br><br>

        <button id="go" style="background-color: whitesmoke">It's correct</button>
        
    </form>
    <button id="back" style="background-color: whitesmoke" onclick="goback()">Something's wrong</button>
    <p id="response"></p>
</body>
</html>

现在我想获取这些值并将它们写入这个新的 html 表单，我该怎么做？另外，从第二个 html 页面我想post将数据放入我的php脚本中。

标签： htmlfetch

解决方案

哦，这是前端。但是你需要后端。

您可以使用“PHP”实现表单上传。仅使用javascript无法实现表单上传。

***.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cafteria details</title>
    <link rel="stylesheet" href="styles.css">
   
        
</head>
<body>
    <h2>Cafeteria registration</h2>
    <form id="details" method="POST" action="demo.php">
        Full name: <input type="text" id="name" size=25 " name="fullname"><br><br>
        Organization:<div id="org"><input type="checkbox" id="cb1" onclick="check()" name="org">ID no: <input type="number" id="org_number" style="visibility: hidden" name="id"><br><br>
                     <input type="checkbox" id="cb2" onclick="check()">Mobile No: <input type="tel" id="ph_number" style="visibility: hidden" required name="mobile"></div><br><br>
        
        E-mail: <input type="email" id="email" size=25 name="email"><br><br>
        Upload ID Card: <input type="file" accept=".jpeg , .png" id="img" name="idcard"><br><br>
        
    </form>
    <button id="button" style="background-color: whitesmoke" onclick="submit()" >Register</button>
    <script src="back_end.js" async></script>
</body>
</html>

演示.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Preview</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="preview_back_end.js"async></script>
    <link rel="stylesheet" href="preview_styles.css">
</head>
<body>
    <h2>Please finalize your details</h2>
    <form id="details" method="post" class="form">

        Full name: <strong name="name_1" value=""><?php echo $_POST["fullname"]; ?></strong><br><br>
        ID No:<strong name="org_number_1" value=""><?php echo $_POST["id"] ?></strong><br><br>
        Mobile No:<strong name="ph_number_1" value=""><?php echo $_POST["mobile"] ?></strong><br><br>
        
        E-mail: <strong name="email_1"><?php echo $_POST["email"]; ?></strong><br><br>
        ID Card: <img src="<?php echo $_POST["idcard"]; ?>" alt="preview" name="image" style="width: 100px; height: 100px;" value=""><br><br>

        <button id="go" style="background-color: whitesmoke">It's correct</button>
        
    </form>
    <button id="back" style="background-color: whitesmoke" onclick="goback()">Something's wrong</button>
    <p id="response"></p>
</body>
</html>

您还需要指定是获取还是发布。

你可以问我任何问题。

推荐阅读