Get attribute value from input text - javascript

I want to get attribute value of each input field.
<input type="text" id="qty" data-id="{{$item->rowid}}" value="{{$item->qty}}">
function goUpdateCart(){
$('input[type=text]').each(function(){
alert($('input[type=text]').getAttribute("data-id"));
})
}
My function can't work correctly

Well, .getAttribute("data-id"); isn't jquery method.
You can use any of the following to get the data-* attr:
$(this).data('id');
$(this).attr('data-id');
$(this).prop('dataset').id;
this.dataset.id;
So it could be any of the above one:
function goUpdateCart(){
$('input[type=text]').each(function(){
alert(this.dataset.id);
})
}

You need to use each iteration element contextthis in each function to target current element along with .attr('data-id') or .data('id'):
$('input[type=text]').each(function(){
alert($(this).data("id"));
});

Try this:
$('input[type=text]').each(function(){
alert($(this).attr("data-id"));
});

<input type="text" id="qty" data-id="{{$item->rowid}}" value="{{$item->qty}}">
function goUpdateCart()
{
var attribute=$('#qty').attr('data-id');
alert(attribute);
}

Related

Duplicate value of input for multiple inputs

i need put value of general price
for all inputs but only take the value for 1st input.
Code :
<script type="text/javascript">
$('#GPrecio').change(function () {
$('#Precio').val($(this).val());
});
</script>
HTML :
<input type='text' size='3' name='GPrecio' id='GPrecio'>
$table.="<td>Precio : <br><input type='text' size='3' name='Precio[]' id='Precio'></td>";
Thank for answers and the time.
This will take the value of #GPrecio and apply it to all input name=Precio[] elements
$('#GPrecio').blur(function () {
$('[name="Precio[]"]').val($(this).val());
});
Also, if you have more than one element with id="Precio", that is a problem. Better to not use IDs unless you need them. Is there a reason you're using the same ID for each? You would be better off using a data-attribute, like <input type='text' size='3' name='Precio[]' data-inputtype='Precio'>, in which case your function could be refined to:
$('#GPrecio').blur(function () {
$('[data-inputtype="Precio"]').val($(this).val());
});
Suggest you to use classes instead of ids if you are going to use the same value.
Your input row could be like this:
<input type='text' size='3' name='Precio[]' class='Precio'>
Assuming Precio is the class name for all your inputs in the table row.
$('#GPrecio').change(function () {
let newValue = $(this).val();
$(".Precio").each(function() {
$(this).val(newValue);
})
});
As you can't use multiple same id, change it to class first:
<input type='text' size='3' name='Precio[]' class='Precio'>
And then jQuery trigger:
<script type="text/javascript">
$('#GPrecio').change(function () {
var gpval = $(this).val();
$('.Precio').each(function( index ) {
$(this).val(gpval);
});
});
</script>

How can I get the ID of an HTML element in a JavaScript function without passing any parameters?

How can I get the ID of an HTML element in a JavaScript function without passing any parameters?
I have a HTML element:
<input type="text" id="exampleInput" value="0" onkeypress="exampleFunction()">
From JavaScript, I would like to change the value of the HTML element.
function exampleFunction() {
}
Is it possible to achieve this without passing the ID as a parameter?
You can pass this to your function like this:
function exampleFunction(e) {
console.log(e); // element
console.log(e.id); // id
e.value = 'new value'; // change value
}
<input type="text" id="exampleInput" value="0" onkeypress="exampleFunction(this)">
Or, better yet, use addEventListener instead:
document.getElementById('exampleInput').addEventListener('keypress', function (e) {
console.log(e.target); // element
console.log(e.target.id); // id
e.target.value = 'new value'; // change value
});
<input type="text" id="exampleInput" value="0">
You can pass the element into the function as this.
function exampleFunction(element) {
console.log(element.value);
}
<input type="text" id="exampleInput" value="0" onkeypress="exampleFunction(this)">

I can't use val()?

