Oh, This is the front end.
But you need backend.
You can use “PHP” implement form upload.
Only using javascript can not achieve form upload.
***.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>
demo.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>
You also need to specify whether to get or post.
You can ask me any questions.
I want to send all the input data acquired from a html form and show them (as a preview) in another html form.
My first html form:
<!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>
The 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);
}
My second html form:
<!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>
Now I want to fetch those values and write them in this new html form, how do I do that? Also, from the second html page I want to post the data into my php script.
