Javascript, not saving to localstorage [duplicate] - javascript

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 5 years ago.
I got a small problem, I'm trying to save the values of the input field "a1" into localstorage, but for some reason it's not saving. I can't seem to figure out what the problem is...
All help is appreciated!
FIXED: Place the script at the bottom.
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
document.getElementById('a1').onkeyup = function() {
var a1 = document.getElementById('a1').value;
localStorage.setItem('a1', a1);
};
</script>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div class="box">
<div class="title">Kalkulator</div>
<div class="text">Antal kvadratmeter: <input class="input-field" id="a1" type="text" value="0" /> m2</div> <---- HERE
<div class="text">Kantklipp rundt plenen? (+3.00kr per m): <input class="input-field" id="a2" type="text" value="0" /> m</div>
<div class="text">Gjødsel? (+1.00kr per kvm) <input class="input-field2" type="checkbox" name="checkbox" id="checkbox_check2"></div>
<div class="text">Mosefjerning? (+2.00kr per kvm) <input class="input-field2" type="checkbox" name="checkbox" id="checkbox_check3"></div>
<div class="text">Pris (kr) <input class="input-field3" id="a4" type="text" value="0.00" /></div>
<div class="text2">Obs! Minstepris på 300kr.</div>
<div class="tilbud-knapp">Legg til i tilbuds liste</div>
<div class="border"></div>
</div>

