This question already has answers here:
How to reach the element itself inside jQuery’s `val`?
(4 answers)
Closed last year.
Pls see the following html code
<input id="product_code1" name="Samsung"><br>
<input id="product_code2" name="Apple"><br>
<input id="product_code3" name="Huawei"><br>
<input id="product_code4" name="Motorola"><br>
and the jquery code
$( "input[id*='product']" ).val( 'test' );
the result will display 4 textbox with the value of 'test' as default, but now i like to display 4 textbox with the value of the product name, means first textbox will display 'Samsung', 2nd textbox will display 'Apple' & so on, so what command should i put in the jquery code ? pls advise.
Just use .val(fn):
$("input[id^='product_']").val(function() {
return this.name;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="product_code1" name="Samsung"><br>
<input id="product_code2" name="Apple"><br>
<input id="product_code3" name="Huawei"><br>
<input id="product_code4" name="Motorola"><br>
For each input element it will invoke the function that will return the value to set.
Bonus
To make it even more concise you could consider a helper function, e.g.:
jQuery.prop = function(name) {
return function() {
return this[name];
}
};
Then, the code becomes:
$("input[id^='product_']").val($.prop('name'));
Try this:
$("input[id*='product']").each(function() {
$this = $(this);
$this.val($this.attr("name"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="product_code1" name="Samsung"><br>
<input id="product_code2" name="Apple"><br>
<input id="product_code3" name="Huawei"><br>
<input id="product_code4" name="Motorola"><br>
$("input[id*='product']").each(function () {
var $this = $(this);
$this.val($this.prop("name"));
});
JSFiddle
Related
Consider I have user data-rowid="123" and its value is data-loc="abc"
I want to get data-loc value find by data-rowid
here is my original html
<input type="checkbox" data-rowid="{{ $customer->id }}" data-loc="{{ $customer->location_url }}"/>
i have button when user click on it then it call that finction .map-checked-box
javascript which i tried
$("body").delegate('.map-checked-box', 'click', function(){
var a = $(this).data('id');
var b = $(this).find.('a').data("loc");
console.log(b);
});
**but this code only get data-rowid in (a) but doesnot find loc value
any help will be thankfull**
Like this :
$("input[type='checkbox'][data-rowid='"+ yourRowId +"']").attr("data-loc")
There are a bunch of inconsistencies in your code, along with a long-ago deprecated call to delegate - but the below should hopefully demonstrate how you can use filter to find an element by data-rowid and then read data-loc:
$("body").on('click', '.map-checked-box', function(){
var result = $('input').filter( (i,e) => $(e).data("rowid") == 123).data("loc");
console.log(result);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" data-rowid="123" data-loc="abc"/>
<button class="map-checked-box">click me</button>
I want to get current class value <input type="text" id="contact_name1" name="name1"/> In js i want to call like this $('#contact_name1').on('input', function() { }.
my question is how to write after underscore current class.
$(#contact_"")? name1 changes for all classes.
You could use the starts with ^= operator inside the attribute selector:
$("[id^='contact_']").on("input", fn);
$("[id^='contact_']").on("input", function() {
var suffix = this.id.split("_")[1];
console.log( "ID: %s SUFFIX: %s", this.id, suffix );
});
<input id="contact_name" name="name" type="text">
<input id="contact_surname" name="surname" type="text">
<input id="contact_email" name="email" type="text">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I may suggest using starts with selector. and you can get your class name like this:
$('input[id^="contact_"]').on('input', function(e) {
var className = $(e.currentTarget).prop("class")
}
Hope it helps
i made this exemple few days ago
<script>
$("input").click(function(){
var res="#"+$(this).attr('id')
$(res).show()
});
</script>
just create a variable who contains the entire text and after this you can lauch your function :)
I am trying to get a value out of a <input type='num'> with JavaScript I am using the following code:
Choose a number between 1 and 5 <input type='num' name="input">
<button id="btn">Click me!</button>
<script>
var input;
document.getElementById('btn').onclick = function(){
input = document.getElementById('num');
alert(input); //To check what value input has
</script>
This should get a value but I just get a null what am I doing wrong?
You have not defined your id. Also I guess your input type should be number.
<input type='number' name="input" id="num">
^^^^^^^^^^^^ ^^^^^^^^
And to alert its value you need to use
alert(input.value) //.value is used to get value of input
There are more than one problems with your code
1) You have to close the bracket of your function
it should be
document.getElementById('btn').onclick = function(){
input = document.getElementById('num');
alert(input); //To check what value is outputted
}
2)
input = document.getElementById('num');
The getElementById() method returns the element that has the ID
attribute with the specified value.
so ID attribute is essential here and in your code there is no ID attribute defined so you have to defined it first
like
<input type='number' id="num" name="input">
3) document.getElementById('num'); does not return the value of input field
it returns object
so if you want value then use the following code
document.getElementById('num').value;
4) your input type="number"
for the desired output you can use following code
Choose a number between 1 and 5 <input type='number' name="input" id="myid">
<button id="btn">Click me!</button>
JS
var myButton = document.getElementById("btn");
myButton.onclick = function()
{
alert(document.getElementById("myid").value); //where does id come from?
}
The above method is pure JS if you need jquery method you can refer below
$( "#btn" ).click(function() {
var input=$("#myid").val();
alert(input)
});
getElementById() works on elements with id attribute. So, as you have not put id attribute in your input type, it is not able to find the element with id=num.
Just add id="num" in your input element and then you are good to go.
Is it possible to modify the value of each textfield present in a webpage, based on the original value, using jQuery or JavaScript?
For example, suppose I have 50 textfields in a page. I want to remove whitespace from the beginning and end of each textfield’s value. I don’t find it to be a good idea to call the function for every textfield individually. How can I do it without calling a function for each textfield?
Can just use val() with a callback argument. It will loop over all elements for you:
$('input[type=text]').val(function( index, originalValue){
return $.trim(originalValue);
});
val() API docs
You can execute this code:
$('input[type=text]').each(function (i, e) {
var $this = $(e);
$this.val($this.val().trim());
});
Get all the inputs from the page using jquery then run a loop, and for each element trim the value
<body>
<input type="text" value=" abc " >
<input type="text" value=" def " >
<input type="button" id="remove" value="Remove">
<script type="text/javascript">
$(document).ready(function(){
$('#remove').click(function(){
var inputs = $('input[type=text]');
$.each(inputs, function(index,input){
$(input).val($(input).val().trim())
});
});
});
</script>
</body>
I would like to assign value of product of two integer numbers into a hidden field already in the html document.
I was thinking about getting the value of a javascript variable and then passing it on a input type hidden.
I'm having a hard time to explain but this is how it should work:
Script Example
<script type="text/javascript">
function product(a,b){
return a*b;
}
</script>
above computes the product and i want the product to be in hidden field.
<input type="hidden" value="[return value from product function]">
How is this possible?
You could give your hidden field an id:
<input type="hidden" id="myField" value="" />
and then when you want to assign its value:
document.getElementById('myField').value = product(2, 3);
Make sure that you are performing this assignment after the DOM has been fully loaded, for example in the window.load event.
if you already have that hidden input :
function product(a, b) {
return a * b;
}
function setInputValue(input_id, val) {
document.getElementById(input_id).setAttribute('value', val);
}
if not, you can create one, add it to the body and then set it's value :
function addInput(val) {
var input = document.createElement('input');
input.setAttribute('type', 'hidden');
input.setAttribute('value', val);
document.body.appendChild(input);
}
And then you can use(depending on the case) :
addInput(product(2, 3)); // if you want to create the input
// or
setInputValue('input_id', product(2, 3));
You could do that like this:
<script type="text/javascript">
function product(a,b)
{
return a*b;
}
document.getElementById('myvalue').value = product(a,b);
</script>
<input type="hidden" value="THE OUTPUT OF PRODUCT FUNCTION" id="myvalue">
Hidden Field :
<input type="hidden" name="year" id="year">
Script :
<script type="text/javascript">
var year = new Date();
document.getElementById("year").value=(year.getFullYear());
</script>
Check out this jQuery page for some interesting examples of how to play with the value attribute, and how to call it:
http://api.jquery.com/val/
Otherwise - if you want to use jQuery rather than javascript in passing variables to an input of any kind, use the following to set the value of the input on an event click(), submit() et al:
on some event; assign or set the value of the input:
$('#inputid').val($('#idB').text());
where:
<input id = "inputid" type = "hidden" />
<div id = "idB">This text will be passed to the input</div>
Using such an approach, make sure the html input does not already specify a value, or a disabled attribute, obviously.
Beware the differences betwen .html() and .text() when dealing with html forms.
add some id for an input
var multi = product(2,3);
document.getElementById('id').value=multi;
<script type="text/javascript">
function product(x,y)
{
return x*y;
}
document.getElementById('myvalue').value = product(x,y);
</script>
<input type="hidden" value="THE OUTPUT OF PRODUCT FUNCTION" id="myvalue">
//prompts for input in javascript
test=prompt("Enter a value?","some string");
//passes javascript to a hidden field.
document.getElementById('myField').value = test;
//prompts for input in javascript
test2=prompt("Enter a value?","some string2");
//passes javascript to a hidden field
document.getElementById('myField').value = test2;
//prints output
document.write("hello, "+test+test2;
now this is confusing but this should work...