Update boostrap input externally with jQuery isn't showing - javascript

I've tried:
$(element).attr("value", newValue);
which changed the value when I inspect the element but it doesn't show when I look at the actual input. I've then tried to .trigger different stuff but it doesn't work. (I've also tried $(element).val(newValue)).
EDIT: Found the error, I imported an obj from the server in JSON format. When I parsed it, the property I wanted to use didn't work as expected in the val function. Only sometimes it worked. To fix it I, when parsing it, used eval() on the object property.

Try using jQuery's .val() method:
$(element).val(newValue);
Bootstrap should not be making any difference here.
Always check what you are passing to the val() (or any other) function and what that function expects as parameter, especially when using a specific unit or doing some calculations which might end up being string concatenations instead.
jQuery("input").val(456);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="input"></label>
<input type="text" class="form-control" id="elementID" placeholder="..." value="123">

Related

Unable to fetch DOM elements Value

I have loaded an HTML page and ran some javascript code on the console. Can any one explain me the behavior.
document.getElementById('tiers__0__.threshold1') gives me
<input id=​"tiers__0__.threshold1" type=​"text" class=​"field mandatory" data-name=​"tiers__0__.threshold1" data-domain=​"ANY" name=​"dynamicValues['tiers__0__.threshold1']​" value=​"5" maxlength readonly>​
document.getElementById('tiers__0__.threshold1').value gives me
""
document.getElementById('tiers__1__.threshold1') gives me
<input id=​"tiers__1__.threshold1" type=​"text" class=​"field " data-name=​"tiers__1__.threshold1" data-domain=​"ANY" name=​"dynamicValues['tiers__1__.threshold1']​" value=​"10" maxlength readonly>​
document.getElementById('tiers__1__.threshold1').value gives me
"10"
Why is the 1st DOM element not giving me the value. Both the DOM elements have same structure. I generate them using Handlebars "each" property.
P.S. I know sometimes the DOT in an id creates issue. Even tried using escape sequence (//). Nothing worked. Tried Jquery also
$('#tiers__0__\\.threshold1').val() (Used double slash. SO just displays 1) gives me
""
Question Updated after more research.
The earlier test was done on Chrome browser but after doing it on Firefox got different result.
$('#tiers__0__.threshold1')
Object[input#tiers__0__.threshold1.field property value = "" attribute value = "5"]
Can anyone explain what is property value and why it it getting appended only for my 1st text box as null. Is their any way i can make this same as my attribute value or i can remove it completely.
Note -: I am using handlebar template for rendering a JSON object. I have checked both the JSON and Handlebar consists of uniform data. i have a input tag which looks like this
<input id="{{name}}{{#if count}}{{count}}{{/if}}" type="text" class="field {{#if this.mandatory}} mandatory{{/if}}" data-name="{{name}}" data-domain="{{domain}}" name="{{bindingName}}" value={{val}} maxlength="{{this.maxLength}}" {{#if this.locked}}readOnly{{/if}}/>
It renders perfect for other values in the for loop,only screws the 1st one with an extra property

How do I pull a value from an object #nodelist

I have a javascript that I am trying to write to do a comparison with a list of objects. But first I need to pull the value from the below HTML.
<div class="no_icon" style="width:100%;display:-moz-deck;">
<input title="model1" onfocus="thtmlbSaveKeyboardFocus('product_type');" class="class1"
style="width:100%;" dir="ltr" name="product_type" id="product_type" maxlength="40"
onkeydown="if(htmlbEnterKey(event)==true){return
htmlbSL(this,2,'product_type:submitonenter','0')};" value="model1" disabled="disabled"></div>
my issue happens when I try to pull the information I need from the page. I have tried several versions of the "document.getElement" commands,(TagName,ID,Class) but I cannot seem to pull the information i need.
When I tried to see if i could even access the input I received either a null or undefined return. but when I do a
var test=document.getElementsByTagName(product_type.class1");
console.log(test);
I get a return of object# nodelist
After doing some digging into nodelists I have discovered that "product_type.class1" has an attribute of namedNodeMap. But nothing i seem to do can pull the value section from within the HTML.
What I need is a way to get the value of the "value="field.
I think you will have more success using querySelector instead of getElementsByTagName:
var input = document.querySelector("[name='product_type']");
console.log(input.value);

Proper way to retrive HTML textbox data using JavaScript

Assuming I have a simple HTML page like the following:
<html>
<head>...</head>
<body>
<input type="text" id="mytextarea" />
<input type="button" id="button1" onClick="..." />
<input type="button" id="button2" onClick="..." />
</body>
</html>
What is the best way to access the text in the text-field with id="mytextarea" in a JavaScript function, without creating code heavily coupled to the HTML page, given the knowledge that button1 and button2 cause different manipulations on the text?
Just as an example, assume I am expecting a binary number in the text field, and button1 will convert it to an integer decimal number, but button two will convert it to a fractional decimal number. How can I handle this without tightly coupling the JavaScript code to the HTML page? Is there some way to send the data in mytextarea down to the JavaScript code, without having to use a document.getElementById('mytextarea') in the JavaScript functions themselves?
Perhaps I should clarify,
I am not looking for an alternative to using getElementById, I am looking for a way to write JavaScript code that can use a text-field in an HTML page without being coupled to it. In other words, I would like to know how to write JavaScript functions and HTML pages in such a way that (1) the JavaScript functions can perform work on data in the HTML page and (2) the JavaScript function can be be moved to another HTML page and used there, without changing said function.
I think this is what you want:
First you create an object called Textarea that lets you pass a textarea element as an argument:
function Textarea(textarea) {
this.container = textarea;
this.value = textarea.value
};
Then you can add methods shared by every instance of the Textarea object:
Textarea.prototype.ChangeValue = function(){
console.log( 'Please add your ' + this.value );
};
In this way, you can pass mytextarea and modify it as you want. This allows to reuse properties and methods in your object in other textareas or other projects where you need it.
t = new Textarea(document.getElementById('mytextarea'));
t.ChangeValue();
Demo: http://jsfiddle.net/SQ2EC/
Since you need some way to inform the functions about the elements to be operated on, there are two simple options. You can pass a reference to an element as a parameter when calling a function, as in
onclick="manipulate(document.getElementById('mytextarea'))"
Or you could pass just the id attribute value:
onclick="manipulate('mytextarea')"
in which case the function would need to use document.getElementById(), but on its parameter, not a wired-in string.
The first approach is more flexible in the sense that it lets you construct a reference in some other way too, e.g. document.getElementsByTagName('textarea')[0].
You could combine the approaches, by writing the function so that it can handle both kinds of parameters. It could e.g. first check whether its argument is of string type and use document.getElementById() on it if it is, otherwise expect it to be a reference to an element. And you should probably have some sanity checks in the function, testing that what you get or construct is really a reference to a textarea element.
I dint get what exactly you want to do but here you can get value of textbox on it's change event
<script>
$(document).ready(function () {
$('input[id$=mytextarea]').change(function () {
alert($(this).val());
.............
now you have got the value so convert it to decimal and do other stuff
});
});
</script>

JavaScript variable name and HTML input name attribute: namespace collision?

In an HTML file I have the following:
<input type="..." name="myInput1" />
In a corresponding JS file I have the following variable which will hold the string value of that input after blur:
var myInput1;
Is there any problem in having these two identical names? I'm guessing that the namespaces are separate so it is ok.
Short answer, no problem whatsoever.
A short answer is, indeed, no. However, it also greatly depends on how you use the variable. Let's consider that you use javascript for validating that the variable is set as follows:
if(myInput1) {do something}
If you also decide to set the id to be the same as the name is as follows (cause you didn't specify that, it can be anything):
<input type="myInput1" name="myInput1" />
your variable myInput1 will be set to contain the DOM element and won't be empty anymore.
This link between JS and HTML is not only interesting but can be used to create an exploit as described in the section 3.1.2 of Postcards from the post-XSS world (that's where I have the idea from - and yes, it still works even though the article is from 2011).

javascript not getting value of input box

I seem to be having trouble with passing the value of an input box to anything else in my javascript.
It's not producing any errors - and I remember reading somewhere that you can have issues if the document hasn't finished loading - but I'm pretty sure it has!
The code in question is as follows in the javascript:
var address = getElementById(addyInput).value;
document.getElementById('add').innerHTML = address;
And in the HTML
<form>
<input name="addyInput" placeholder="Don't forget postcode!">
</form>
<button id="start" onclick="initialize()">Start!</button>
<p>Address Test
<div id="add"></div>
</p>
I know that the button itself is working as it fires the rest of my code fine without the offending code - however the moment I uncomment that little block at the top, it just does nothing. (no errors etc)
Any help on that one would be hot! Thanks :)
Update:
I now have it working! Thanks muchly for all the help!!
Your form needs to look like this (add an id attribute):
<form>
<input id="addyInput" name="addyInput" placeholder="Don't forget postcode!">
</form>
And the first line of Javascript needs to look like this (since getElementById is expecting an ID rather than a name).
var address = getElementById('addyInput').value;
Additionally, getElementById expects the id argument to be a string (hence the quotes). If you pass it addyInput without quotes, it'll try to interpret addyInput as a variable which has a value of undefined and you won't get back the DOM element you want.
Or, if you were using jQuery, you could leave the form markup as-is and change the Javascript to this:
var address = $('input[name=addyInput]').val();
Make sure to specify and id on the input. You only have a name.
You need to add the id "addyInput" to your form input rather than just the name.
getElementById expects a string.
var address = getElementById('addyInput').value;
If you put this directly into a script section in the head, then you will have a problem because the page is not loaded completely but the code is executed already.
And of course you should define an id for the input element as the others already said.
what you are getting is an array, you need to fetch your array into some readable data. Try something like:
$value = array_shift( $yourarray );
or if it's a multi value array you can just loop it to fetch out the values.

Categories