What I am trying to do in the code below is to change the text in the Div1 tag with the information in the text input. The thing I want to accomplish is that the text is saved when I reload/quit the page or immediately when it is changed. Is this possible?
Thanks in advance.
<div id="Div1">
<p>Hi</p>
</div>
<input type="text" id='Input'/>
<input type="button" value="submit" onclick="GetInput();" />
<script type="text/javascript">
function GetInput () {
var Input = document.getElementById("Input").value;
document.getElementById('Div1').innerHTML= (Input);
}
</script>
Javascript is a client-side language. This means that the page elements (collectively known as the DOM) are only altered after the page is loaded from the web server and rendered in your browser. Javascript can change these but can not save any data.
In order to save data (persistence), you will need some type of data store. This is usually accomplished with a database running on a server. You will need to get your hands on one or possibly rent some storage space.
Try this, it may help you.
Save value:
localStorage.setItem("name", $('#Input').val());
Get value:
localStorage.getItem("name");
Related
I am new to HTML and JS and I am trying to get a value from an input in a page called second.html and send it to a p tag in a page called third.html.
Not sure whether this is something possible but on second.html I have some input-elements in which once some information is written I want to press a button and then that would take me to another page (third.html), in which the value that I got from the input in the second.html would be used in a p tag. I have been able to get the input value and move to the third.html page, however, assigning the value to the p-element is where I am failing. This is the code:
second.html
</head>
<body>
<h1>Second page</h1>
<label for="ticket">ticket:</label>
<input
type="text"
id="ticket2"
name="ticket"
required
minlength="4"
maxlength="8"
size="10"
/>
<button onclick="ticket()">Click me</button>
</body>
JavaScript:
function ticket() {
let ticketp3 = document.querySelector("#specials p").innerHTML;
let valueticket = document.getElementById("ticket2").value;
ticketp3 = valueticket;
parent.location = "third.html";
}
third.html
<div id="specials">
<h1>thrid page</h1>
<p></p>
</div>
Sending a information to another tab can be really a problem because you call the id #specials before it even exists, the id does not exists yet, you have to call the page first. And i think you can't call another page and try to do it, i suggest you using local storage to store the information and use it before! Just use the following:
localStorage.setItem("inputvalue", put here the input value)
And to get the value on the other page use getItem :)
Edit: sorry for the bad english, i'm from Brazil
You could use local storage for this:
ticket():
...
localStorage.setItem('ticket', valueticket);
...
third.js:
window.onload = () => {
const valueticket = localStorage.getItem('ticket')
}
I've created a form, and figured out how to put the data where I am wanting it to show up. I want to know how to make it stay, when the page or app is refreshed/exited/etc.
<article>
<div align="center"> <script language="JavaScript">
function showInput() {
document.getElementById('display').innerHTML =
document.getElementById("user_input").value;
}
</script>
<form>
<label><b>Enter Your Amount:</b></label>
<input type="text" name="message" id="user_input">
</form><br />
<input class="button" type="submit" onclick="showInput();"><br/>
<p><span id='display'></span></p></div>
</article>
So far I have this and it's working fine, except for saving the response. The project I'm working on is a budget tracker for a family member, so I want the form data to be saved and not erased every time they refresh or exit.
This is probably a pretty noob question, but I can't seem to find an answer that will work for me.
Sounds like a job for local storage. Local storage is just how it sounds local to the browser you are using you cannot access this data from anywhere but the computer/browser its stored in.
//this checks to see if local storage is available
if (typeof(Storage) !== "undefined") {
} else {
}
//grabbing your data i assume "user_input" and set it to a variable called "storage_var"
var storage_var = document.getElementById("user_input").value;
// For storing said data "to_the_ether" variable name and can be w/e u want
localStorage.setItem("to_the_ether", storage_var);
// to get the value and pass it back into the display (im assuming a div?)
document.getElementById("display").innerHTML = localStorage.getItem("to_the_ether");
Hope that helps. If you need more accessible storage you need a DB,
I am trying to get the value of a range slider after it moves and then update my page. I have approached this by using "onchange" and calling some javascript to set a value to a text box and using php to get that value. The php does not even grab the value from the text area on load and I am not sure why. It says the id of the input text box is an "unidentified index." There might be a simple thing wrong or I may be approaching it completely wrong. I am new to this...
Here is the code for the slider.
<!doctype html>
<html lang="en">
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script>
function printValue(sliderID, textbox) {
var x = document.getElementById(textbox);
var y = document.getElementById(sliderID);
x.value = y.value;
}
window.onload = function() { printValue('slider1', 'rangeValue1')};
</script>
</head>
<body>
<form action='slider.php' method='get'>
<input id="slider1" type="range" min="100" max="500" step="10" onchange="printValue('slider1','rangeValue1')">
<input id="rangeValue1" type="text" size="2">
</form>
<?php
echo $_GET['#rangeValue1'];
?>
</body>
</html>
The js function does set input text box, but the php script doesn't happen. I need to get the value in PHP because the page I'm including it in is written in PHP. I don't know if, or how, the page has to be reloaded. I tried using location.reload() in the onchange function and it just continuously loaded the page.. Please help! Any input will be helpful! Thanks!
It looks like you might be getting Javascript and PHP mixed up.
PHP is run solely on your server when a browser accesses a php file. The output of the php file (like when you use echo) is sent as a webpage. However, Javascript is run solely in the browser. To make them communicate, you will need to load another webpage (or reload the current webpage). You can either use a form or directly craft the URL (probably easier in this case).
So you could do something like this inside printValue():
location.querystring="?value=" + x.value;
This will create a GET argument, which you can access with $_GET['value'], and reload the page.
EDIT: Performance Warning!
Every time the slider is moved, your server will end up resending the webpage, which could slow down the server. You might want to only send the new value after the user has clicked a button or something, in which case it would be easier to use a form.
I'm working on a website project from scratch. The content section of the main page has a form and a div of class "blog". When the user is logged in on the admin account, the form shows up. This allows you to pick a title and content to post in the blog. The current code works well, except for the fact that the posts are removed when the page is refreshed. How I can permanently add this to the page?
Here's my code:
<script type="text/javascript">
function addtext() {
var title = document.blogform.title.value;
var content = document.blogform.content.value;
var $blogTitle = $('<div class="blogtitle">' + title + '</div>');
var $blogContent = $('<div class="blogbody">' + content + '</div>');
$('#blog').prepend($blogContent);
$('#blog').prepend($blogTitle);
}
</script>
<h2>Submit New Blog Post</h2>
<div class="blogtitle">Submit a new blog post:</div>
<div class="blogbody">
<form name="blogform">
<fieldset class="fieldsetoffset"><legend>Post</legend>
<div>Title of Post:</div>
<input type="text" name="title">
<div>Content of Post:</div>
<textarea name="content" class="comment" rows="6" cols="88"></textarea>
<hr>
<input type="button" value="Add New Text" onClick="addtext();">
</fieldset>
</form>
</div>
<div id="blog"></div>
You should use a database (or flat-files, but not recommended..) to store those extra parts. On your page, create a database connection (php.net/PDO), fetch any existing records from the database and when the admin stores it you should insert it into your database.
HTML is flat, you can add and delete elements dynamically by altering the DOM but that's only on your screen and nobody elses :)
I assume that this is a static HTML page. Otherwise you would be refreshing from a server-based data source. If you are going to be doing this, then the only other way would be to store the data as client-side cookies.
You can't do this by Javascript or jQuery because they are client side languages.
for this which you want to achieve you have to use a Server Side Language and database
Javascript is client side, meaning when you add content to the page with jQuery it's local to your browser only, not on the server-side (it's not actually changing the website, it's just changing what your browser is rendering).
You will need to either use cookies (there is a great jQuery cookies plugin that's incredibly simple to use) or, preferably, have some kind of server-side script store it in the database and retrieve the values later, i.e. with PHP/mySQL, since cookies are still going to be specific to you rather than anyone who might visit the website. If nothing else you could use PHP to write it to a text/html file on the server that is then displayed later but that's a really ugly solution and a database is really where you should be going here.
I would probably use jQuery's AJAX functions to call a PHP function when addtext() is triggered that passes it the content and title values to write to the database. Then add a bit of php code on the page to check the database for existing posts and display them.
My question may sound naive, but really struggling to do a very simple thing. Suppose I have to html page - send.html and receive.html.
In send.html page -
I have text field and a button in like following -
<body>
<form onsubmit="recieve.html">
<input type="text" id="mytextfield">
<input type="submit" id="submitbutton" value="Go">
</form>
</body>
Here I want to put something on the textfield and I want to see that value in the receive page some thing like - Hello 'value of textfield'. That's it.
Do I need to use JS cookie for that? If not, how can I do it in the most simple way?
Need help :(
The most simple way is PHP. Bottom line is you need something handling the data on the server side.
With javascript you can write a function to store the value in a cookie and read it on the next page. By the way, your page goes in the action attribute. onsubmit expects a javascript function, not a page.