In my reminder app I collect information from inputs in localstorage and I would like to display these inputs on another page of an app.
I input these values into my localstorage like this:
<h2 style="text-align:center;margin-top: 5px">Create an Event</h2>
<FORM NAME="myform" ACTION="" METHOD="GET"><P></P>
Event Name: <INPUT TYPE="text" NAME="name" VALUE="" id="input1"><P></P>
Event Date and Time: <INPUT TYPE="datetime-local" NAME="date" Value="" id="input2"><P></P>
Event Location: <INPUT TYPE="text" NAME="location" VALUE="" id="input3"><P></P>
Event Notes: <INPUT TYPE="text" NAME="notes" VALUE="" id="input4"><P></P>
<button onclick="myFunction()" type=submit>Submit</button>
</form>
<script>
document.getElementById('input1').value = localStorage.getItem("EventName");
document.getElementById('input2').value = localStorage.getItem("EventDateAndTime");
document.getElementById('input3').value = localStorage.getItem("EventLocation");
document.getElementById('input4').value = localStorage.getItem("EventNotes");
</script>
And I have attempted to display these inputs like this
<h2 class="title">Upcoming Events</h2>
<h2 id='input1'> </h2>
<h2 id='input2'> </h2>
<h2 id='input3'> </h2>
<h2 id='input4'> </h2>
<script>
function myFunction() {
localStorage.setItem("EventName", document.getElementById('input1').value);
localStorage.setItem("EventDateAndTime", document.getElementById('input2').value);
localStorage.setItem("EventLocation", document.getElementById('input3').value);
localStorage.setItem("EventNotes", document.getElementById('input4').value);
}
Reorganizing based on my comments above. If the two snippets represent the two pages, you should be able to achieve this with the following.
<h2>Create an Event</h2>
<form name="myform" action="" method="GET">
Event Name: <INPUT TYPE="text" NAME="name" VALUE="" id="input1"><br />
Event Date and Time: <INPUT TYPE="datetime-local" NAME="date" Value="" id="input2"><br />
Event Location: <INPUT TYPE="text" NAME="location" VALUE="" id="input3"><br />
Event Notes: <INPUT TYPE="text" NAME="notes" VALUE="" id="input4"><br />
<button onclick="storeValues()" type=submit>Submit</button>
</form>
<!-- running script here will populate inputs with values from local storage -->
<script>
document.getElementById('input1').value = localStorage.getItem("EventName");
document.getElementById('input2').value = localStorage.getItem("EventDateAndTime");
document.getElementById('input3').value = localStorage.getItem("EventLocation");
document.getElementById('input4').value = localStorage.getItem("EventNotes");
</script>
function storeValues() {
localStorage.setItem("EventName", document.getElementById('input1').value);
localStorage.setItem("EventDateAndTime", document.getElementById('input2').value);
localStorage.setItem("EventLocation", document.getElementById('input3').value);
localStorage.setItem("EventNotes", document.getElementById('input4').value);
}
<h2 class="title">Upcoming Events</h2>
<h2 id='input1'> </h2>
<h2 id='input2'> </h2>
<h2 id='input3'> </h2>
<h2 id='input4'> </h2>
<!-- running script here will populate H2's with values from local storage -->
<script>
document.getElementById('input1').value = localStorage.getItem("EventName");
document.getElementById('input2').value = localStorage.getItem("EventDateAndTime");
document.getElementById('input3').value = localStorage.getItem("EventLocation");
document.getElementById('input4').value = localStorage.getItem("EventNotes");
</script>
Related
my task is to store user multiple input values in javascript array using push method
the code is
<body>
<h3>employee form</h3>
<div class="row">
<div class="col-md-6">
<form>
<label for="id">Id</label>
<input type="number" id="i1"/></br>
<label>Name:</label>
<input type="Name" id="name"></br>
<label for="qty">Qty:</label>
<input type="Qty" id="qty"/></br>
<label for="price">price:</label>
<input type="price" id="price"/></br>
<button onclick="pushData();">ADD</button>
</div>
<div class="col-md-6" id="display">
</div>
</div>
</form>
<script>
var myArr = [""];
i tried but i didnt get exact output freinds please give some tips are codes friends
function pushData() {
const products = [];
const data = {
id: document.getElementById('id').value,
name: document.getElementById('name').value,
qty: document.getElementById('qty').value,
price: document.getElementById('price').value
}
products.push(data);
document.getElementById('display').innerText += JSON.stringify(data, null, 2) + ',';
}
<h3>employee form</h3>
<div class="row">
<div class="col-md-6">
<form method="post">
<label for="id">Id</label>
<input type="number" id="id" /></br>
<label>Name:</label>
<input type="text" id="name"></br>
<label for="qty">Qty:</label>
<input type="text" id="qty"></br>
<label for="price">price:</label>
<input type="text" id="price" /></br>
<button type="submit" onclick="event.preventDefault(); pushData();">ADD</button>
</form>
</div>
<div class="col-md-6">
[<span id="display"></span>]
</div>
</div>
You can try this one it just push multiple products into array in display div
Try this..
<div>
<input type="text" class="name" />
<input type="text" class="quantity" />
<input type="text" class="price" />
<button class="update" >
Update Data
</button>
</div>
<div class="updated_data"></div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
var final_array = [];
$(".update").on("click",()=>{
// Creating a new sub array
var sub_array = [];
// Getting the input vals
var name = $(".name").val();
var quantity = $(".quantity").val();
var price = $(".price").val();
// adding vals to the new array
sub_array.push(name,quantity,price);
//Updating the main array with sub array we just created
final_array.push(sub_array);
// Displaying in the page
$(".updated_data").append(`
<div>
<p>${(final_array[final_array.length-1])[0]}</p>
<p>${(final_array[final_array.length-1])[1]}</p>
<p>${(final_array[final_array.length-1])[2]}</p>
</div>
`);
//Clearing all input fields for new entry
$(".name").val('');
$(".quantity").val('');
$(".price").val('');
});
</script>
All the inserted values are being stored in a main array final_array .
Here's the working JSfiddle for the same
I made this in Jquery instead of JS cause its easy to work with.
Let me know if you came across any trouble.
Without any specific output format, this is how to get and push inputs value into array and displaying in order.
let myArr = [];
function pushData(){
const inputs = document.getElementsByClassName("getVal");
for(let i=0; i<inputs.length;i++){
myArr.push(inputs[i].value);
}
document.getElementById("display").textContent = myArr;
}
<html>
<head>
</head>
<body>
<h3>Employee Form</h3>
<div class="row">
<div class="col-md-6">
<form>
<label for="id">Id</label>
<input type="number" id="i1" class="getVal"/></br>
<label>Name:</label>
<input type="Name" id="name" class="getVal"></br>
<label for="qty">Qty:</label>
<input type="Qty" id="qty" class="getVal"/></br>
<label for="price">price:</label>
<input type="price" id="price" class="getVal"/></br>
<button type="button" onclick="pushData()">ADD</button>
</form>
</div>
<div class="col-md-6" id="display">
</div>
</div>
</body>
</html>
<form action="apply.html" method="post">
<div class="cloudinformation">
<h2>
Job reference number:
</h2>
<h4>
1FN43
</h4>
<input type="submit" value="Apply">
</div>
</form>
<form action="apply.html" method="post">
<div class="consultantinformation">
<h2>
Job reference number:
</h2>
<h4>
6LZ9W
</h4>
<input type="submit" value="Apply">
</div>
</form>
<form action="https://mercury.swin.edu.au/it000000/formtest.php" method="post" id="regform">
<label>Job Reference Number:</label>
<input type="text" id="onlyletters" name="onlyletters" pattern="[a-zA-Z0-9]+" minlength="5" maxlength="5" placeholder="Reference number for specified job.." required="required">
</form>
How do I set it up so that, depending on which job press apply for, it will retrieve the job reference number of the specified job and display it in read-only format on the apply.html, which is the form you are redirected to when you press "apply"?
Does this is what you want to achieve
var applyBtn = document.querySelectorAll("button")
var hideFormAll = document.querySelectorAll(".cloudinformation")
for (let i = 0; i < applyBtn.length; i++) {
applyBtn[i].addEventListener('click', function() {
var referNumb = applyBtn[i].parentElement.querySelector(".refree")
document.querySelector("#onlyletters").value = referNumb.textContent
document.querySelector(".formAll").style.display = "none"
document.querySelector("#regform").style.display = "block"
})
}
#regform {
display: none;
}
<div class="formAll">
<div class="cloudinformation">
<h2>
Job reference number:
</h2>
<h4 class="refree">1FN43</h4>
<button>Apply</button>
</div>
<div class="consultantinformation">
<h2>
Job reference number:
</h2>
<h4 class="refree">6LZ9W</h4>
<button>Apply</button>
</div>
</div>
<form action="https://mercury.swin.edu.au/it000000/formtest.php" method="post" id="regform">
<label>Job Reference Number:</label>
<input type="text" id="onlyletters" name="onlyletters" pattern="[a-zA-Z0-9]+" minlength="5" maxlength="5" placeholder="Reference number for specified job.." required="required" readonly>
<input type="submit" value="Submit">
</form>
I'm trying to get the values from my form when the user clones the row. When I clone the rows are the id still the same? If so how do I make the new rows to have a unique id?
jQuery(function($) {
var $button = $('#add-row'),
$row = $('.period-row').clone();
$button.click(function() {
$row.clone().insertBefore($button);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3 class="heading">Please select appointment period</h3>
<div class="form-wrapper">
<form action="#" id="date-form" name="date-form" method="POST">
<div class="period-row">
<label for="start">From:</label>
<input type="datetime-local" name="start[]" id="start">
<label for="end">To:</label>
<input type="datetime-local" name="end[]" id="end">
</div>
<input type="button" id="add-row" name="add-row" value="add period" />
<button type="submit">submit</button>
</form>
</div>
I don't understand what exactly you want and to do it on the proper way you have to use class on the input and not id because the id is unique. But I hope this code will help you.
jQuery(function($) {
var $button = $('#add-row'),
$row = $('.period-row').clone();
$button.click(function() {
let from = $('#start').val();
let to = $('#end').val();
$row.clone().insertBefore($button).addClass('active');
$('.period-row.active').find("#start").val(from);
$('.period-row.active').find("#end").val(from);
$('.period-row').removeClass('active');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3 class="heading">Please select appointment period</h3>
<div class="form-wrapper">
<form action="#" id="date-form" name="date-form" method="POST">
<div class="period-row">
<label for="start">From:</label>
<input type="datetime-local" name="start[]" id="start">
<label for="end">To:</label>
<input type="datetime-local" name="end[]" id="end">
</div>
<input type="button" id="add-row" name="add-row" value="add period" />
<button type="submit">submit</button>
</form>
</div>
I would like to take the information stored in the form from my date input and send it to a variable in JavaScript.
<body>
<form action="" method="get" class="countdown">
<div class="countdown">
<label for="birthday">Enter your birthday: </label>
<input type="date" name="birthday" id="birthday" required>
</div>
<div class="countdown">
<input type="submit" value="Submit"
</div>
</form>
<script src="lab3.js"></script>
</body>
var bDay = document.getElementById("birthday").value
console.log(bDay)
You'll want to do something like this:
//Wait for page to finish loading
window.addEventListener("load",function(){
//Run function when you submit form
document.getElementById("form").addEventListener("submit",function(e){
//Stop the form from submitting:
e.preventDefault();
//Get your input value
var bDay = document.getElementById("birthday").value;
//Log it to your console
console.log(bDay)
});
});
<!DOCTYPE html>
<html>
<body>
<!-- Add an id to your form-->
<form id='form' action="" method="get" class="countdown">
<div class="countdown">
<label for="birthday">Enter your birthday: </label>
<input type="date" name="birthday" id="birthday" required>
</div>
<div class="countdown">
<input type="submit" value="Submit">
</div>
</form>
<!-- <script src="lab3.js"></script> -->
</body>
</html>
I'm trying to code this form in sharing.html so that when one is done putting in information and want to add more contacts, they can click on "add another contact" but when I tried to write out the code, the dreamweaver I was using said that there's a error in Javascript. I don't know how I can fix this error: (the script is almost at the bottom)
<div class="recordsbox">
<h1>Sharing Center</h1>
<p>Please enter the contact information that you want to share.</p>
<div id="shareform">
<form id="share" method="POST">
<div class="notifyfield">
<label>Who is this person?</label>
<input type="text">
</div>
<div class="notifyfield">
<label>Email Address:</label>
<input type="email" >
</div>
<div class="notifyfield">
<label>Phone Number:</label>
<input type="tel" >
</div>
</form>
</div>
<div class="addcontact">
<input type="button" value="Add another contact?" onClick="addForm('shareform');">
</div>
<script>
var shareform = 0;
function addForm(divName) {
shareform++;
var newform = document.createElement('div');
newform.innerHTML = '<div id="shareform'+shareform+'">
<form id="share" method="POST">
<div class="notifyfield">
<label>Who is this person?</label>
<input type="text">
</div>
<div class="notifyfield">
<label>Email Address:</label>
<input type="email" >
</div>
<div class="notifyfield">
<label>Phone Number:</label>
<input type="tel" >
</div>
</form>
</div>
';
document.getElementById(divName).appendChild(newform);
shareform++;
}
</script>
<div class="nextbutton">
Next
</div>
</div>
I based this code on that tutorial: http://www.randomsnippets.com/2008/02/21/how-to-dynamically-add-form-elements-via-javascript/.
Also you can check out full code at http://hamzakhan.name/dev/eric/options_innerpage/sharing.html
For a quicker look, here is the script in question:
<script>
var shareform = 0;
function addForm(divName) {
shareform++;
var newform = document.createElement('div');
newform.innerHTML = '<div id="shareform'+shareform+'">
<form id="share" method="POST">
<div class="notifyfield">
<label>Who is this person?</label>
<input type="text">
</div>
<div class="notifyfield">
<label>Email Address:</label>
<input type="email" >
</div>
<div class="notifyfield">
<label>Phone Number:</label>
<input type="tel" >
</div>
</form>
</div>
';
document.getElementById(divName).appendChild(newform);
shareform++;
}
</script>
Here is the new code:
var shareform = 0;
function addForm(divName) {
shareform++;
var newform = document.createElement('div');
newform.innerHTML = '<div id="shareform'+shareform+'"><form id="share" method="POST"><div class="notifyfield2"><div class="sharefield"><label>Who is this person?</label><input type="text"></div></div><div class="notifyfield"><label>Email Address:</label><input type="email" ></div><div class="notifyfield"><label>Phone Number:</label><input type="tel" ></div></form><hr class="greenline"></div>';
document.getElementById(divName).appendChild(newform);
shareform++;
}
You need to delete all invisible characters. You can't "newline" string.