I'm trying to keep the data saved on the submit.html page. The data is being stored on localstorage, i want the entered data to be in the table for always whenever i visit that page. Currently it is visible on the time of submit event only. when i go back to submit.html page with another entry, the previous data was gone.
Here's the code:
1, index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="form.css" />
<title>Save Later</title>
</head>
<body>
<div class="alert"></div>
<form id="save-later-form" action="result.html" onsubmit="callme()" method="POST">
<h3>Simple Save Later Form</h3>
<label for="email"><b>Email</b></label>
<input type="text" id="Email" placeholder="Enter Email" name="email" required>
<div class="inline" style="display: flex; ">
<div style="display: flex; flex-direction: column;">
<label for="First name"><b>First name</b></label>
<input id="Firstname" type="text" placeholder="First name" name="First name" required>
</div>
<div style="display: flex; flex-direction: column; margin-left:320px;">
<label for="Last name"><b>Last name</b></label>
<input id="Lastname" type="text" placeholder="Last name" name="Last name" required>
</div>
</div>
<label for="Business"><b>Business</b></label>
<select id="Business" name="Business">
<option value="Food & Beverage">Food & Beverage</option>
<option value="Restaurants">Restaurants</option>
<option value="Pet Shops">Pet Shops</option>
<option value="Fashion Boutique">Fashion Boutique</option>
</select>
<label for="Description">Description</label>
<textarea name="Description" id="Description" placeholder="Describe yourself in 100 words"></textarea>
<button type="submit" id="submit">SUBMIT</button>
<button type="submit" id="save">SAVE</button>
</form>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
2, Index.JS
function getData() {
return JSON.parse(localStorage.getItem('data') || "[]");
}
function callme() {
const data = getData();
const obj = Object.assign(...["Email", "Firstname", "Business"].map(prop =>
({
[prop]: document.getElementById(prop).value
})));
localStorage.setItem('data', JSON.stringify(data.concat(obj)));
}
3, Result.html
<!DOCTYPE html>
<html>
<head>
<title>Detail Page</title>
</head>
<body>
<h1>User Detail Page</h1>
<div id="result-table">
<table border="1">
<tr>
<th>Email</td>
<th>Firstname</td>
<th>Lastname</th>
<th>Business</td>
<th>Description</td>
</tr>
<tr>
<td id="first"></td>
<td id="second"></td>
<td id="third"></td>
<td id="fourth"></td>
<td id="fifth"></td>
</tr>
</table>
<br>
</div>
<script>
window.onload = function() {
document.getElementById('first').innerText = localStorage.getItem('Email');
document.getElementById('second').innerText = localStorage.getItem('Firstname');
document.getElementById('third').innerText = localStorage.getItem('Lastname');
document.getElementById('fourth').innerText = localStorage.getItem('Business');
document.getElementById('fifth').innerText = localStorage.getItem('Description');
};
</script>
<form action="/index.html">
<button>Go Back</button>
</form>
</body>
</html>
I managed to save data to local storage as JSON, but cannot parse multiple data to Result page, currently if resubmitted, data would be overwritten rather than adding new to table. Please any help is appreciated
Result page:
You need to put everything in only one page, as follow:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> your title </title>
<style>
body {
font-family : Arial, Helvetica, sans-serif;
font-size : 16px;
}
body.onForm table,
body.onTable form { display: none }
label {
display : block;
margin-bottom : .2rem;
}
label b {
display : block;
font-size : .8rem;
}
label textarea {
width : 20rem;
height : 5rem;
}
table {
background-color: darkslategrey;
border-collapse : separate;
border-spacing : 1px;
margin : 1rem;
}
table caption {
padding : .4rem;
caption-side : bottom;
text-align : right;
}
th {
background-color : #7cc0e7;
padding : .2rem .3rem;
}
td {
background-color : white;
padding : .2rem .3rem;
}
</style>
</head>
<body class="onForm">
<form name="save-later-form">
<label>
<b>Email</b>
<input type="text" name="Email" placeholder="Enter Email"required value="">
</label>
<label>
<b>First name</b>
<input type="text" name="Firstname" placeholder="First name" required value="">
</label>
<label>
<b>Last name</b>
<input type="text" name="Lastname" placeholder="Last name" required value="">
</label>
<label>
<b>Business</b>
<select name="Business">
<option value="Food & Beverage" > Food & Beverage </option>
<option value="Restaurants" > Restaurants </option>
<option value="Pet Shops" > Pet Shops </option>
<option value="Fashion Boutique"> Fashion Boutique </option>
</select>
</label>
<label>
<b>Description</b>
<textarea name="Description" placeholder="Describe yourself in 100 words"></textarea>
</label>
<button type="reset" > reset </button>
<button type="submit"> Submit </button>
<button type="button" id="go-Table-Btn"> go 2 table </button>
</form>
<table id="t-business">
<caption><button id="go-form-Btn"> go 2 form</button></caption>
<thead>
<tr><th>Email</th><th>Firstname</th><th>Lastname</th><th>Business</th><th>Description</th></tr>
</thead>
<tbody></tbody>
</table>
</table>
<script>
const
saveLaterForm = document.forms['save-later-form']
, goTableBtn = document.querySelector('#go-Table-Btn')
, goFormBtn = document.querySelector('#go-form-Btn')
, ElmsOrder = ['Email','Firstname','Lastname','Business','Description']
, ls_business = JSON.parse( localStorage.getItem('ls_business') || '[]')
, tBusinessB = document.querySelector('#t-business tbody')
;
saveLaterForm.onsubmit = e =>
{
e.preventDefault()
let formInputs = Object.fromEntries( new FormData(saveLaterForm).entries() )
ls_business.push(formInputs)
addRow( formInputs )
localStorage.setItem('ls_business',JSON.stringify(ls_business))
document.body.classList.replace('onForm','onTable')
saveLaterForm.reset()
}
for (let lsRow of ls_business) addRow( lsRow )
function addRow( elms )
{
let row = tBusinessB.insertRow()
for (let elName of ElmsOrder) row.insertCell().textContent = elms[elName]
}
goTableBtn.onclick =_=> document.body.classList.replace('onForm','onTable')
goFormBtn.onclick =_=> document.body.classList.replace('onTable','onForm')
</script>
</body>
</html>
Related
i want something like this
Image form bootstrap
but i get this instead
Image on my localhost
And this is my code:
<input
type="password"
class="form-control"
placeholder="contraseña"
id="password-input"
aria-label="password input"
aria-describedby="password-input"
/>
<span class="input-group-text" id="password-input">#</span>
All the examples that i see in internet are the same, looks nice but i put the code in my proyect and don't work :(
Wrap your input and span tag with this way
<div class="input-group flex-nowrap">
<input type="password" class="form-control" placeholder="contraseña" id="password-input" aria-label="password input" aria-describedby="password-input" />
<span class="input-group-text" id="password-input">#</span>
</div>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
i {
cursor: pointer;
}
</style>
<body>
<div>
<!-- Password field -->
<label for="Password">Password:
<input type="password" class="border border-0" value="" id="myInput">
<!-- An element to toggle between password visibility -->
<i class="fa fa-eye" style="font-size:24px" onclick="myFunction()"></i>
</label>
</div>
<script>
function myFunction() {
var x = document.getElementById("myInput");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
</script>
</body>
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.
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 the button to change its background color only when the input text length is 10, when I hover over it.
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 class="details">
Organization:<div id="org"><input type="checkbox" id="cb1" >ID no: <input type="number" id="org_number" style="visibility: hidden"><br><br>
<input type="checkbox" id="cb2" >Mobile No: <input type="tel" id="ph_number" style="visibility: hidden" required></div><br><br>
</form>
<button id="button" onmouseover="hovar()">Register</button>
<script src="back_end.js" async></script>
</body>
</html>
css:
#button{
font-size:20px;
margin-left: 600px;
border-radius: 8px;
}
#button:hover{
background-color: lightsalmon;
color: aquamarine;
}
javascript:
function hovar(){
var phone=document.getElementById("ph_number").value;
var btn=document.getElementById("button");
if (phone.length!=10){
btn.onmouseover.style.backgroundColor="lightsalmon"
}
else{
btn.onmouseover.style.backgroundColor="chartreuse"
btn.onmouseover.style.color="black"
}
}
But I keep getting this error in the javascript:
**Uncaught TypeError: Cannot set property 'backgroundColor' of undefined**
What am I doing wrong here?
you want to apply a "style" property to an event (onmouseover)
function hovar()
{
var phone = document.getElementById("ph_number").value;
var btn = document.getElementById("button");
if (phone.length!=10)
{
btn.style.backgroundColor="lightsalmon" // remove onmouseover
}
else
{
btn.style.backgroundColor="chartreuse"
btn.style.color="black"
}
}
I think this is what you are looking for (?):
const phone = document.getElementById("ph_number")
, btn = document.getElementById("button")
;
phone.oninput = () =>
{
if (phone.value.length != 10)
{
btn.style.setProperty('--hoverBG', 'lightsalmon')
btn.style.setProperty('--hoberColor', 'aquamarine')
}
else
{
btn.style.setProperty('--hoverBG', 'chartreuse')
btn.style.setProperty('--hoberColor', 'black')
}
}
#button {
--hoverBG : lightsalmon;
--hoberColor : aquamarine;
font-size : 20px;
margin-left : 50px;
border-radius : 8px;
}
#button:hover{
background-color : var(--hoverBG);
color : var(--hoberColor);
}
input[type="checkbox"] + label + input {
visibility: hidden;
}
input[type="checkbox"]:checked + label + input {
visibility: visible;
}
<h2>Cafeteria registration</h2>
<form class="details">
Organization:
<div id="org">
<input type="checkbox" id="cb1">
<label for="cb1">ID no : </label>
<input type="number" id="org_number" >
<br><br>
<input type="checkbox" id="cb2">
<label for="cb2">Mobile No: </label>
<input type="tel" id="ph_number" placeholder="phone 10c">
</div>
<br><br>
</form>
<button id="button">Register</button>
The issue I am having is trying to save user input from a form into a JSON dictionary. The HTML code for my form is as follows:
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<script src="store.js" type="text/javascript"></script>
</head>
<body>
<form action="cgi-bin/formmail.pl" method="post">
Name: <input id="name" type="text" name="name" value="" size="25" maxlength="50" />
<br/>
<br/>
Date: <input id="date" type="date" name="date" value="" size="25" maxlength="50" />
<br/>
<br/>
Location: <input id="location" type="text" name="location" value="" size="25" maxlength="50" />
<br/>
<br/>
Category: <select id="category"><option value="landscape">Landscape</option>
<option value="portrait">Portrait</option>
<option value="conceptual">Conceptual</option>
<option value="street">Street</option>
<option value="fine art">Fine Art</option>
<option value="people">People</option>
<option value="abstract">Abstract</option>
<option value="nature">Nature</option>
<option value="architecture">Architecture</option>
<option value="flower">Flower</option>
<option value="general">General</option>
<option value="animal">Animal</option>
<option value="children">Children</option>
</select>
<br/>
<br/>
<input type="button" value="Change details" onclick="insert();" />
</form>
<div id="display"> </div>
</body>
</html>
I was previously using a JS function like this:
function insert() {
var nameinput = document.getElementById("name").value;
var dateinput = document.getElementById("date").value;
var locationinput = document.getElementById("location").value;
var category = document.getElementById("category").value;
var messageBox = document.getElementById("display");
var details = [nameinput, dateinput, locationinput,category];
messageBox.innerHTML="Name: " + details[0]+"<br/>"+"Date: " + details[1]+"<br/>"+ "Location: " + details[2]+"<br/>" + "Category: " + details[3];
}
Does anyone know any tips on how I can accomplish this? Thanks for the help!
You can use serializeArray()
Example:
https://jsbin.com/fokuqaw/edit?html,output
Bye ^.^
I have made code for auto generated text boxes in an HTML growing table. I want to save values from these text boxes to a mysql database using netbeans but I don't know how I get the ids of each text box while they are auto generating..
My code is here..please help me if there is any solution for this problem..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Tue, 24 Mar 2015 06:41:28 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
var rowCount = 1;
function addMoreRows(frm) {
rowCount ++;
var recRow = '<p id="rowCount'+rowCount+'"><tr><td><input name="name" type="text" size="17%" maxlength="120" /></td><td><input name="email" type="text" maxlength="120" style="margin: 4px 5px 0 5px;"/></td><td><input name="mobile" type="text" maxlength="120" style="margin: 4px 10px 0 0px;"/></td></tr> <img src="./image/close.png" /></p>';
jQuery('#addedRows').append(recRow);
}
function removeRow(removeNum) {
jQuery('#rowCount'+removeNum).remove();
}
</script>
</head>
<body>
<table rules="all" style="background:#fff;">
<tr>
<td style="font-size:14px;" >Name</td>
<td style="font-size:14px;">Email</td>
<td style="font-size:14px;">Mobile</td>
<td><span style="font:normal 12px agency, arial; color:blue; text-decoration:underline; cursor:pointer;" onclick="addMoreRows(this.form);">
<img style=" padding-left: 12px;" src="./image/add.png" />
</span>
</td>
</tr>
<form action="" method="POST">
<tr id="rowId">
<td><input type="text" name="name" size="17%"/></td>
<td><input type="text" name="email" /></td>
<td><input type="text" name="mobile" /></td>
</form>
</table>
<div id="addedRows"></div>
</td>
</tr>
<td><input type="submit"></td>
</table>
</body>
</html>