Place your code at the bottom of the page. It's running before the elements are rendered, which means the event can't be registered to the element.
Broken:
<script>
document.getElementById('a1').onkeyup = function() {
var a1 = document.getElementById('a1').value;
localStorage.setItem('a1', a1);
};
</script>
<input class="input-field" id="a1" type="text" value="0" />
Fixed (except localStorage ins't usable in snippets):
<input class="input-field" id="a1" type="text" value="0" />
<script>
document.getElementById('a1').onkeyup = function() {
var a1 = document.getElementById('a1').value;
localStorage.setItem('a1', a1);
};
</script>

Related

not redirecting to other page using jQuery [duplicate]

This question already has answers here:
How do I redirect to another webpage?
(58 answers)
Closed 1 year ago.
I'm quite new to jQuery and html, looked through google and these forums to no avail.
This is my HTML Code
<html>
<head>
<link rel="stylesheet" href="reset.css" type="text/css">
<link rel="stylesheet" href="index.css" type="text/css">
<script src="./jquery.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<form id="form">
<h1>Koks yra leistingas greitis miesto ribose?</h1>
<input type="radio", id="ats1", name="atsakymas", value="1" ></input>
<label for="ats1"> a</label>
<br>
<input type="radio", id="ats2", name="atsakymas", value="2" ></input>
<label for="ats2"> b</label>
<br>
<input type="radio", id="ats3", name="atsakymas", value="3" ></input>
<label for="ats3"> c</label>
<br>
<button id="Rinktis" type="submit">Rinktis</button>
<button id="close">Išeiti</button>
</form>
</div>
<script src="./index.js" type="text/javascript"></script>
</body>
And this is my jQuery line that I think should redirect me to another page
$("#Rinktis").click(function (){
document.location.href = "http://google.com";
return;
})
but it is doing nothing, am I doing something wrong?
Your code (in JS) should be:
$("#Rinktis").click(function (e) {
e.preventDefault();
window.location.href = "http://www.google.com";
})
The return statement there is unnecesary. The e parameter in the click function represents the Event object. Since you're overriding the form's submit action (not sure why), you need that first line to stop the default action.

Send JavaScript variable to HTML page

I have the following HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>demo</title>
<link rel="stylesheet" href="style.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="field">
<label for="value1">Introduce value</label>
<input type="text" id="value1" name="value1" value="" />
</div>
<div class="button-block">
<input type="submit" value="Click" />
</div>
<div id="output">
<h2>Result:</h2>
<textarea name="result" id="result"></textarea>
</div>
</body>
</html>
I want to get the value that is introduced in value1 and when the submit is clicked to put that value in the output. So I wrote in script.js the following code but somehow it doesn't work.
<script>
window.onload = function(){
var val = document.getElementById('value1').innerHTML;
document.getElementById('result').innerHTML = val;
};
</script>
Any ideas?
You have to use .value property of the input field instead of innerHTML. so it would be:
var val = document.getElementById('value1').value;
and also, since you're executing it when the page loads. There will be no value assigned to the input field with id 'value1'. Therefore, you won't get any result.
You can try adding a button with onClick event to execute this function in place of using window.onload
HTML controls you are working on are textboxes, so they have a value property, not innerHTML.
Use this:
var val = document.getElementById('value1').value;
document.getElementById('result').value= val;
You can't get the value of an input element using the innerHTML attribute. Use value instead:
var val = documento.getElementById('value1').value;
Also you should keep in mind that your function is executed when the page loads, NOT when the form is submitted.
The code is not working, because you are calling this function when the window loads, not when the submit button is clicked. Since there is no form, and thus no page loading going on, I'd recommend switching the <input type="submit" value="Click" /> to a button. They are functionally similar, and visually identical. With the the button, though you could use the onclick attribute to call a function when the button is clicked. See below for an example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>demo</title>
<link rel="stylesheet" href="style.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="field">
<label for="value1">Introduce value</label>
<input type="text" id="value1" name="value1" value="" />
</div>
<div class="button-block">
<button onclick="printOutput()">Click</button>
</div>
<div id="output">
<h2>Result:</h2>
<textarea name="result" id="result"></textarea>
</div>
</body>
</html>
Then in your script.js you would have,
function printOutput(){
var val = document.getElementById('value1').value;
document.getElementById('result').innerHTML = val;
}
when the submit is clicked to put that value in the output
You have chosen wrong event window.onload, also you need .value instead of .innerHTML
Option 1: using jQuery, as you already have the import
$(function() {
$('input[type="submit"]').on('click', function(e) {
$('#result').val($('#value1').val());
});
});
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<div class="field">
<label for="value1">Introduce value</label>
<input type="text" id="value1" name="value1" value="" />
</div>
<div class="button-block">
<input type="submit" value="Click" />
</div>
<div id="output">
<h2>Result:</h2>
<textarea name="result" id="result"></textarea>
</div>
Option 2: using plain js
document.addEventListener('DOMContentLoaded', function(e) {
document.querySelector('input[type="submit"]').addEventListener('click', function(e) {
document.querySelector('#result').value = document.querySelector('#value1').value;
});
});
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<div class="field">
<label for="value1">Introduce value</label>
<input type="text" id="value1" name="value1" value="" />
</div>
<div class="button-block">
<input type="submit" value="Click" />
</div>
<div id="output">
<h2>Result:</h2>
<textarea name="result" id="result"></textarea>
</div>
<script>
$( document ).ready(function() {
setTimeout(function(){
var val = document.getElementById('value1').innerHTML;
var generateHere = document.getElementById("result");
generateHere.innerHTML = val;
}, 2000);
});
</script>

Running javascript when document loads

I am trying to implement a script that will enable a submit button once a check-box is checked.
I am following an example found here: http://jsfiddle.net/chriscoyier/BPhZe/76/
I have added the following java-script code to my page but it doesn't seem like the script is executing properly. I do not see any errors in the console however.
<!---JQuery Iniialization --->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$( document ).ready(function() {
var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");
checkboxes.click(function() {
submitButt.attr("disabled", !checkboxes.is(":checked"));
});
});
</script>
Form Code:
<FORM ACTION="signature_action.cfm?ticket_id=#url.ticket_id#&device=pc" METHOD=POST NAME="SigForm">
<div align="center">
<h2>STEP 1</h2>
<strong>Select the type of signature that is being captured:</strong><br />
<table><tr><td align="left">
<div id="format">
<input name="equipment_dropped_off" type="checkbox" id="check1" value="equipment_dropped_off" />
<label for="check1"><span class="style1">Equipment Dropped Off </span></label>
<span class="style1">
<input name="work" type="checkbox" id="check2" value="work"/>
<label for="check2">Work performed </label>
<input name="payment" id="check3" type="checkbox" value="payment" />
<label for="check3">Payment Recieved </label>
<input name="equipment_picked_up" id="check4" type="checkbox" value="equipment_picked_up" />
<label for="check4">Equipment Picked Up</label>
</span><br />
<input name="tech_name" type="hidden" value="#url.tech_name#">
</div>
<input name="hidden" type="hidden" value="#url.tech_name#">
<input type="submit" name="submit" value="STEP 4 - SAVE SIGNATURE" disabled>
</form>
I am new to javascript and I am strugling a bit. Doesn't this need to run once the DOM is ready? (I am not sure how to do that!)
Can someone point me in the right direction?
As per this article: How to add onDomReady to my document?, I put my code inside:
window.onload = function() {
//code here
}
The event that must be listened is "change".
$( document ).ready(function() {
var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");
checkboxes.on('change', function() {
submitButt.attr('disabled', !this.checked);
});
});

Run a javascript function when a hidden input is changed by a radio button selection

I am having difficulty with getting a javascript function to run once the selection of a radio button is selected. I probably am just missing one little thing or maybe more.
<html>
<head>
<title>Place a title here.</title>
<meta charset="utf-8">
<script src="js\utilities.js"></script>
<script src="js\backgroundworker.js"></script>
</head>
<body>
<div id="master">
<form action='' method="post" id="LoginForm">
<div style='text-align: center'>
<div><label>Please pick a poulation size: </label></div>
<div style="width: 33%; float:left;"><label for="small">Small<input type="radio" name="PopulationSize" id="small" value="small" onclick="document.getElementById('checked_radio').value=this.value;" /></label></div>
<div style="width: 33%; float:left;"><label for="medium">Medium<input type="radio" name="PopulationSize" id="medium" value="medium" onclick="document.getElementById('checked_radio').value=this.value;" /></label></div>
<div style="width: 33%; float:left;"><label for="large">Large<input type="radio" name="PopulationSize" id="large" value="large" onclick="document.getElementById('checked_radio').value=this.value;" /></label></div>
<input type="hidden" id="checked_radio" name="checked_radio" value="" />
</div>
</form>
</body>
</html>
I have a standard javascript utilities to discovery and shorthand functions.
function Bobsalert(){
// get the value of the hidden text
var checked_radio = U.$("checked_radio");
//call alert popup
window.alert("change detected value is: " + checked_radio);
}
window.onload = function (){
if(U.$("checked_radio") !== null) {
U.addEvent(U.$('checked_radio'),'onchange', Bobsalert);
}
}
Thank you ahead of time for any help on this. I just seem to be stuck.

calling HTML using webViewShow in sl4a

trying out some basic html scripts with sl4a and my python application can't seem to call the HTML... trying to send data from a small form in the HTML over to the python side
here's the HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML form</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="body">
<h1>My Settings</h1>
<script type="text/javascript">
var droid = new Android();
function post_data(){
var values = [
['airplane', document.getElementById('airplane_mode').value],
['wifi', document.getElementById('wifi_on').value],
['brightness', document.getElementById('brightness').value],
['volume', document.getElementById('volume').value],
];
var q = '?';
for (i=0;i<values.length;i++){
var k = values[i][0];
var v = values[i][1];
if (q != '?'){
q = q + '&';
}
q = q + k + '=' + v;
}
droid.postEvent('save', q);
}
</script>
<form onsubmit="post_data();">
<div class="container">
<div>
<label for="airplane_mode">Airplane Mode</label>
<input id="airplane_mode" name="radio" type="radio" />
</div>
<div>
<label for="wifi_on">WiFi On</label>
<input id="wifi_on" name="radio" type="radio" />
</div>
<div>
<label for="off">Both off</label>
<input id="off" name="radio" type="radio" />
</div>
</div>
<div class="container">
<div>
<label for="brightness">Brightness Level</label>
<input size="5" id="brightness" type="text" />
</div>
<div>
<label for="volume">Media Volume</label>
<input size="5" id="volume" type="text" />
</div>
</div>
<div class="container buttons">
<div>
<input size="5" id="save" name="save" type="submit" value="Save Settings" />
<input size="5" id="cancel" name="cancel" type="button" value="Cancel" />
</div>
</div>
</form>
</div>
</body>
</html>
here's the python end that uses the values passed from the js in the HTML to alter some phone options
import android
import urlparse
droid = android.Android()
droid.webViewShow('file:///tablet/sl4a/scripts/html/options.html')
while True:
result = droid.eventWaitFor('save').result
data = urlparse.parse_qs(result['data'][1:])
droid.toggleAirplaneMode('airplane' in data)
print 'airplane' in data
droid.toggleWifiState('wifi' in data)
print 'wifi' in data
droid.setScreenBrightness('screen' in data and 255 or 0)
thing is once I execute the python code, it does not call the webViewShow at all and simply closes stating that the response is not parseable because it's value is none, not a tuple so where exactly did I go wrong?
update: Tried different formats for the url so none worked. the webview itself is not being called
update 2: okay... webview is opening but all I get is a blank page that forces me to perform a hard kill using the task manager as sl4a freezes up there, as if it's trying to render the html
update 3: had the webViewShow refer to a non existent address and the screen issue keeps on happening. any ideas?
Py4A is the latest and SL4A version is R6. running on android 4.1.2
droid.webViewShow('file:///tablet/sl4a/scripts/html/options.html',None)

Categories