Set hidden input value with javascript - javascript

function GetWidth(){
var TBL_width = document.getElementById('wrap_tbl').offsetWidth;
return TBL_width;
}
var w = GetWidth();
<input type="hidden" id="tbl" value= w />
Is this possible?
I want to store a JavaScript variable in value attribute of a hidden input element. Please guide me how to do this

Jquery version:
$("#tbl").val(w);
Pure JavaScript version:
document.getElementById("tbl").value = w;
There is no difference between hidden and "unhidden" inputs in this case.
Advice: If your's GetWidth function has only one line, and the line isn't too much sophisticated, you can extract it from the method.
function setWidth(){
var TBL_width = document.getElementById('wrap_tbl').offsetWidth;
document.getElementById("tbl").value = TBL_width;
}

Use javascript to set the value property of your hidden element:
var w=GetWidth();
document.getElementById('tbl').value = w;
or jQuery-style:
var w=GetWidth();
$('#tbl').val(w);

This will definitely not work ... and you already realized that :-)
Look what you did with the element "wrap_tbl" ... you accessed it by using document.getElementById(). You can do the exact same thing to access hidden elements
document.getElementById('tbl').value = w;

You could set the value use javascript.
document.getElementById('tbl').value=w;
If you use jQuery, just $('#tbl').val(w);

As the value asignament to the input has already answered, one question,
Do you need it as a param to be sent on submit?
if not, one suggestion: you can allways use the jquery data method
$('body').data('myDesiredName','myDesiredValue');
and to retrieve it
alert($('body').data('myDeesiredName')); //will alert 'myDesiredValue'
this way you can allways store multiple values and variables without the need of hidden elements,
happy coding ;)

Related

JavaScript - Input value undefined

HiI'm new to web development and tring to understand some basics. To make it short, I have an input like this:
<input type="text" id="field" name="field" placeholder="Write something here...">
On separate file with JS extension I want to get the value from this input. I tried doing so in two ways, one in vanilla JS:
var value = document.getElementById('field').value;
This returns the correct value, and second with jQuery:
var value2 = $('#field').value;
And getting an 'undefined" from the second.
Why is this so?
Ok,so you do this by using
var value = $("#field").val();
The reason the first approach works is because it returns the HTML element object and you assess its value property.(you can access any property of that element using . operator)
However using jquery returns JQUERY object and since it does not have a value property u can not access it. You need to use jqueries val function.
In jquery you use the method val(). It would look like this :
var value2 = $('#field').val();

How can I use Javascript to get the value of an element that was populated by a POST request?

I'm building an HTML page that receives data from another page with the below code
$arrayPosition = $_POST['arrayPosition'];
echo '<span id = "arrayPosition">'.$arrayPosition.'</span>';
I'm then trying to use javascript to get the value of the element and pass it to a function with the below code
var initialPosition = document.getElementById('arrayPosition').value;
function displayWork(position){
$("#displayArtwork").detach()
.append(holdImages[position])
.hide()
.fadeIn("fast");
}
When I alert the value of initial position to the screen it informs me that null is its value, however, when I inspect the element it looks like this
<span id="arrayPosition">4</span>
Am I making some really stupid error, or misunderstanding the way to access this posted data?
Thanks for your help!
Since arrayPosition is a span, it has no value. You can get its innerHTML:
var initialPosition = document.getElementById('arrayPosition').innerHTML;
Or using jQuery:
var initialPosition = $('#arrayPosition').text();
A span-element has no value. Only form-elements can contain the value-attribute. To get the text inside your span you can use the innerHTML-porperty:
var initialPosition = document.getElementById('arrayPosition').innerHTML;
Demo
As you are already using jQuery you can also use it's text()-function:
var initialPosition = $('#arrayPosition').text();
here you can also use:
$(document.getElementById('arrayPosition')).text();
Harder to maintain and more difficult to read but faster than the jQuery-Selector. (see here)
Demo 2
Reference
.innerHTML
.text()

html "data-" attribute as javascript parameter

