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 ^.^
Related
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>
I'm doing a contact form with validation via JS using jquery. In the form all fields are validated besides the tag. How can I validate this?
See code below to see how the others have been validated.
var date = $("#date").val();
var time = $("#time").val();
if (date == "") {
$("#date-info").html(" *");
$("#date") // .css('border', '#e66262 1px solid');
valid = false;
}
if (time == "") {
$("#time-info").html(" *");
$("#time") // .css('border', '#e66262 1px solid');
valid = false;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="column" id='column1'>
<div class="txtb">
<label>Prefered Date</label><span id="date-info" class="info"></span><br /> <input type="date" class="input-field" name="date" id="date" />
</div>
</div>
<div class="column" id='column2'>
<div class="txtb">
<label>Prefered Time</label><span id="time-info" class="info"></span><br />
<select class="input-field" name="time" id="time">
<option value="Morning">Morning: 9am - 12pm</option>
<option value="Afternoon">Afternoon: 12pm - 5pm</option>
<option value="Evening">Evening: 5pm - 9pm</option>
</select>
</div>
</div>
</div>
You can use the following code snippet:
<form>
<label>Prefered Time</label><span id="time-info" class="info"></span><br />
<select class="input-field" name="time" id="time" required>
<option value="">None</option>
<option value="Morning">Morning: 9am - 12pm</option>
<option value="Afternoon">Afternoon: 12pm - 5pm</option>
<option value="Evening">Evening: 5pm - 9pm</option>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
While clicking on the submit button will trigger the validation. Use the following 'required' class attribute.
<select id="select" class="required">
I am new to HTML and I am wondering how do I convert the form inputs into a table?
I created a display button, so that when I click on it, the information submitted by a user will be displayed in a table.
<html>
<style>
</style>
<body>
<p> Please insert the following information for your Gym Membership.</p>
<form>
<br>
<label for="name">Name:</label>
<input type="text" id="name">
<br><br>
<label for="age">Age (between 18-60):</label>
<input type="number" id="age" min="18" max="60"><br><br>
<label for="cars">Select your height (feet and inches):</label>
<select id="feet">
<option value="4">4'</option>
<option value="5">5'</option>
<option value="6">6'</option>
</select>
<select id="inches">
<option value="1">1"</option>
<option value="2">2"</option>
<option value="3">3"</option>
<option value="4">4"</option>
<option value="5">5"</option>
<option value="6">6"</option>
<option value="7">7"</option>
<option value="8">8"</option>
<option value="9">9"</option>
<option value="10">10"</option>
<option value="11">11"</option>
</select>
<br>
<br>
<input type="reset" value="Reset">
<input type="submit" value="Display">
</form>
</body>
</html>
It's mandatory to add some javascript to it.
Since you're new to HTML/javascript, I modified your snippet of code to meet your needs.
HTML :
<html>
<style>
</style>
<b>
<p> Please insert the following information for your Gym Membership.</p>
<form action="#" method="post" name="form_name" id="form_id" class="form_class" >
<br>
<label for="name">Name:</label>
<input type="text" id="name">
<br><br>
<label for="age">Age (between 18-60):</label>
<input type="number" id="age" min="18" max="60"><br><br>
<label for="cars">Select your height (feet and inches):</label>
<select id="feet">
<option value="4">4'</option>
<option value="5">5'</option>
<option value="6">6'</option>
</select>
<select id="inches">
<option value="1">1"</option>
<option value="2">2"</option>
<option value="3">3"</option>
<option value="4">4"</option>
<option value="5">5"</option>
<option value="6">6"</option>
<option value="7">7"</option>
<option value="8">8"</option>
<option value="9">9"</option>
<option value="10">10"</option>
<option value="11">11"</option>
</select>
<br>
<br>
<input type="reset" value="Reset">
<input type="button" Value="submit" onclick="Display()">
</form>
</b>
</html>
<div id="table" style="display:none;" class="answer_list" > <table id="myTable">
</table></div>
Javascript :
function Display()
{
document.getElementById('table').style.display = "block";
var table = document.getElementById("myTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = document.getElementById("name").value;
cell2.innerHTML = document.getElementById("age").value;
cell3.innerHTML = document.getElementById("feet").value+"," +document.getElementById("inches").value;
}
or you can find it in the link below, it works fine :
https://codepen.io/iliass-coder/pen/jOPBbdz
Take some time to read it and understand what I did. and try to add some CSS, it's a bit ugly for the moment.
I have a HTML like this:
<div class="search">
<input type="text" id="search_text" name="search_text" placeholder="Search by Name ...">
<select>
<option>Filter</option>
<option>By date</option>
<option>By size</option>
</select>
From: <input type="date" id="start_date" name="start_date">
To: <input type="date" id="end_date" name="end_date">
Size:<input type="text" id="size" name="size" placeholder="size">
<input type="submit" onclick="return search()" value="Search">
</div>
I want to show From: and To: only when By date is selected in filter and I want to show "Size" only when By size is selected in filter.
OK, I made an exception and did the coding for you!
Here's a jQuery solution:
Working example: http://jsfiddle.net/khRjq/
<div class="search">
<input type="text" id="search_text" name="search_text" placeholder="Search by Name ...">
<select id="selectmode">
<option value="">Filter...</option>
<option value="date">By date</option>
<option value="size">By size</option>
</select>
<div class="bydateinputs" style="display: none">
From: <input type="date" id="start_date" name="start_date">
To: <input type="date" id="end_date" name="end_date">
</div>
<div class="bysizeinputs" style="display: none">
Size:<input type="text" id="size" name="size" placeholder="size">
</div>
<input type="submit" onclick="return search()" value="Search">
</div>
JS:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function(){
$('#selectmode').change(function()
{
if ($(this).val() == 'date')
{
$('.bydateinputs').show();
$('.bysizeinputs').hide();
}
if ($(this).val() == 'size')
{
$('.bydateinputs').hide();
$('.bysizeinputs').show();
}
});
});
</script>
First, put them into a div.
Filter
By date
By size
From:
To:
Size:
Then use jquery to handle select change event
$("select").change(function() {
if($(this).text == "By date")
{
$("div.size").hide();
$("div.from").show();
$("div.to").show();
}
else if($(this).text == "By size")
{
$("div.size").show();
$("div.from").hide();
$("div.to").hide();
}
else
{
$("div.size").hide();
$("div.from").hide();
$("div.to").hide();
}
});
If you don't want to include jQuery, you can follow this fiddle :
HTML :
<div class="search" id="searchDiv">
<input type="text" id="search_text" name="search_text" placeholder="Search by Name ..."/>
<select onchange="changeSearchType(this)">
<option value="">Filter</option>
<option value="dateinput">By date</option>
<option value="sizeinput">By size</option>
</select>
<div id="dateinput" style="display:none;">
From: <input type="date" id="start_date" name="start_date"/>
To: <input type="date" id="end_date" name="end_date"/>
</div>
<div id="sizeinput" style="display:none;">
Size:<input type="text" id="size" name="size" placeholder="size"/>
</div>
<input type="submit" onclick="return search()" value="Search">
</div>
JavaScript :
function changeSearchType(el){
var e = el.value,
divs = document.getElementById("searchDiv").getElementsByTagName('div');
for(var i = 0, l = divs.length; i < l ; i++){
divs[i].style.display = 'none';
}
if(e != '') document.getElementById(e).style.display = 'block';
}
I am utilizing the 960 CSS grid system. I was making a really quick mock up of a website and noticed that my line breaks were rendering quite differently in chrome than they were in IE8.
The following link has screenshots of both browsers. The first image is IE8 and the second is Chrome: http://imgur.com/YLgcsl&kIeTn
What can I do to rid my code of inconsistencies
Here is the code I am using.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>The 1Kb Grid Demo – 16 columns, 60 pixels each, with 20 pixel gutter</title>
<link href="grid.css" type="text/css" rel="stylesheet" media="screen"/>
<style type="text/css" media="screen">
body { margin: 20px 0 0 0; }
p {
font:60px/100px Helvetica;
color: #000;
text-align: center;
border: 1px solid #000;
margin: 0 0 20px 0;
}
label {
float:left;
}
</style>
</head>
<body>
<div class="row">
<div class="column grid_16"><p>16</p></div>
</div>
<div class="row">
<div class="column grid_8">
<label>First name: </label><br /> <input type="text" name="firstname" /><br />
<label>Last name: </label><br /> <input type="text" name="lastname" /><br />
<label>ID: </label><br /> <input type="text" name="employnum"/>
<br />
<label>Observer</label><br />
<select style="width:150px" name="observer">
<option value="TEST"> TEST </option>
<option value="TEST"> TEST </option>
<option value="TEST"> TEST </option>
</select>
<label>Observed</label>
<form action="">
<select style="width:150px" name="observed">
<option value="TEST"> TEST </option>
<option value="TEST"> TEST </option>
<option value="other">Other</option>
</select><br />
<label>Operation Code</label><br />
<select style="width:150px" name="opcode">
<option value="TEST"> TEST </option>
<option value="TEST"> TEST </option>
<option value="TEST"> TEST </option>
<option value="TEST"> TEST </option>
</select>
<label>Center</label><br /><br />
<select style="width:150px" name="cost">
<option value="Zone 1"> Zone 1 </option>
<option value="Zone 2"> Zone 2 </option>
<option value="Zone 3"> Zone 3 </option>
</select>
</form>
<div class="row">
<div class="column grid_4"><p>4</p></div>
<div class="column grid_4"><p>4</p></div>
</div>
</div>
<div class="column grid_8"><p style="line-height: 222px;">8</p></div>
</div>
</body>
</html>
Use CSS reset.
Browsers (User Agents in general) apply a predefined style on HTML elements. To cancel those predefined styles, designers and developers are encouraged to use resets.
What is your question? The only difference I see at a glance is the width of of the dropdown lists are different. Try setting a fixed width on your select elements via css.