I have the following HTML:
<input class="file_upload" type="file" multiple="true" data-photoShootId="#item.PhotoShootItemId" />
And the following jQuery:
<script type="text/javascript">
$(function() {
$('.file_upload').uploadifive({
//*snip*
'formData': {
'PhotoShootItemId': $(this).data('photoShootId')
},
//*snip*
});
});
</script>
The script itself functions with no issues.
My problem is I cannot seem to get the data-photoShootId value from the file_upload element. I simply get undefined in my POST data. If I replace the .data call with a constant value, it works fine.
If I use $(this).attr and photoShootId="#item.PhotoShootItemId", I get the same result.
The issue is because this in your code does not refer to the element you are instatiating the plugin on, but the window.
To get an attribute from the element to use in the plugin call you need to loop over each individually:
$('.file_upload').each(function() {
$(this).uploadifive({
//*snip*
'formData': {
'PhotoShootItemId': $(this).data('photoShootId')
},
//*snip*
});
});
Please set the data attribute like this :-
<input class="file_upload" type="file" multiple="true" data-photoshootid="#item.PhotoShootItemId" />
And get the attribute like this
$(this).data('photoshootid')
Avoid using uppercase letters for data attributes
Related
I have simple from which consists by inputs like that:
<form id='some-form'>
....
<input type="radio" data-type="4" data-value="25" data-id="68" name="req-68">
....
</form>
I'm trying to loop through this form and get data values:
$('#some-form').filter(':input').each(function (i, element) {
console.log(element.value);
console.log(element.attr('data-value'));
}
element.value holds value 'on' or 'off' depending radio is chosen or not and it works properly but when I try to call element.attr('data-value') it throws an error.
So how can I extract data-value in this loop?
use .children() instead of .filter().
The former will get you the elements inside the form, the latter will filter all elements $('#some-form') will provide.
HIH
EDIT
as pointed out by gaetanoM and connexo, there is also the issue of using element.attr() without the $() which you will need since .attr() is a method of jQuery, not JS
$('#some-form').children(':input').each(function (i, element) {
console.log(element.value);
console.log($(element).attr('data-value'));
//
// or
//
// console.log(element.dataset.value);
})
console.log('end');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id='some-form'>
<input type="radio" data-type="4" data-value="25" data-id="68" name="req-68">
</form>
if you use newer jQuery >= 1.4.3
You can use like this.
$(this).data("value");
OR
$(this).data().value;
Inside your .each() function element is a regular HTMLElement, not a jQuery object.
Either wrap that using $(element) (or even $(this)) which allows to use
jQuery's $.attr()
$(element).attr('data-value')
or, even better, use the corresponding native DOM Api method
element.getAttribute('data-value'))
Since you are accessing a data- attribute, the DOM Api has a special object dataset to access these (from IE 11 upwards):
element.dataset.value
In case you have a name for your data-attribute like data-cmon-lets-go you can access it using camelcase notation:
element.dataset.cmonLetsGo
This could also be done with vanilla javascript.
document.querySelectorAll('#some-form input[type="radio"]').forEach(radio => {
console.log(radio.value, radio.dataset.value);
});
<form id='some-form'>
<input type="radio" data-type="4" data-value="25" data-id="68" name="req-68">
</form>
In the each loop you are actually in the context of the radio element so you can use $(this).attr('data-value') and it will work. The following is a working code.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<form id='some-form'>
<input type="radio" data-type="4" data-value="25" data-id="68" name="req-68">Hello
</form>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
$('#some-form :input').each(function (i, element) {
console.log(i);
console.log("element", element);
console.log($(this).val());
console.log($(this).attr('data-value'));
});
});
</script>
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
I want to get a value passed from the controller in jQuery.
I added a hidden input field
<input type="hidden" id="Result" value="#Model.Result" />
And I tried to get the value in Jquery as follows:
$("#Result").val()
Model.Result has values, but in Jquery it shows it has no value.
I am using inline Javascript.
Here is a fiddle and it works perfect. Did you try to put your code into $(document).ready()? For example:
$(document).ready(function{
alert($("#Result").val());
});
I have an input field and i am trying to set its value using its class
<form:input path="userName" id="userName" title="Choose A Unique UserName" readonly="${userNameStatus}" class="formData"/>
Which renders as:
<input id="userName" name="userName" title="Choose A Unique UserName" class="formData" type="text" value=""/>
I am using the following jquery but this does not seem to work. Can someone tell me where i am going wrong.
$(".formData").html("");
Edited JQuery Function that handles the event
$('#reset').click(function (){
$("#userNameErr").text("");
$('#badgeNoErr').text("");
$(".errors").html("");
$(".formData").val("");
});
nor is $(".formData").text("") or $(".formData").val("") working.
This should work.
$(".formData").val("valuesgoeshere")
For empty
$(".formData").val("")
If this does not work, you should post a jsFiddle.
Demo:
$(function() {
$(".resetInput").on("click", function() {
$(".formData").val("");
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="formData" value="yoyoyo">
<button class="resetInput">Click Here to reset</button>
If the input field has a class name formData use this :
$(".formData").val("data")
If the input field has an id attribute name formData use this :
$("#formData").val("data")
If the input name is given use this :
$("input[name='formData']").val("data")
You can also mention the type. Then it will refer to all the inputs of that type and the given class name:
$("input[type='text'].formData").val("data")
change your jquery loading setting to onload in jsfiddle . . .it works . . .
use this code for set value in input tag by another id.
$(".formdata").val(document.getElementById("fsd").innerHTML);
or
use this code for set value in input tag using classname="formdata"
$(".formdata").val("hello");
You just write this script. use input element for this.
$("input").val("valuesgoeshere");
or by id="fsd" you write this code.
$("input").val(document.getElementById("fsd").innerHTML);
$('.formData').attr('value','YOUR_VALUE')
Put your jQuery function in
$(document).ready(function(){
});
It's surely solved.
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');