Lets say I have this:
<div data-uid="aaa" data-name="bbb", data-value="ccc" onclick="fun(this.data.uid, this.data-name, this.data-value)">
And this:
function fun(one, two, three) {
//some code
}
Well this is not working but I have absolutely no idea why. could someone post a working example please?
The easiest way to get data-* attributes is with element.getAttribute():
onclick="fun(this.getAttribute('data-uid'), this.getAttribute('data-name'), this.getAttribute('data-value'));"
DEMO: http://jsfiddle.net/pm6cH/
Although I would suggest just passing this to fun(), and getting the 3 attributes inside the fun function:
onclick="fun(this);"
And then:
function fun(obj) {
var one = obj.getAttribute('data-uid'),
two = obj.getAttribute('data-name'),
three = obj.getAttribute('data-value');
}
DEMO: http://jsfiddle.net/pm6cH/1/
The new way to access them by property is with dataset, but that isn't supported by all browsers. You'd get them like the following:
this.dataset.uid
// and
this.dataset.name
// and
this.dataset.value
DEMO: http://jsfiddle.net/pm6cH/2/
Also note that in your HTML, there shouldn't be a comma here:
data-name="bbb",
References:
element.getAttribute(): https://developer.mozilla.org/en-US/docs/DOM/element.getAttribute
.dataset: https://developer.mozilla.org/en-US/docs/DOM/element.dataset
.dataset browser compatibility: http://caniuse.com/dataset
If you are using jQuery you can easily fetch the data attributes by
$(this).data("id") or $(event.target).data("id")
The short answer is that the syntax is this.dataset.whatever.
Your code should look like this:
<div data-uid="aaa" data-name="bbb" data-value="ccc"
onclick="fun(this.dataset.uid, this.dataset.name, this.dataset.value)">
Another important note: Javascript will always strip out hyphens and make the data attributes camelCase, regardless of whatever capitalization you use. data-camelCase will become this.dataset.camelcase and data-Camel-case will become this.dataset.camelCase.
jQuery (after v1.5 and later) always uses lowercase, regardless of your capitalization.
So when referencing your data attributes using this method, remember the camelCase:
<div data-this-is-wild="yes, it's true"
onclick="fun(this.dataset.thisIsWild)">
Also, you don't need to use commas to separate attributes.
HTML:
<div data-uid="aaa" data-name="bbb", data-value="ccc" onclick="fun(this)">
JavaScript:
function fun(obj) {
var uid= $(obj).attr('data-uid');
var name= $(obj).attr('data-name');
var value= $(obj).attr('data-value');
}
but I'm using jQuery.
JS:
function fun(obj) {
var uid= $(obj).data('uid');
var name= $(obj).data('name');
var value= $(obj).data('value');
}
you might use default parameters in your function
and then just pass the entire dataset itself, since the
dataset is already a DOMStringMap Object
<div data-uid="aaa" data-name="bbb" data-value="ccc"
onclick="fun(this.dataset)">
<script>
const fun = ({uid:'ddd', name:'eee', value:'fff', other:'default'} = {}) {
//
}
</script>
that way, you can deal with any data-values that got set in the html tag,
or use defaults if they weren't set - that kind of thing
maybe not in this situation, but in others, it might be advantageous to put all
your preferences in a single data-attribute
<div data-all='{"uid":"aaa","name":"bbb","value":"ccc"}'
onclick="fun(JSON.parse(this.dataset.all))">
there are probably more terse ways of doing that, if you already know
certain things about the order of the data
<div data-all="aaa,bbb,ccc" onclick="fun(this.dataset.all.split(','))">

What is wrong with this code in jquery

I am trying to get plain text out of value stored in variable like this
var lb = $(this).attr("htmllabel");
var text = $(this).html(lb);
alert(text);
When the alert popup it give result as object[Object] but I was expecting the actual string after application of the function.
Can anyone help me in this? Thanks.
$(this).html(lb)
This line is setting the html of whatever this is to whatever is stored in lb. It then returns the jquery object for chaining purposes.
If you want the html of this then you just call $(this).html() with no parameter.
Your code on the second line is setting something not getting something ...
Can you include your HTML and the actual data you want in the alert box and this might help shape the answer
Take a look at the documentation for the html method:
http://api.jquery.com/html/#html2
As you can see from the documentation your code is setting the html for this and then returning a jQuery object. What is it that you want to display exactly?
If you're simply looking to get the value of your custom attribute "htmllabel", you can do the following:
var val = $(this).attr("htmllabel");
alter(val);
As a side note; I would suggest naming custom attributes with data-*according to the HTML5 spec like this:
<div data-htmllable></div>
Your can then access the value of the attribute in two ways (jQuery 1.4.3+):
var val1 = $(this).attr('data-htmllabel');
var val2 = $(this).data('htmllabel');
// Outputs same value //
alert(val1);
alert(val2);
I hope this helps!

How to get whats inside a variable ID or Class

Say I have this:
var name = $('#contactName');
Is there a way to get just the contactName out of that variable?
Edit: The variable is already set and the value of it is $('#contactName').
What I want to do is retrieve the text from that variable, not create multiple variables. I could easily duplicate variables and just do var nameID = 'contactName' but I am hoping theres an alternative.
You can use the selector property:
var name = $('#contactName');
alert(name.selector); // alerts #contactName
However, you'd have to strip the #, so something like:
s.selector.replace('#','')
Obviously, this would only work for ID-based or tag-based selectors. Class-based selectors would need the . removing.
Try
var name = $('#contactName').attr('id');
All jQuery objects have a selector property that will return the selector they were created with, so your name object would return #contactName. You could then strip off the hash sign.
The title and body of your question seem at odds.
To answer the title:
If the jQuery object was created with a selector, then name.selector should do the trick.
To answer the body:
name.attr('id')
Don't you just use
var name= $("#contactName").val()
??

Categories

Resources