Hi i'm a beginner of javascript and html5. I want put a value of localStorage into value input form.
I have an HTML page:
<form class="row g-3" method="GET">
<div class="col-md-4">
<label for="s1" class="form-label">Nome</label>
<input type="email" class="form-control" id="s1" value=" " >
</div>
</form>
<script src="script.js">
var savedValue = window.localStorage.getItem("email") || "";
document.getElementById("s1").value = savedValue;
</script>
How can I put the value from localStorage into the input?
Your script tag names a src, even though it seems that the script you want to run is already there in the body. Because of the src, it is being ignored. Just remove the src attribute. Also, I would recommend adding a console.log for debugging.
<script>
var savedValue = window.localStorage.getItem("email") || "";
console.log('setting value for s1:', savedValue);
document.getElementById("s1").value = savedValue;
</script>
Related
How can I set the value from an input field on my html page with localstorage.
Like if I type something in an input field for example "Hello" and I press on a button Submit. Then the title from the page should change to "Hello". But it needs to be saved in localstorage if possible.
<p>Hello</p>
<div class="form-group">
<label for="text">Change title:</label>
<input type="text" class="form-control inputBox" id="text" name="text">
</div>
<button>submit</button>
You can save value to localStorage with localStorage.setItem and localStorage.getItem to get localStorage value. Here is the working example.
$(document).ready(function(){
if(localStorage.getItem("inputvalue")){
$('p').text(localStorage.getItem("inputvalue"));
}
$('button').on('click', function() {
localStorage.setItem("inputvalue", $('#text').val());
$('p').text(localStorage.getItem("inputvalue"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Hello</p>
<div class="form-group">
<label for="text">Change title:</label>
<input type="text" class="form-control inputBox" id="text" name="text">
</div>
<button>submit</button>
You will need some Javascript for this.
You can take the value of the input like so :
var inputValue = document.getElementById("text").value;
Then you can set that into the localStorage.
localStorage.setItem("text", inputValue );
Then you can retrieve the value from local storage with
var valueFromStorage = localStorage.getItem("text")
Identify your submit button and your text area for your header :
<button id="submit">submit</button>
<p id="heading-title">
Then get the click event for that button and perform your DOM update.
var submitButton = document.getElementById("submit");
submitButton.addEventListener("click", function(e) {
document.getElementById("heading-title").innerHTML = valueFromStorage;
})
References
GetElementById
LocalStorage
I need to redirect the user to a page specificed in an input tag.
<div id="center">
<input type="text" id="username" placeholder="Username">
<button onclick="location.href='rooms/VALUE'" id="connect">EnterRoom</button>
</div>
So where it says "VALUE" inside of the button tag, it would redirect to mysite.com/rooms/VALUE
the "VALUE" input would be inputted by the user inside the input tag.
Any simple way I can do this?
You can get the value of the input using
document.getElementById('username').value
<div id="center">
<input type="text" id="username" placeholder="Username">
<button onclick="location.href='rooms/' + document.getElementById('username').value" id="connect">EnterRoom</button>
</div>
If you are using jQuery then;
<button onclick="location.href='rooms/' + $('#username').val() " id="connect">EnterRoom</button>
and with the javascript
<button onclick="location.href='rooms/' + document.getElementById('username').value " id="connect">EnterRoom</button>
Here is a version with script separated from HTML of what you want.
<div id="center">
<input type="text" id="username" placeholder="Username">
<button id="connect">EnterRoom</button>
</div>
<script type="text/javascript">
var value = ""
var username = document.getElementById("username")
username.addEventListener('change', function (e) {
value = e.target.value
console.log(value)
})
var connect = document.getElementById("connect")
connect.addEventListener('click', function (e) {
location.href='rooms/'+value
})
</script>
You can use document.getElementById() in button tag.
onclick="location.href='rooms/' + document.getElementById('username').value"
Its good to have a separate javascript function to do redirect task.
In your HTML add onclick event for the button and in javascript function write code to validate and redirect.
HTML
<button onclick="toRedirect()" id="connect">EnterRoom</button>
Javascript
<script type="text/javascript">
function toRedirect(){
// get the user input
var user_value = document.getElementById('username').value ;
// check the validation
if(user_value!=''){
// redirect
location.href='rooms/' + user_value;
}else{
// alert error message
alert("validation error");
}
}
</script>
this my javascript
<script type="text/javascript">
var save_method; //for save method string
var table, ket;
function edit_user(id)
{
save_method = 'update';
ket = "disabledInput";
}
</script>
my html
<div class="col-md-9">
<input id="ket" placeholder="NPP" class="form-control" type="text">
<span class="help-block" id="method"></span>
</div>
No error appears but my variable is not shown. Can anybody suggest how to solve it?
html code
<div class="col-md-9">
<input name="id" placeholder="NPP"
class="form-control" type="text" id="test">
<span class="help-block"></span>
</div>
<script type="text/javascript">
var save_method; //for save method string
var table;
var ket;
function edit_user(id)
{
save_method = 'update';
ket = "disabledInput";
document.getElementById("test").value ="disabledInput";//to assign textbox value
}
</script>
You cannot simply execute js within id tag. What you can done instead is to attach onload event to body html element
<body onload="setInputId()">
setInputId function should perform manipulation with id of your input.
function setInputId(){ getElementsByName['id'][0].setAttribute("id", ket);}
I simply want to have a textbox on my webpage, using the HTML form, and input tags, and be able to have the inputted value be used by the Javascript on the page. My HTML looks like this:
<div id="firstq">
<form id="firstbox">
Choice: <input id="firstinput" type="text" name="choice">
</form>
</div>
and the Javascript I'm trying to use looks like this:
var topMenuChoice = document.getElementById("firstinput");
document.write(topMenuChoice);
}
However, all I see on the webpage, underneath the textbox, is "[object HTMLInputElement]". What do I do to get this to work right?
Thanks
here's an example with change event listener for firing a function when there's a change in form
var div = document.querySelector('div');
var topMenuChoice = document.getElementById("firstinput");
topMenuChoice.addEventListener('change',function(e){
div.innerHTML = e.target.value/***e.target.value is your input***/
var divInner = div.innerHTML;
setTimeout(function(){
document.write(divInner);
},2000)
})
<form id="firstbox">Choice:
<input id="firstinput" type="text" name="choice" value=66>
</form>
<div>look here!!</div>
Check this !
document.write(document.forms['firstbox'].firstinput.value);
OR
var topMenuChoice = document.getElementById("firstinput");
document.write(topMenuChoice.value);
}
See http://www.w3schools.com/jsref/prop_text_value.asp
var htmlInputElementObjet = document.getElementById("firstinput");
document.write(htmlInputElementObjet.value);
<div id="firstq">
<form id="firstbox">
Choice: <input id="firstinput" type="text" name="choice" value="initial value">
</form>
</div>
If you want to get the text typed in your input you need to use the value property of the element. You can also use another HTML tag to show the results (avoid using document.write):
HTML
<div id="firstq">
<form id="firstbox">
Choice: <input id="firstinput" type="text" name="choice">
</form>
<div id="result"></div>
</div>
JS
var topMenuChoice = document.getElementById("firstinput");
document.getElementById("result").innerHTML = topMenuChoice.value;
You have to consider the usage of an event (click, keypress) to control the exactly moment to retrieve the input value.
JS
document.getElementById('firstinput').addEventListener('keypress', function(e) {
if(e.which == 13) { //detect enter key pressed
e.preventDefault();
document.getElementById('result').innerHTML = this.value;
}
});
use the value property
var topMenuChoice = document.getElementById("firstinput");
document.write(topMenuChoice).value;
}
Maybe I've been working on my site for to long, but I can't get the following to work. I am having my textarea fire an onkeyup() event called limiter which is supposed to check the textarea and limit the text in the box, while updated another readonly input field that shows the amount of characters left.
This is the javascript code:
<script type="text/javascript">
var count = "500";
function limiter(){
var comment = document.getElementById("comment");
var form = this.parent;
var tex = comment.value;
var len = tex.length;
if(len > count){
tex = tex.substring(0,count);
comment.value =tex;
return false;
}
form.limit.value = count-len;
}
</script>
The form looks like this:
<form id="add-course-rating" method="post" action="/course_ratings/add/8/3/5/3"
accept- charset="utf-8"><div style="display:none;"><input type="hidden"
name="_method" value="POST" />
//Other inputs here
<div id="comment-name" style="margin-top:10px">
<div id="comment-name-text">
<b>Comments</b><br />
Please leave any comments that you think will help anyone else.
</div>
<style type="text/css">
.rating-form-box textarea {
-moz-border-radius:5px 5px 5px 5px;
}
</style>
<div class="rating-form-box">
<textarea name="data[CourseRatings][comment]" id="comment"
onkeyup="limiter()" cols="115" rows="5" ></textarea>
<script type="text/javascript">
document.write("<input type=text name=limit size=4
readonly value="+count+">");
</script>
</div>
<input type="submit" value="Add Rating" style="float: right;">
</form>
If anyone can help that would be great.
You have:
onkeyup="limiter()"
Since you aren't calling limiter in the context of an object, you are calling window.limiter.
var form = this.parent;
So this is window and form is window.parent, which is the same as window (unless the document is loaded in a frame).
You want to make this the form control. Do this using event binding in unobtrusive JavaScript.
(And don't use an input as an element solely for displaying output, it does not make sense. You probably want to use a label associated with the textarea … and to use another label for <b>Comments</b><br />Please leave any comments that you think will help anyone else.)
Would this work for your? Example Link
EDIT:
You should pass the element instance with the function call onkeyup="limiter(this)" this way in your function you'll have a reference to the object that called this function, now your function will be something like:
function limiter(a) {
var comment = a;
var form = document.getElementById('add-course-rating');
var tex = comment.value;
var len = tex.length;
if (len > count) {
tex = tex.substring(0, count);
comment.value = tex;
return false;
}
form.limit.value = count - len;
}
Also no need to create element dynamically if you don't really need that! so just set the value of the readonly with Javascript:
<input type="text" name="limit" id="limit" size="4" readonly value="">
<script type="text/javascript">
var limit = document.getElementById('limit');
limit.value = count;
</script>
And you are good to go!