Trying to store a bunch of text boxes once filled and button clicked to local storage. I've looked around and have only found this which I'm trying except im getting Uncaught ReferenceError: save_data is not defined. Any insight would be appreciated.
<label for="serveri"> Server: </label> <input type='text' name="server" id="saveServer"/> <button onclick="save_data()" type="button" value="Save" id="Save">Save</button>
<script>
function saveData(){ var input = document.getElementById("saveServer");
localStorage.setItem("server", input.value);
var storedValue = localStorage.getItem("server"); } </script>
If the above doesnt show my problem heres the full in jsfiddle:http://jsfiddle.net/hhntg/
Edited your jsfiddle to make things work. You just need to run that function when the button is clicked. Tested and verified working with localstorage through the inspector.
http://jsfiddle.net/hhntg/1/
var save_button = document.getElementById('Save')
save_button.onclick = saveData;
function saveData(){
var input = document.getElementById("saveServer");
localStorage.setItem("server", input.value);
var storedValue = localStorage.getItem("server");
}
The only difference in the code here is that the function you wrote is attached to a click handler on the save element, you were nearly there : )
From my observations. You have the function name as saveData where as you used save_data for the button
Related
so I have an input element with the id of "answer" and a button. I've added an event listener for the button and tried to call a function that saves the text inside of the input into local storage. The console is telling me that "innerHTML" is null, but i'm not sure what I'm supposed to do.
<input type="text" id="answer" />
<button id="button">click me</button>
var inputAnswer = document.getElementById("#answer")
var buttonEl = document.getElementById("button")
buttonEl.addEventListener("click", saveToStorage())
function saveToStorage() {
localStorage.setItem("task", inputAnswer.innerHTML);
}
<input type="text" id="answer" />
<button id="button">click me</button>
<script type="text/javascript">
var inputAnswer = document.getElementById("answer");
var buttonEl = document.getElementById("button");
buttonEl.addEventListener("click", addAnswerToLocalStorage);
function addAnswerToLocalStorage() {
const value = inputAnswer.value;
localStorage.setItem("answer", value);
}
</script>
There is mistake in getting the reference of input field. Instead of #answer document.getElementById("#answer") it should be only answer only. Further, I checked it on my local machine and it is working fine.
getElementById() expects an ID, no hashtag. Change var inputAnswer = document.getElementById("#answer") to var inputAnswer = document.getElementById("answer") (remove the #).
buttonEl.addEventListener("click", saveToStorage()) invokes the saveToStorage() function immediately, which is not what you want. Instead, pass it as a reference: buttonEl.addEventListener("click", saveToStorage).
I am currently working on a project that I took over with the input reads from a barcode, currently iam having trouble with my output giving me a fix value which the code reads from and does not read from the actual input.
below is the html code for the scanner. it reads fine
<div class="section" id="instruction-3">
<p>Otherwise, scan your code at the bottom, or manually type it in here:</p>
<span>
<input type="text" id="IC-input" name="IC" onclick="openKeyboard()" onkeyup="autofill(this.value)" placeholder="Enter your IC Number" required maxlength="9">
<label><button type="button" id="theButton" onclick="theButtonIsPressed()">Submit</button></label>
</span>
</div>
follow by the javascript (which i suspect is where the problem lies but am not sure)
<script>
var NRIC = '{"NRIC":"0"}';
function theButtonIsPressed(){
closeKeyboard();
console.log('button clicked');
NRIC = '{"NRIC":"123456789"}';
//var IcNum = document.getElementById("IC-input").value;
//NRIC = NRIC.replace("0", IcNum);
document.getElementById("IC-input").value = "";
doWork(NRIC)
}
</script>
function doWork(NRIC) {
// ajax the JSON to the server
$.post("receiver", NRIC, function(){
});
// stop link reloading the page
function update() {
setInterval(function(){$.post("receiver", '{"NRIC":NRIC}', function(){});}, 900);
It keeps giving me the value inside NRIC = '{"NRIC":"123456789"}'; which is 123456789, i realize this might be a simple fix but i am still learning and am unsure.
thank you in advance.
If I correctly understanded you want to have in the obj the input value, so try this:
function theButtonIsPressed(){
closeKeyboard();
console.log('button clicked');
var IcNum = document.getElementById("IC-input").value;
NRIC.NRIC = IcNum;
doWork(NRIC)
}
Why quotes around an object?
var NRIC = {"NRIC": 0};
function theButtonIsPressed() {
NRIC = {"NRIC": 123456789};
doWork(NRIC)
}
all but I have solved the problem, it was my fault that I did not mention I wanted to transfer the data to another webpage, and the problem with that was that the data was not transferred over to the other html.
function autofill(value){
console.log("Autofill:"+value)
//console.log(9 digits);
button = document.getElementById("theButton");
if(value.length == 9){
console.log('form is ready to submit');
theButtonIsPressed(value);
}
}
function theButtonIsPressed(value){
closeKeyboard();
console.log('button clicked');
//NRIC = '{"NRIC":"123456789"}';
console.log(value)
doWork(value)
}
by doing this it read the value as accordingly from the input and worked after, sorry again for my confusing question and thanks to everyone who tried to help.
I have a HTML page with an input field
Someone enters some text into it
They click a button
I want to grab the value of the input field AFTER they click the button with some JS code(client-side) and then print it to the console/save it to a file.
How would I go about doing this?
I've tried looking but I can't find anything like this at all :/
Thanks! :)
This example should help you to achieve your goals.
const inputNode = document.getElementById('input');
const buttonNode = document.getElementById('button');
buttonNode.addEventListener('click', () => {
const inputValue = inputNode.value;
// do what ever you wan't
});
<input id="input" type="text" />
<button id="button">Click</button>
Try this:
// This function is called by the HTML code onclick on the button
var get_content_of_input = function(){
var user_input = document.getElementById("text_field").value;
// Now you can use the variable user_input containing the text
}
<input id="text_field">Please enter Text</input>
<button id="button" onclick="get_content_of_input()">Click here to sumbit</button>
The content of the text field will now be saved in the variable "user_input".
I'm trying to pass a JavaScript variable to the value of an hidden input button to use in my PHP file output.
My HTML is:
<input type = "hidden" id = "location2" name = "location2" value = ""/>
I'm using this onclick="myFunction();" in my "Submit Form" input to run the function as it is not able to be done in the window.load()
My JavaScript below is calling indexes from another function and assigning the text to the variable 'location' (I know this sounds strange but it was the only way I have got it to work so far):
function myFunction() {
var x = document.getElementById("box2").selectedIndex;
var y = document.getElementById("box2").options;
var location=(y[x].text);
document.getElementById("location2").value=(location);
}
Any help would be hugely appreciated as I am really struggling and have been working on this for some time (as you can probably tell, I dont really know what I'm doing) - I just need to call the value of this variable into my PHP file output and the majority of my web form is completed.
Thanks very much
Marcus
I've just changed my HTML as follows
I've removed myFunction from my submit
I've added the following HTML button:
<button onclick="myFunction();" id = "location2" name = "location2" value="">Click me</button>
The variable is now passing!!!! The only problem is when I press the onclick button, it is now submitting my form!!
Is it okay for me to replace my previous submit button with this code??
THANKS TO EVERYONE FOR THEIR HELP ON THIS!!
I Was not sure what you doing but below example may help you. It will post the value as well as the option text.
Here we are using print_r to print the $_POST array from the AJAX Request. using this method, you should be able to debug the issue.
<!DOCTYPE html>
<html>
<body>
<?php if($_POST) {
print_r($_POST); die;
} ?>
<form name="" id="" method="post" >
Select a fruit and click the button:
<select id="mySelect">
<option>Apple</option>
<option>Orange</option>
<option>Pineapple</option>
<option>Banana</option>
</select>
<input type = "hidden" id = "location2" name = "location2" value = ""/>
<input type = "hidden" id = "locationname" name = "locationname" value = ""/>
<button type="submit" id="submit">Display index</button>
</form>
<script>
function myFunction() {
var x = document.getElementById("mySelect").selectedIndex;
var y = document.getElementById("mySelect").options;
//alert("Index: " + y[x].index + " is " + y[x].text);
document.getElementById("location2").value=(y[x].index);
document.getElementById("locationname").value=(y[x].text);
//alert($("#location2").val());
}
var submit = document.getElementById('submit');
submit.onsubmit = function(e){
myFunction();
};
</script>
</body>
</html>
i'm assuming your form method is 'POST' and action value is the same php page where you are expecting to see the 'location2' hidden input value, if that is the case, you can use $_POST['location2'] to get the value in that php page.
Yes it is fine to use button tag by default it acts like the submit button inside the form tag. You can also make it act like button(won't submit the form) by using the attribute type='button'.
Edited
button or input type='submit' can submit the form only when it is placed within the form tag(without javascript).
<form action='http://www.stackoverflow.com/'>
<button>stackoverflow</button> <!-- this works -->
</form>
<form action='http://www.stackoverflow.com/'></form>
<button>stackoverflow</button><!-- this won't work -->
var go = function() {
document.forms[0].submit();
};
<form action='http://www.stackoverflow.com/'></form>
<button onclick='go()'>stackoverflow</button><!-- still works -->
I'm trying to simply have a button update the contents of ah HTML textbox (on the client side).
Clicking the button fires the updateBox() method fine. Stepping through the code, I can see the text1.value field update fine but the text1 does not seem to get updated by changes to the dom.
Am I mistaken to think that you can do updates on the client side only by modifying dom data?
<input type=text name="text1" value="100"/>
<button name="but1" id="but1" onclick="updateBox" >clickme!</button>
<script type="text/javascript" >
var text1 = document.getElementsByName('text1');
function updateBox() {
//text1.value = "22"; <----tried this way, no good either :(
text1.innerHTML = "99";
}
</script>
Few things:
onclick="updateBox" should be onclick="updateBox()"
var text1 = document.getElementsByName('text1'); should be var text1 = document.getElementsByName('text1')[0]; (note the [0])
text1.value = "22"; is the one to use
jsFiddle example
Try use below,
var text1 = document.getElementsByName('text1')[0];
function updateBox() {
text1.value= "99";
}
Ref: https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByName
Thanks for everyone's responses.
With your advice I got the button to update. I appreciate the advice on how to implement the function correctly. This was just a test so I didn't pay much attention.
1) I had to use: onclick="updateBox" rather than "updateBox() in the button HTML because "updateBox" caused the event to fire with out clicking the button.
2) Big thanks for pointing out that I was referencing a collection instead of an item in the collection. Had to use: var tb1 = document.getElementsByName('tb1')[0];
3) For some reason the box would not update when I used:tb1.innerHTML = "99";
This worked: tb1.value = "99";
text1[0].innerHTML = "99"
Use innerHTML instead of value
try passing the variable to your function instead of declaring it outside of your function.
<input type=text name="text1" value="100"/>
<button name="but1" id="but1" onclick="updateBox('text1',99)" >clickme!</button>
<script type="text/javascript" >
function updateBox(t,v) {
var tv = document.getElementsByName(t)[0];
tv.value = v;
}
</script>