How to pass textbox value to this script? - javascript

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

Related

How can I get dynamically input field id in jquery on button click and save to another button.

I am totally fresher in JavaScript and jQuery can anyone help me or suggest regarding this task how can I do this.
I have a task, I want want get dynamic id of input field on button click, I have 100 dynamic input field
<input id="ProgressBar_1" type="text" name="dProgressBar_1" class="form-control bulk-pricing-streetProgressBar">
<input id="ProgressBar_2" type="text" name="dProgressBar_2" class="form-control bulk-pricing-streetProgressBar">
these are my id's, I want to get these id's on button click there code I have mention below.
<button type="button" class="btn fa fa-arrow-right next-stepBulkProgressBar btn-success __web-inspector-hide-shortcut__" id=" "></button>
Finally I want store these getting id's in another button.
<button id="" class="btn btn-danger handleIncorrectNoBtn" type="button">Remove House</button>
Finally I Want to perform some task on this button.
Ill give you a couple of hints, though i find it very hard to fully understand what you are trying to achieve here. Maybe rewrite your question, provide some specifics and be more clear if possible.
[From what i understand]
your first part is a button that when clicked will retrieve the ids of input fields?
lets say this is your button:
<button type="button" class="btn fa fa-arrow-right next-stepBulkProgressBar btn-success __web-inspector-hide-shortcut__" id="myButton"></button>
the click code would look similar to (i'm kind of pseudo coding this af you have provided no example or demo i can use to test, my apologies if this is not correct):
function {
var ids = [];
$('#myButton').on('click', function() {
ids = [];
$("input .classOnAllInputIdsYouWantToGet").each(function(e){
ids.push(e.attr("id"));
});
// store in a variable here or continue using the ids variable
// created above - this can be used anywhere within this function
});
function myOtherFunctionINeedIds(){
// Use ids here
}
}
im not sure if this is what you are after, if not please update or amend your question and i will change my answer to try get exactly what you are after.
good luck.

Using JavaScript with form data

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);

What it is the jQuery equivalent function of Javascript DafaultValue()

I want to get the default value of an input textbox when the page was loaded. As I searched around I saw that the DefaultValue() is a method to get a value from a textbox when is loaded . But what is the jQuery one?
<input id=text > </input>
<script>
$(#text).DefaultValue(); // This is wrong I need the Jquery function of this
</script>
Any Idea?
You can read the defaultValue DOM property like this:
$('#text').prop('defaultValue')
Heres a working example
$('#value').click(function(){
alert($('#text').val())
});
$('#def').click(function(){
alert($('#text').prop("defaultValue"))
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="text" value="This is the default value">
<button id="value">Click to see the current value</button>
<button id="def">Click to see the default value</button>
If you want to call a Javascript DOM function on a jQuery object, you can simple extract the corresponding DOM object with .get(0) or [0]:
$("#text").get(0).defaultValue;
$("#text")[0].defaultValue;
Note also that you were calling the basic JS wrong. First, it's defaultValue, not DefaultValue. Second, it's a property, not a method, so there's no parentheses after it.
Try this,
$(function(){
console.log($('#text')[0].defaultValue);
// or try
console.log($('#text').prop( 'defaultValue' ));
});
Read https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement

storing and loading input data in localStorage step by step

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/

Setting HTML textbox value using javascript function?

I'm using this code to set the HTML textbox value using Javascript function. But it seems to be not working. Can anyone point out, what is wrong with this code?
Whats your Name?
<input id="name" value="" />
<script type="text/javascript">
function setValue(value){
var myValue=value;
document.getElementsById("name").value = myValue;
}
</script>
the "value" is came from my android java class using this codes
String value = "Isiah";
WebView web = (WebView) findViewById(R.id.web1);
web.getSettings().setJavaScriptEnabled(true);
web.loadUrl("file:///android_asset/www/webpage");
web.loadUrl("javascript:setValue("+ value +")");
function setValue(value) {
var myValue=value; //unnecessary
document.getElementById("name").value= myValue;
}
But then as pointed out in the comments, you need to call setValue(value) somewhere in your code. Right now you just defined the function is never called.
You could either access the element’s value by its name:
document.getElementsByName("textbox1"); // returns a list of elements with name="textbox1"
document.getElementsByName("textbox1")[0] // returns the first element in DOM with name="textbox1"
So:
input name="buttonExecute" onclick="execute(document.getElementsByName('textbox1')[0].value)" type="button" value="Execute" />
Or you assign an ID to the element that then identifies it and you can access it with getElementById:
<input name="textbox1" id="textbox1" type="text" />
<input name="buttonExecute" onclick="execute(document.getElementById('textbox1').value)" type="button" value="Execute" />
You are using document.getElementsById("name") it should be document.getElementById("name")
not Elements it is Element
You are not linking the function to anything. For example, a click:
<input id="name" value="" onclick="javascript:this.value=12;"/>
Replace the onclick attribute for your desired function, whatever it does (you need to be more specific)
Also, there is no language attribute (at least not anymore) use type="text/javascript" instead
Here is a fiddle: http://jsfiddle.net/4juEp/
Click the input to see it working.
Look at this second fiddle. http://jsfiddle.net/4juEp/1/
which loads whatever is defined in the hid input to the name input.
Firstly, you have a typo in your javascript function i.e. you have used getElementsById as compared to getElementById
To set the value of the textbox on page load, I suggest you use an alternative
<body onload="setValue('yourValueToSet');">
<!-- Your usual html code in the html file -->
</body>
I think you are missing the quotes,
try,
web.loadUrl("javascript:setValue('"+ value +"')");
also consider about the typo.
Check this out:
<body onload="setvalue($value);">
Whats your Name?<input id="name" name="name" value=""/>
<script type="text/javascript">
function setValue(value){
document.{formname}.name.value = value;}</script>
It's not Elements
It's Element
You should use document.getElementById('object-id');

Categories

Resources