I'm having a problem with getting the val of an input element I have.
You see, I don't know if my code is wrong, but my Visual Studio (legal) doesn't even try to help me complete what I want to type. All it gives me is Value() and ValueOf().
The part of the code I'm using:
JS:
$(document).ready(start);
{
$("#b1").click(toev);
}
function toev() {
var value = $("#b1").val();
$("#output").append(value);
};
HTML:
<input type="text" id="output"/>
<td><input type="button" id="b1" value="1" /></td>
Demo http://jsfiddle.net/yS8tw/
Few things to note:
Use of document.ready
Use of Val
Also I like this appendVal function: http://jsfiddle.net/5R7eZ/ - Is it possible to do ".value +=" in JQuery?
Rest should fit the needs :)
code
$(document).ready(function(){
$("#b1").click(toev);
});
function toev() {
var value = $("#b1").val();
alert(value);
$("#output").val(value);
}
With AppendVal
$(document).ready(function(){
$("#b1").click(toev);
});
function toev() {
var value = $("#b1").val();
$("#output").appendVal(value);
}
$.fn.appendVal = function (newPart) {
return this.each(function(){ this.value += newPart; });
};
You can't append content to an <input> element because it cannot have content. Perhaps you meant
$('#output').val(value);
to set its value.

How to get value from form input type=radio?

<input type="radio" value="0" name="type" checked="yes" />
<label>Type 0</label>
<input type="radio" value="1" name="type" />
<label>Type 1</label>
and js:
var type = this.type.value;
alert(type);
How to fix it ?
In what context does that JS code run? If this is the radio button in question then this.value will return the value.
If your question is "How do I get the value of the currently selected radio button in the 'type' group?" then you may need to do something like this:
function getCheckedRadioValue(radioGroupName) {
var rads = document.getElementsByName(radioGroupName),
i;
for (i=0; i < rads.length; i++)
if (rads[i].checked)
return rads[i].value;
return null; // or undefined, or your preferred default for none checked
}
var checkedValue = getCheckedRadioValue("type");
(It would be easier with .querySelector() or .querySelectorAll(), but not all browsers support them.)
Just use selectors.
With jquery
$("input[name=type]:checked").val();
Or without jquery:
document.querySelector("input[name=type]:checked").value;
Just use this.value instead of this.type.value.
this.value will select the value associated with the value attribute of the input. (That's a mouthful).
Using jQuery you can do like this
$(function() {
$(".rad").click(
function() {
alert(this.value);
});
});
See this JSFiddle

Getting DOM element value using pure JavaScript

Is there any difference between these solutions?
Solution 1:
function doSomething(id, value) {
console.log(value);
//...
}
<input id="theId" value="test" onclick="doSomething(this.id, this.value)" />
...and Solution 2:
function doSomething(id) {
var value = document.getElementById(id).value;
console.log(value);
//...
}
<input id="theId" value="test" onclick="doSomething(this.id)" />
Update: The question was edited. Both of the solutions are now equivalent.
Original answer
Yes, most notably! I don't think the second one will work (and if it does, not very portably). The first one should be OK.
// HTML:
<input id="theId" value="test" onclick="doSomething(this)" />
// JavaScript:
function(elem){
var value = elem.value;
var id = elem.id;
...
}
This should also work.
The second function should have:
var value = document.getElementById(id).value;
Then they are basically the same function.
In the second version, you're passing the String returned from this.id. Not the element itself.
So id.value won't give you what you want.
You would need to pass the element with this.
doSomething(this)
then:
function(el){
var value = el.value;
...
}
Note: In some browsers, the second one would work if you did:
window[id].value
because element IDs are a global property, but this is not safe.
It makes the most sense to just pass the element with this instead of fetching it again with its ID.
Pass the object:
doSomething(this)
You can get all data from object:
function(obj){
var value = obj.value;
var id = obj.id;
}
Or pass the id only:
doSomething(this.id)
Get the object and after that value:
function(id){
var value = document.getElementById(id).value;
}
There is no difference if we look on effect - value will be the same. However there is something more...
Solution 3:
function doSomething() {
console.log( theId.value );
}
<input id="theId" value="test" onclick="doSomething()" />
if DOM element has id then you can use it in js directly
This should also work.
function doSomething() {
yourElement = document.getElementById("yourID);
yourValue = yourElement.value; console.log(yourValue);
console.log(yourValue);
}
<div id="yourID" value="1" onclick="doSomething()">
</div>
function doSomething() {
console.log( theId.value );
}
<input id="theId" value="test" onclick="doSomething()" />

Categories

Resources