Im sending over some json data and assigning to a hidden field using:
#Html.Hidden("hidden-places", #Model.Places)
inside my javascript i am doing the following to retrieve the data:
var places = $('#hidden-places').val();
however it just comes back as undefined.
i am using this for google maps...
i tried something like:
$(document).ready(function () {
places = $('#hidden-places').val();
// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);
});
but no luck.
You need to use an ID selector:
places = $('#hidden-places').val();
Note that #.
With this:
$('hidden-places').val();
...you're looking for the value of a <hidden-places> element. Probably not what you mean. You likely want the value of a field with the ID hidden-places:
$('#hidden-places').val();
I had multiple elements with the same id on the page causing the problem
"hidden-places" will be the ID of the field and what your jQuery is looking for is going to be an HTML element called hidden-places.
You should use
$('#hidden-places').val()
did you check if you set a prefix in your viewdata?
how is the element in DOM? checked the value and id?
maybe your element is like
<input id="prefix_hidden-places" name="prefix.hidden-places" type="hidden" value="10" />
Related
I have a function where I am trying to get a value from an onclick event.
Here is the element attribute that gives the function to the element:
listcontainer.setAttribute('onmousedown',"knowbe4campaignspecific(this)")
Here is the function code:
function knowbe4campaignspecific(ele){
console.log(ele.value)}
However it will say undefined in the developer console.
If I just print the element by itself it will show the value inside so I must be missing something basic.
function knowbe4campaignspecific(ele){
console.log(ele)}
##RESULTS##
<ul value="183085" onmousedown="knowbe4campaignspecific(this)" class="ms-List"></ul>
Let me know if anything else is needed and I will update this post. Thanks!
As mentioned, value isn't a valid attribute of <ul>. You can still use it and access it through element.getAttribute but using datasets is more extendable and the correct implementation - you can access those through element.dataset
document.querySelector('.ms-List').setAttribute('onmousedown',"knowbe4campaignspecific(this)")
function knowbe4campaignspecific(ele){
console.log(ele.getAttribute('value'))
console.log(ele.dataset.value)
}
<ul value="183085" data-value="This is the better way" class="ms-List"><li> something</li></ul>
On elements that are not inputs you want to use the data attribute.
I believe this should work
<ul data-value="183085" onmousedown="knowbe4campaignspecific(this)" class="ms-List"></ul>
And then
function knowbe4campaignspecific(ele){
console.log(ele.dataset.value)}
I had thought these two were the same, but they appear to not be. I've generally been using $obj.attr("value") to work with form fields, but on the page I'm currently building, $obj.attr("value") does not return the text I enter in my field. However, $obj.val() does.
On a different page I've built, both $obj.attr("value") and $obj.val() return the text entered in the form field.
What could account for $obj.attr("value") working as expected in one case but not in another?
What is the proper way to set and retrieve a form field's value using jQuery?
There is a big difference between an objects properties and an objects attributes
See this questions (and its answers) for some of the differences: .prop() vs .attr()
The gist is that .attr(...) is only getting the objects value at the start (when the html is created). val() is getting the object's property value which can change many times.
Since jQuery 1.6, attr() will return the original value of an attribute (the one in the markup itself). You need to use prop() to get the current value:
var currentValue = $obj.prop("value");
However, using val() is not always the same. For instance, the value of <select> elements is actually the value of their selected option. val() takes that into account, but prop() does not. For this reason, val() is preferred.
PS: This is not an answer but just a supplement to the above answers.
Just for the future reference, I have included a good example that might help us to clear our doubt:
Try the following. In this example I shall create a file selector which can be used to select a file and then I shall try to retrieve the name of the file that I selected:
The HTML code is below:
<html>
<body>
<form action="#" method="post">
<input id ="myfile" type="file"/>
</form>
<script type="text/javascript" src="jquery.js"> </script>
<script type="text/javascript" src="code.js"> </script>
</body>
</html>
The code.js file contains the following jQuery code. Try to use both
of the jQuery code snippets one by one and see the output.
jQuery code with attr('value'):
$('#myfile').change(function(){
alert($(this).attr('value'));
$('#mybutton').removeAttr('disabled');
});
jQuery code with val():
$('#myfile').change(function(){
alert($(this).val());
$('#mybutton').removeAttr('disabled');
});
Output:
The output of jQuery code with attr('value') will be 'undefined'.
The output of jQuery code with val() will the file name that you selected.
Explanation:
Now you may understand easily what the top answers wanted to convey. The output of jQuery code with attr('value') will be 'undefined' because initially there was no file selected so the value is undefined. It is better to use val() because it gets the current value.
In order to see why the undefined value is returned try this code in your HTML and you'll see that now the attr.('value') returns 'test' always, because the value is 'test' and previously it was undefined.
<input id ="myfile" type="file" value='test'/>
I hope it was useful to you.
Let's learn from an example.
Let there be a text input field with default value = "Enter your name"
var inp = $("input").attr("value");
var inp = $("input").val();
Both will return "Enter your name"
But suppose you change the default text to "Jose" in your browser.
var inp = $("input").attr("value");
will still give the default text i.e. "Enter your name".
var inp = $("input").val();
But .val() will return "Jose", i.e. the current value.
Hope it helps.
The proper way to set and get the value of a form field is using .val() method.
$('#field').val('test'); // Set
var value = $('#field').val(); // Get
With jQuery 1.6 there is a new method called .prop().
As of jQuery 1.6, the .attr() method returns undefined for attributes
that have not been set. In addition, .attr() should not be used on
plain objects, arrays, the window, or the document. To retrieve and
change DOM properties, use the .prop() method.
In order to get the value of any input field, you should always use $element.val() because jQuery handles to retrieve the correct value based on the browser of the element type.
jQuery('.changer').change(function () {
var addressdata = jQuery('option:selected', this).attr('address');
jQuery("#showadd").text(addressdata);
});
jQuery(".morepost").live("click", function() {
var loadID = jQuery(this).attr('id'); //get the id
alert(loadID);
});
you can also get the value of id using .attr()
this example may be useful:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
</head>
<body>
<input id="test" type="text" />
<button onclick="testF()" >click</button>
<script>
function testF(){
alert($('#test').attr('value'));
alert( $('#test').prop('value'));
alert($('#test').val());
}
</script>
</body>
</html>
in above example, everything works perfectly. but if you change the version of jquery to 1.9.1 or newer in script tag you will see "undefined" in the first alert.
attr('value') doesn't work with jquery version 1.9.1 or newer.
Example more... attr() is various, val() is just one! Prop is boolean are different.
//EXAMPLE 1 - RESULT
$('div').append($('input.idone').attr('value')).append('<br>');
$('div').append($('input[name=nametwo]').attr('family')).append('<br>');
$('div').append($('input#idtwo').attr('name')).append('<br>');
$('div').append($('input[name=nameone]').attr('value'));
$('div').append('<hr>'); //EXAMPLE 2
$('div').append($('input.idone').val()).append('<br>');
$('div').append('<hr>'); //EXAMPLE 3 - MODIFY VAL
$('div').append($('input.idone').val('idonenew')).append('<br>');
$('input.idone').attr('type','initial');
$('div').append('<hr>'); //EXAMPLE 3 - MODIFY VALUE
$('div').append($('input[name=nametwo]').attr('value', 'new-jquery-pro')).append('<br>');
$('input#idtwo').attr('type','initial');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="hidden" class="idone" name="nameone" value="one-test" family="family-number-one">
<input type="hidden" id="idtwo" name="nametwo" value="two-test" family="family-number-two">
<br>
<div></div>
jquery - Get the value in an input text box
<script type="text/javascript">
jQuery(document).ready(function(){
var classValues = jQuery(".cart tr").find("td.product-name").text();
classValues = classValues.replace(/[_\W]+/g, " ")
jQuery('input[name=your-p-name]').val(classValues);
//alert(classValues);
});
</script>
If you get the same value for both property and attribute, but still sees it different on the HTML try this to get the HTML one:
$('#inputID').context.defaultValue;
In attr('value') you're specifically saying you're looking for the value of an attribute named vaule. It is preferable to use val() as this is jQuery's out of the box feature for extracting the value out of form elements.
I have always used .val() and to be honest I didnt even know you could get the value using .attr("value"). I set the value of a form field using .val() as well ex. $('#myfield').val('New Value');
How to get the html of element itself using Jquery html. In the below code I would like get the input element inside div using JQuery as shwon below
<div id="content">content div</div>
<input type='text' id="scheduledDate" class="datetime" />
$(function() {
console.log($('#scheduledDate').html('dsadasdasd'));
$('#content').html($('#scheduledDate').html());
});
EDIT:
Can I get the $("#scheduledDate") as string which represent the real html code of the input box, because my final requirement is I want to pass it to some other SubView( I am using backboneJS) and eventually use that html code in a dust file.
My original requirement was to get that input field as string so that I can pass it to some other function. I know, if I keep it inside a DIV or some other container, I can get the html by using .html method of JQuery. I dont want use some other for that purpose. I am just trying to get html content of the input box itself using it's id.
If you want to move the input element into div, try this:
$('#content').append($('#scheduledDate'));
If you want to copy the input element into div, try this:
$('#content').append($('#scheduledDate').clone());
Note: after move or copy element, the event listener may need be registered again.
$(function() {
var content = $('#content');
var scheduledDate = $('#scheduledDate');
content.empty();
content.append(scheduledDate.clone());
});
As the original author has stated that they explicitly want the html of the input:
$(function() {
var scheduledDate = $('#scheduledDate').clone();
var temporaryElement = $('<div></div>');
var scheduleDateAsString = temporaryElement.append(scheduledDate).html();
// do what you want with the html such as log it
console.log(scheduleDateAsString);
// or store it back into #content
$('#content').empty().append(scheduleDateAsString);
});
Is how I would implement this. See below for a working example:
https://jsfiddle.net/wzy168xy/2/
A plain or pure JavaScript method, can do better...
scheduledDate.outerHTML //HTML5
or calling by
document.getElementById("scheduledDate").outerHTML //HTML4.01 -FF.
should do/return the same, e.g.:
>> '<input id="scheduledDate" type="text" value="" calss="datetime">'
if this, is what you are asking for
fiddle
p.s.: what do you mean by "calss" ? :-)
This can be done the following ways:
1.Input box moved to the div and the div content remains along with the added input
$(document).ready(function() {
var $inputBox = $("#scheduledDate");
$("#content").append($inputBox);
});
2.The div is replaced with the copy of the input box(as nnn pointed out)
$(document).ready(function() {
var $inputBox = $("#scheduledDate");
var $clonedInputBox = $("#scheduledDate").clone();
$("#content").html($clonedInputBox);
});
Div is replaced by the original input box
$(document).ready(function() {
var $inputBox = $("#scheduledDate");
$("#content").html($inputBox);
});
https://jsfiddle.net/atg5m6ym/4485/
EDIT 1:
to get the input html as string inside the div itself use this
$("#scheduledDate").prop('outerHTML')
This will give the input objects html as string
Check this js fiddle and tell if this is what you need
https://jsfiddle.net/atg5m6ym/4496/
How save some data as html tag atribute? For example, given data asd/45.33/blah, I need save this data in html and after using jquery get this data so:
$("#my_tag").attr("special_attribute");
its possible?
Using custom attributes makes your document invalid, you can use HTML5 data-* attributes and for getting/setting values using jQuery, you can use data method, for example if you have a data attribute called data-special you can get the value of it in this way:
var value = $("#my_tag").data("special");
and set/change the value in this way:
$("#my_tag").data("special", "value");
http://api.jquery.com/data/
If you need to use it with jQuery then a better way to do it is to use data- attibutes.
Declaring a html tag will look like:
<div id="myDiv" data-url="asd/45.33/blah"></div>
Using data is as simple as:
var url = $('#myDiv').data('url')
More about jQuery data.
Question about attr vs data.
USE attr() it is used for getting the value as well as for setting the attribute value.
$("#my_tag").attr("special_attribute",'asd/45.33/blah');
Details http://api.jquery.com/attr/
Yes it is possible. However it won't validate.
Yes you can. I think you should use an hidden field for this purpose:
<input type="hidden" id="my_tag" />
and then access it via jquery :
$("#my_tag").attr("value", "myvalue");
$("#my_tag").attr("value");
You can save value in html element as :
$("htmlelement").data("key","value");
in your case it would be :
$("#my_tag").data("special_attribute","asd/45.33/blah");
var html = "<p>HTML</p>";
$("#my_tag").attr("special_attribute", function() {
return html;
});
Now retrieve it with:
var s = $("#my_tag").attr("special_attribute");
alert(s)
I have a JS file CharacterSelection where a user can select an avatar and type their name into a textarea.
Now I want to set a text div in an html file to the contents of the textarea. I will use it to display the player's name at a specific location on the screen.
I know that I can set a div to a text, such as: <div id ="statSheetExitButton">Exit</div> will show "Exit" (style and location depending on css)
I'm wondering if there is any way to put a String variable in there, since I will not know what name the player enters.
I grab the textarea's contents using var name = $("#nameTextBox").val();
I'm thinking that saying <div id ="playerName">name</div> will display the text "name".
Is there a way to accomplish my goal?
$("#nameTextBox").change(function(){
$("#playerName").html($(this).val());
});
This will attach an event handler to the textbox so everytime the name changes the div is updated.
Here is a working example. http://jsfiddle.net/2NkTb/
Please note that for the onchange event you must tab out of textbox or the textbox must lose focus
var name = $("#nameTextBox").val();
$("#playerName").html(name);
Do this:
var name = $("#nameTextBox").val();
$('#playerName').text(name);
You could do something like this which will replace the html of the tag with your JavaScript string:
$('#playerName').html(myNameVar);
Other than that, I don't think you can directly inject JavaScript variables like you would in a template language.
Try:
$('#playerName').html($("#textbo").val());
var playerName = 'John Dow'
document.getElementById('playerName').innerHTML=playerName
You need to set the property innerHTML of you div element.
$("playerName").innerHTML = name;