I am trying to use localStorage to store some input data.This is what I came up with and no it does not work.Can someone explain to me how I can get this to work? I have searched for tutorials but I find it hard to understand how to store and retrieve the data from the localStorage.This is my script:
<body onLoad="get();">
<article id="hldr">
<input type="text" id="kID" class="regTXTBOX" placeholder="office ID">
<input type="text" id="gID" class="regTXTBOX" placeholder="user ID">
<button id="save" onClick="store();" style="margin-bottom:20px;">save data</button>
<button id="login" onClick="store();">log-in</button>
</article>
<span id="1"></span>
<span id="2"></span>
</p>
<script type="text/javascript">
function store(){
var kid = document.getElementById("kID");
localStorage.setItem("kidStore", kid.value);
}
function get(){
var one = document.getElementById('1').value
one = localStorage.getItem("kidStore");
}
</script>
</body>
I want it to fire when the page loads, although I probably don't even need the onLoad function for that.
I also don't really need the button to save the data but I just put it in for testing.
If someone can provide me a step-by-step explanation to get this to work I would be very happy.
Your problem is that the span element does not have a value property. So changing it to innerText will make it work (along with the assigning problem which I mentioned in the comments).
The following will work:
document.getElementById('1').innerText = localStorage.getItem("kidStore");
Working fiddle: http://jsfiddle.net/k6r53/
Related
I am looking for a solution on passing data from a specific input text field to AngularJS. it may be a Javascript variable too. If the variable is changed from inside a javascript code it is not updating on AngularJS side. If i take the same variable and in the text field add at least one character or modify something i see variable updating and everything working as it should.
I tried something with angular.element(document.getElementById('ControllerElementID')).scope().funct(); but still no luck. When i update at least one field from the keyboard, all text fields that are related to "ng-model="sig.sigBase6422"" are updating properly as it should. If i call this updates through a JavaScript function i see updates only on specific text field and no updates at all on ng-model happening. How to make it updating as simple as possible? Below i will post a small example. I was able to store data from variable to a external file and in AngularJS read it from file and use it. this is way too long, complicated and ridiculous. I am sure there should be a better way.
Thank you!
<script type="text/javascript">
function addtext1() {document.getElementById("myID1").value = "1111111111111111";}
function addtext2() {document.getElementById("myID2").value = "2222222222222222";}
</script>
<div>
<form action="#" name="FORM1">
<TEXTAREA NAME="sigData" ng-model="sig.sigBase6422" ROWS="10" COLS="20">String: </TEXTAREA>
</form><br>
<input type="text" name="myID1" id="myID1" ng-model="sig.sigBase6422" ><br>
<input type="text" name="myID2" id="myID2" ng-model="sig.sigBase6422" ><br>
<p>Value {{sig.sigBase6422}}!</p>
</div>
<!-- test field -->
Add text 1
Add text 2
Indeed if you want to use AngularJS for what it was created, you have to rewrite your code completely using directive or controller. You variables and functions accessible from the view should be attached to the $scope too.
var myApp = angular.module("myApp", []);
myApp.controller("myCtrl", function($scope){
$scope.addtext1 = function () {
$scope.sig.sigBase6422 += "1111111111111111";
};
$scope.addtext2 = function () {
$scope.sig.sigBase6422 += "2222222222222222";
};
$scope.sig = {
sigBase6422: ""
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<form action="#" name="FORM1">
<TEXTAREA ng-model="sig.sigBase6422" ROWS="10" COLS="20">String: </TEXTAREA>
</form><br/>
<input type="text" name="myID1" id="myID1" ng-model="sig.sigBase6422" /><br/>
<input type="text" name="myID2" id="myID2" ng-model="sig.sigBase6422" /><br/>
<p>Value {{sig.sigBase6422}}!</p>
<!-- test field -->
<button ng-click="addtext1()">Add text 1</button>
<button ng-click="addtext2()">Add text 2</button>
</div>
You seem to have misunderstood how angular works. What you're trying to do is not how angular works. What you're trying to do with native JavaScript can be done with angular. Angular can update dom and Dom updates angular as it's responsible for causing updates.... anyway without getting any deeper. You need to read more on how angular works and try sticl within the bounds of angular instead of mixing.
That being said :
Tigger change on the Dom element after you have updated its value. Or better yet get access to scope variable on the Dom and call a function in angular with the value you're and set they value from inside of a angular.
Use this code while updating the value.
pick the controller first using
var scope = angular.element(document.getElementById('yourControllerElementID')).scope();
scope.<variablename> = <your operation>;
then
scope.$apply();
the remaining thing will be taken care by Angular.
I am attempting to simply pull an input from an html form and manipulate it with JavaScript. When I console.log the variable I created in JavaScript I am just getting my html element back. If I attempt to add [0] or .value, I get undefined and a JQuery error, respectively. I am at a loss as to the reason this isn't working. If it matters I am doing all this in CodePen.
HTML:
<div>
<form id="myForm">
Construction Year: <br>
<input type="text" id="construction_field" name="construction_field" value=""><br>
</form>
<button onclick="myFunction">Find P</button>
<p id="demo"></p>
</div>
JavaScript:
$(document).ready(function(){
function myFunction () {
var constructionYear = document.getElementById("construction_field");
console.log(constructionYear);
}
});
I apologize for such a simple question, but I can't find an answer that works to save my life. If it isn't obvious I am very new and struggling, any examples would be amazing.
If you wish to use jQuery:
var constructionYear = jQuery('#construction_field').val();
If you wish to use vanilla JavaScript:
var constructionYear = document.getElementById('construction_field').value;
Just use console.log(constructionYear.value);
I have this textbox
<input type="text" autocomplete="off" required="required" id="bar" name="bar" class="form-control" placeholder="Barcode">
and this button
<button type="button" style="float:right;" class="btn btn-primary"><i class="fa fa-barcode"></i> Generate Barcode</button>
I want to get that texbox value and pass it tho this script to generate a barcode
<center><img id="barcode2"/>
<script>
JsBarcode("#barcode2", "9780199532179", {
format:"EAN13",
displayValue:true,
fontSize:24
});
</script>
</center>
The "9780199532179" is supposed to be the textbox value. I've tried to create a function with the script and everything but i can't get it to work. Any help would be appreciated.
you can refer this page for your solution http://lindell.me/JsBarcode/
generally store the value by it's tag name into a js variable
i.e., var i=document.getElementById("bar").value;
JsBarcode("#barcode2",i, {format:"EAN13",displayValue:true, fontSize:24 });
If you have jQuery, you can read the value of the element using $("#bar").val(). This value can be then passed into your function.
It would look something like this:
var inputVal = $("#bar").val();
JsBarcode("#barcode2", inputVal, {
format:"EAN13",
displayValue:true,
fontSize:24
});
document.getElementById("bar").value
I hope this is you looking for. If you dont know about what i mentioned please google getElementById and go to W3school tutorial
I have a search box that needs to be within a form so that it can post to another page for a search functionality to work.
I originally had this working fine in Firefox by using an iFrame, but using the search box would simply refresh the when using Internet Explorer.
I found out that it worked fine if I simply created another form underneath the current one, however this obviously leaves it in the wrong place on the page.
I attempted to use the jQuery clone() method that I have succesfully used elsewhere on the site, but this is refusing to work.
I looked around and found another way of using the clone() method and I have it working fine within jsfiddle, but it will not work on my site.
This is the div that I want to populate:
<div id="CustomerSearch">
2
</div>
And this is the div that I want to be cloned:
<form name="frmCustomerList" action="../CustomerList/default.asp" method="post">
<div id="CustomerSearchClone">
1
Customer Search: <br />
<input type="text"id="txtSearch" name="txtSearch" class="Searchbox" />
<input type="submit" value="View" name="txtSearchSubmit" />
</div>
</form>
This is the script that I am using in an external file:
var CustomerSearch = jQuery('#CustomerSearch');
var CustomerSearchClone = jQuery('#CustomerSearchClone');
CustomerSearch.html(CustomerSearchClone.clone(true));
I have it working in JSFiddle here: http://jsfiddle.net/de9kc/92/
Any ideas?
Thanks guys
I'm not a .NET guy but the div you are pasting too is still within a form tag so I'm not certain that this wouldn't cause a hiccup for .NET at submission time (or postback, or whatever).
However, with respect to getting the cloned form elements where you wanted them per the layout you demonstrate in your question;
I modified the pre-result html like so:
//html
<form id="form1" runat="server">
<div id="CustomerSearch">2 Customer Search:</div>
</form>
<form name="frmCustomerList" action="../CustomerList/default.asp" method="post">
<div id="CustomerSearchClone">1 Customer Search:
<br />
<input type="text" id="txtSearch" name="txtSearch" class="Searchbox" />
<input type="submit" value="View" name="txtSearchSubmit" />
</div>
</form>
then i used this jQuery:
// the vars you already created
var CustomerSearch = jQuery('#CustomerSearch');
var CustomerSearchClone = jQuery('#CustomerSearchClone');
// using .clone(true, true) for deepWithDataAndEvents - not sure if you want this?
// will the .clone(true, true) retain input's link to original form id? I'm uncertain
// using .children() because clone's intended destination already has a div container
CustomerSearchClone.children().clone(true, true).appendTo(CustomerSearch);
// hide clone's source after cloning; no sense in having both search boxes visible
CustomerSearchClone.hide();
Note: Using .clone() has the side-effect of producing elements with duplicate id attributes, which are supposed to be unique. (per http://api.jquery.com/clone/)
But you are appending the cloned elements into a different form tag, so maybe a non-issue.
I'm just learning jQuery myself, but I thought I would give the solution a shot ;-$
JSFiddle here: http://jsfiddle.net/de9kc/190/
This is my first time using jquery and while this is a fairly simple task I'm stuck already.
I've got a input box with the time of day in it. I would like to create a button to grab the time and send it to a variable (setTime) so I can use the time elsewhere in the script.
However I'm having trouble the variable to pass, I've added an alert window but all I get is either a blank alert or an "undefined" alert.
The first line Start Time.... works fine its the setTime stuff that's broken.
Page header:
setTime = $('#setTime').text();
$('#formTime').timeEntry({show24Hours: true});
Page body:
<p>Start Time <input type="text" size="2" id="formTime" class="spinners" value="" /> </p>
<input type="button" value="Set Time" onclick="$('#setTime').val('#formTime');" />
<input type="button" value="Show Date" onclick="alert(setTime);" />
Thanks
You have to make a few changes to your code.
Update your Html by adding some ids for example.
<p>
Start Time <input type="text" size="2" id="formTime" class="spinners" value="" />
</p>
<input id="setTime" type="button" value="Set Time" />
<input id="showTime" type="button" value="Show Date" />
Personally I don't like assigning script to events within the html controls as they become hard to maintain and add clutter to the page.
You can write script at the bottom of the html page within a script tag or better yet, use an external js file. External js files will also keep your Html clean and your scripts unobtrusive.
var setTime = 0;
var $fromTime = $("#formTime")
$("#setTime").off("click").on("click", function(){
setTime = $fromTime.val();
});
$("#showTime").off("click").on("click", function(){
alert(setTime);
});
See working DEMO
Using jQuery can be confusing at times but the on-line documentation is fantastic.
#setTime means "The element with the id 'setTime'" - you have no element with that id, and the control you are trying to get the value of has no id at all.
timeEntry is not a jQuery method, so will error when you try to call it. If you are using a plugin that you think should add that method then you should say so.
.val('#formTime') will set the value of a form control to the string #formTime. If you want to get the value, don't pass that method an argument … and do assign the return value of the method call to something.
You should probably work through an introduction to programming and JavaScript.