I can't figure out how to connect function that will save name and surname in local storage and go to the other page. If you could point out the problem I would be very grateful :)
index.html
<form id="from" action="" method="post">
<div>
<pre> <label for="name">Име</label></pre>
<input id="name" name="name" type="text" required>
<br>
<pre><label for="surname"> Презиме </label></pre>
<input id="surname" surname="surname" type="text" required>
<br><br>
</div>
<button onclick="sumbit()"> Започни тест </button>
</form>
script.js
let infs = [];
const addInf= (ev)=>{
ev.preventDefault(); //to stop the form submitting
let inf = {
id: Date.now(),
name: document.getElementById('name').value,
surname: document.getElementById('surname').value
}
infs.push(inf);
document.forms[0].reset(); // to clear the form for the next entries
//saving to LS
localStorage.setItem('MyInfList', JSON.stringify(infs) );
}
document.addEventListener('DOMContentLoaded', ()=>{
document.getElementById('btn').addEventListener('click', addInf);
});
Try this, use window.location for redirecting to another page, it has same functionality as href.
<form id="from" action="" method="post">
<div>
<pre> <label for="name">Име</label></pre>
<input id="name" name="name" type="text" required>
<br>
<pre><label for="surname"> Презиме </label></pre>
<input id="surname" surname="surname" type="text" required>
<br><br>
</div>
<a><button id="btn"> Започни тест </button> </a>
</form>
<script>
let infs = [];
const addInf = (ev) => {
ev.preventDefault(); //to stop the form submitting
let inf = {
id: Date.now(),
name: document.getElementById('name').value,
surname: document.getElementById('surname').value
}
infs.push(inf);
//saving to LS
localStorage.setItem('MyInfList', JSON.stringify(infs));
document.forms[0].reset(); // to clear the form for the next entries
window.location = "quiz.html"
}
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('btn').addEventListener('click', addInf);
});
</script>
Related
Here is all my code from HTML, including my Local Storage. I have tried putting my javascipt into a external JS file, and refer to it in my HTML but it didn't help at all. So I think the mistake is in the written code and not placement? In advance thank you for your help!
<body>
<h1>Sign Up</h1>
<p>Please fill out this form</p>
<div class="element">
<form class="item" action="indsæt reference">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="Name"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Last Name"><br>
<label for="mail">E-mail:</label><br>
<input type="text" id="mail" name="mail" value="mail"><br>
<form action="/action_page.php">
<label for="bdaymonth">Birthday:</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</form>
<label for="gender">Gender</label><br>
<input type="text" id="gender" name="gender" value="gender"><br>
<button onClick="storeData()" type="button" value="Send Data">Submit</button>
</form>
</div>
<script>
function storeData() {
let fname = document.getElementById("fname").value;
let lname = document.getElementById("lname").value;
let mail = document.getElementById("mail").value;
let bdaymonth = document.getElementById("bdaymonth").value;
let gender = document.getElementById("gender").value;
//så jeg kan oprette min key, med efterfølgende value af array
let user = {
name: fname,
lastName: lname,
Birthday: bdaymonth,
Gender: gender,
Mail: mail
}
//min localestorage
localStorage.setItem("New User", [user.name, user.lastName, user.Birthday, user.Gender, user.Mail]);
}
</script>
</body>
localStorage.setItem("New User",JSON.stringify(user));
to read back the data as an object:
let user = JSON.parse(localStorage.getItem("New User"));
const value = JSON.stringify([user.name, user.lastName, user.Birthday, user.Gender, user.Mail]);
localStorage.setItem("New User",value);
or
const value = JSON.stringify({
name:user.name,
lastName:user.lastName,
birthday:user.Birthday,
gender:user.Gender,
mail:user.Mail
})
localStorage.setItem("New User", value};
or
localStorage.setItem("userName", user.name);
localStorage.setItem("userLastName", user.lastNane);
By the way, you should maybe call the key newUser instead of New User.... like a variable name.
I made some little project with adding element to DOM. It's working but I don't know how to clear form after submit. I need to assign a blank value? At what point? Sorry, Im new, please don't bite. Thanks.
const addElement = (e, node, txt, attr, value) => {
e.preventDefault();
const element = document.createElement(node);
if(txt){
const text = document.createTextNode(txt);
element.appendChild(text);
}
if(attr){
element.setAttribute(attr, value)
}
document.querySelector('.content').appendChild(element);
}
const addForm = document.querySelector('.form--add');
addForm.addEventListener('submit', (e) => addElement(
e,
addForm.elements.node.value,
addForm.elements.text.value,
addForm.elements.attr.value,
addForm.elements.value.value,
));
<div class="form-container">
<form class="form form--add">
<h1 class="form__title">Add element to DOM</h1>
<input type="text" class="form__input" name="node" placeholder="element html" required>
<input type="text" class="form__input" name="text" placeholder="txt in element html">
<input type="text" class="form__input" name="attr" placeholder="attr" required>
<input type="text" class="form__input" name="value" placeholder="attr value" required>
<button class="form__button">Add element</button>
</form>
<form class="form form--search">
<h1 class="form__title">Search DOM</h1>
<input type="text" class="form__input" placeholder="szukana nazwa elementu" required>
<input type="submit" class="form__button" value="znajdź i pokaż informacje">
</form>
</div>
<div class="result"></div>
<div class="content"></div>
<footer class="footer">Stopka</footer>
<script src="main.js"></script>
Thank you
Try addForm.reset()
or
declare an id for suppose form_id then paste below code after submit
document.getElementById("form_id ").reset();
addForm.addEventListener('submit', (e) => addElement(
e,
addForm.elements.node.value,
addForm.elements.text.value,
addForm.elements.attr.value,
addForm.elements.value.value,
addForm.getElementsByTagsName('input').forEach(el => {
el.value = ''
})
));
I have a reminder app I am working on and I'm not able to store the date and time, only the name and a description. For now I just need to get it into local storage and then deal with retrieving the later.
let reminders = [];
const addReminders = (ev) => {
ev.preventDefault();
let reminder = {
ReminderInput: document.getElementById('ReminderInput').value,
InfoInput: document.getElementById('InfoInput').value
}
localStorage.setItem('ReminderInput', JSON.stringify(ReminderInput));
localStorage.setItem('InfoInput', JSON.stringify(InfoInput));
localStorage.setItem('DateInput' JSON.stringify(DateInput));
}
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('btn').addEventListener('click', addReminders);
});
<form id="todoForm">
<label for="ReminderInput">Reminder</label>
<input class="u-full-width" type="text" id="ReminderInput">
<label for="DateInput">Date</label>
<input class="u-full-width" type="datetime-local" id="DateInput">
<label for="InfoInput">Additional Information</label>
<textarea class="u-full-width" type="text" placeholder="Remember to..." id="InfoInput"></textarea>
<button type="button" id="btn" class="button-primary">Add Reminder</button>
</form>
Hers' the code that needs to be corrected, screenshot to show it works:
let reminder = {
ReminderInput: document.getElementById('ReminderInput').value,
InfoInput: document.getElementById('InfoInput').value,
DateInput: document.getElementById('DateInput').value
}
localStorage.setItem('ReminderInput', JSON.stringify(reminder.ReminderInput));
localStorage.setItem('InfoInput', JSON.stringify(reminder.InfoInput));
localStorage.setItem('DateInput',JSON.stringify(reminder.DateInput));
}
I'm stuck on what I have done while playing around with the code. I had it saving to local storage but now its not. Could someone help me troubleshoot this
<form name="todoForm" action="" method="get">
Reminder : <input type="text" name="ReminderInput" id="ReminderInput"><br />
Date: <input type="datetime-local" name="DateInput" id="DateInput"><br />
Extra Information : <input type="text" name="InfoInput" id="InfoInput"><br />
<button onclick="storeValues(reminder)" type=submit>Submit</button>
</form>
<script>
function storeValues(e) {
e.preventDefault();
let storedReminders = JSON.parse(localStorage.getItem("Reminders")) || [];
const newReminderDetails = {
ReminderInput: document.getElementById('ReminderInput').value,
DateInput: document.getElementById('DateInput').value,
InfoInput: document.getElementById('InfoInput').value
}
storedReminders.push(newReminderDetails);
localStorage.setItem("Reminders", JSON.stringify(storedReminders));
console.log('storedReminders', storedReminders);
}
</script>
write event rather then reminder
<button onclick="storeValues(event)" type="submit">Submit</button>
you didn't do anything wrong but there is a tiny mistake which is we don't do click event on forms instead we using a submit event. so here is my solution
HTML Code:
<form id="todoForm" action="" method="get">
Reminder : <input type="text" name="ReminderInput" id="ReminderInput"><br />
Date: <input type="datetime-local" name="DateInput" id="DateInput"><br />
Extra Information : <input type="text" name="InfoInput" id="InfoInput"><br />
<button type=submit>Submit</button>
</form>
JS Code
function storeValues(e) {
e.preventDefault();
let storedReminders = JSON.parse(localStorage.getItem("Reminders")) || [];
const newReminderDetails = {
ReminderInput: document.getElementById('ReminderInput').value,
InfoInput: document.getElementById('InfoInput').value
}
storedReminders.push(newReminderDetails);
localStorage.setItem("Reminders", JSON.stringify(storedReminders));
console.log('storedReminders', storedReminders);
}
document.getElementById("todoForm").addEventListener("submit",storeValues );
I am trying to print the value from the form when a user submits the function but a blank value is returned.
Here is my JavaScript code:
var login = new function()
{
var name = null ;
this.validation = function()
{
this.name = document.getElementById("Username").value;
console.log(this.name);
document.getElementById("demo").innerHTML = this.name;
};
};
And my HTML form as :
<body>
<div class="container">
<div class="col-md-8">
<div class="starter-template">
<h1>Login with javascript</h1>
<p class="lead">Please Enter Following Details</p>
<h1 id="demo"></h1>
<form name="form" onSubmit="return login.validation();" action="#" method="post">
<div class="form-group">
<label for="exampleInputEmail1">Username</label>
<input type="text" name="username" class="form-control" id="Username" placeholder="Please Enter your Username">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="Email" placeholder="Please enter your Password">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="Password" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Re-Password</label>
<input type="password" class="form-control" id="Re-Password" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</div>
<script src="js/login.js"></script>
<script href="js/bootstrap.js"></script>
<!-- /.container -->
</body>
Why does the value not get into html <p> tag.
Your code simply works. But since the function executes on submitting the form, the username gets logged in the console fast before the page refreshed with submitted data. You can confirm this and test it by adding event.preventDefault(); to the function to prevent submitting the form so the page would stay visible with the console.
<script>
var login = new function()
{
var name = null ;
this.validation = function()
{
event.preventDefault();
this.name = document.getElementById("Username").value;
console.log(this.name);
document.getElementById("demo").innerHTML = this.name;
};
};
</script>
If that's not what you're looking for, let me know.
We the javascript validation failed you need to return false. If you don't it will proceed your form further. Thanks
var login = new function()
{
var name = null ;
this.validation = function()
{
this.name = document.getElementById("Username").value;
document.getElementById("demo").innerHTML = this.name;
return false;
};
};