what i need
i need to fetch hidden element data according to particular element id.
a.html
<input type="hidden" id="evt_date" value="feb 10">
<input type="hidden" id="evt_date" value="Mar 21">
<input type="hidden" id="evt_date" value="april 05">
js
<script>
$.each($('input'), function(i, val) {
if ($(this).attr("type") == "hidden") {
var event_date = document.getElementById('evt_date');
console.log(event_date);
}
});
</script>
problem
on doing console.log im getting
<input type="hidden" id="evt_date" value="feb 10">
i want to fetch all hidden element in loop using js.
updated js code
$.each($('input.event_date'),function(i,val)
{
if($(this).attr("type")=="hidden")
{
console.log(val);
var evt_date=$('.event_date').val();
console.log(evt_date);
$('.date_event').html(evt_date);
}
});
It's not a good practice to use same id for multiple element. You can instead use class attribute. So first you should change those repeated id attributes into 'class' attributes.
HTML : Updated
<input type="hidden" class="event_date" value="feb 10">
<input type="hidden" class="event_date" value="Mar 21">
<input type="hidden" class="event_date" value="april 05">
<div class="date_event"></div>
<div class="date_event"></div>
<div class="date_event"></div>
Next about your answer, loop through the each element and log the value or use it anyway. Try this,
jQuery :
You question seemed little confusing to me when in one part you asked for the data of the element and in another part you asked for the element itself.
$.each($("input[type='hidden'][class='evt_date']"), function(){
console.log($(this).val()); // value of the element
console.log($(this)); // the element itself
});
jsFiddle
Modification of your code :
jQuery :
var counter = 0;
$.each($('input.event_date'),function(i,val)
{
if($(this).attr("type")=="hidden")
{
console.log(val);
var evt_date=$(this).val();
console.log(evt_date);
$('.date_event:eq('+ counter +')').append(evt_date);
counter++;
}
});
jsFiddle
Dont know why you used same Id but this will be the short way:
$("input [id='evt_date'][type='hidden']").each(function(){
console.log($( this ))
});
$.each($('input'),function(i,val){
if($(this).attr("type")=="hidden"){
console.log($(this).val());
}
});
Demo
Try this
$('input[type="hidden"]').each(function(index,item){
console.log($(item));
});
Working demo
You are using the same id for all the inputs. The id should be unique. Use a class instead
$.each($('input.evt_date'),function(i, field) {
if($(this).attr("type")=="hidden") {
console.log(field);
}
});
Related
I have multiple forms on a page and also multiple input boxes with plus/minus signs.
I'm having trouble to get those input boxes to work seperately. Probably because of some wrong/same id's or something like that or maybe a wrong setup of my code. The thing is I can't find my error in the code and I don't get any errors in my console.
What I have:
function quantity_change(way, id){
quantity = $('#product_amount_'+id).val();
if(way=='up'){
quantity++;
} else {
quantity--;
}
if(quantity<1){
quantity = 1;
}
if(quantity>10){
quantity = 10;
}
$('#product_amount_'+id).val(quantity);
}
And my html:
//row 1
<div class="amount"><input type="text" name="quantity" value="1" id="product_amount_1234"/></div>
<div class="change" data-id="1234">
+
-
</div>
//row 2
<div class="amount"><input type="text" name="quantity" value="1" id="product_amount_4321"/></div>
<div class="change" data-id="4321">
+
-
</div>
I thought something like this would do the trick but it doesn't :(
$(document).ready(function(){
$('.change a').click(function(){
var id = $(this).find('.change').data('id');
quantity_change(id)
});
});
Any help greatly appreciated!
You should use closest() method to get access to the parent div with class change, then you can read the data attribute id's value.
var id = $(this).closest('.change').data('id');
alert(id);
Since you are already binding the click event using unobutrusive javascript, you do not need the onclick code in your HTML markup.
Also your quantity_change method takes 2 parameters and using both, but you are passing only one. You may keep the value of way in HTML 5 data attributes on the anchor tag and read from that and pass that to your method.
<div class="change" data-id="1234">
+
-
</div>
So the corrected js code is
$(document).ready(function(){
$('.change a').click(function(e){
e.preventDefault();
var _this=$(this);
var id = _this.closest('.change').data('id');
var way= _this.data("way");
quantity_change(way,id)
});
});
Here is a working sample.
i'm trying to know (without success), what is the best way to iterate all input element with a specific class in a specific div after a click on a button.
<div>
<input type="text" class="inputtext">
<input type="text" class="inputtext">
<input type="text" class="inputtext">
<input type="text" class="anotherclass">
<input type="text" class="anotherclass">
<button class="full">click me</button>
</div>
So i want to get the value of every input with the class inputtext (but not the one with the class anotherclass). I've tried this :
$(".full").click(function() {
console.log($(this).parent().children(".inputtext").val());
});
Thanks for your attention !
Use .map
var values = $(".inputtext").map(function() { return this.value }).get();
values will be an array of each input value.
Use the .each method of JQuery:
$(".full").click(function() {
$(this).parent().children(".inputtext").each(function(){console.log($(this).val());});
});
Working Fiddle: https://jsfiddle.net/jx6d4neh/
Try with
$(".full").click(function() {
$(this).siblings(".inputtext").each(function(){
console.log($(this).val());
});
});
You could use the each() function, somewhat like this:
$(".full").click(function() {
$(this).parent().children(".inputtext").each(function(){
console.log($(this).val());
});
});
https://api.jquery.com/each/
Or better traverse using siblings() instead of parent().children() like this
$(".full").click(function() {
$(this).siblings(".inputtext").each(function(){
console.log($(this).val());
});
});
https://api.jquery.com/siblings/
i am unsure why my code does not work, any help would be much appreciated
i am trying to create a jquery function where by, when a user clicks on an
image (e.g: messaging-img) the input field take up the value 101010 | when a user clicks on the unlimited-img the input field take up the value 202020. could one kind;y advise me on this - thank you
$(document).ready(function () {
$(".messaging-img").on("click", function(){
$("#paypal-ref-111").val("101010");
});
$(".unlimited-img").on("click", function(){
$("#paypal-ref-222").val("202020");
});
$(".basic-img").on("click", function(){
$("#paypal-ref-333").val("303030");
});
});
<div class="" id="paypal_express_checkout"><input type="" checked="checked" id="paypal-ref-111" id="paypal-ref-222" id="paypal-ref-333" value=""/></div>
Here is a working solution:
Firstly, I have updated your input field to contain only one ID, named paypal-ref. An element can only contain one ID and it must be unique.
<input type="" checked="checked" id="paypal-ref" value=""/>
Secondly, your jQuery has been updated accordingly:
$(document).ready(function() {
$(".messaging-img").on("click", function() {
$("#paypal-ref").val("101010");
});
$(".unlimited-img").on("click", function() {
$("#paypal-ref").val("202020");
});
$(".basic-img").on("click", function() {
$("#paypal-ref").val("303030");
});
});
You can see a demo here
I'm trying to put together multiple user inputs and then combine them into one textarea after button click.
For example:
User1:Hey, I just met you
User2:And this is crazy
User3:But Here's my number so call me maybe
Combined Result:
Hey, I just met you, And this is crazy, But Here's my number so call me maybe
Here's my code the button click is currently not working but when I tried it before it did work so I was thinking I have some problem w/ my Jquery that triggers this unusual result:
HTML and Imports:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<input class="combine" id="input1" disabled="true"></input>
<input class="combine" id="input2" disabled="true"></input>
<input class="combine" id="input3" disabled="true"></input>
<input class="combine" id="input4" disabled="true"></input>
<input class="combine" id="input5" disabled="true"></input>
<input class="combine" id="input6" disabled="true"></input>
<input class="combine" id="Voltes5" disabled="true" size="45"></input>
<button id="setVal">Set</button>
Jquery
$(document).ready(function(){
$('#setVal').on('click',function(){
jQuery(function(){
var form = $('.combine');
form.each(function(){
$('.Voltes5').append($(this).text()+ ' ');
});
});
});
});
Update for sir Arun P Johny
User1: If theres a (no comma when combined)
User2: will
User3: there's a way
Combined Result:
If theres a will, there's a way
Try
$(document).ready(function () {
$('#setVal').on('click', function () {
var form = $('.combine').not('#Voltes5');
var vals = form.map(function () {
var value = $.trim(this.value)
return value ? value : undefined;
}).get();
$('#Voltes5').val(vals.join(', '))
});
});
Demo: Fiddle
Here's a one-liner for non-readability ;)
$('#setVal').click(function(){$('#Voltes5').val($('.combine').not('#Voltes5').map(function(){return $(this).val();}).get().join(''))});
Expanded:
$('#setVal').click(function(){
$('#Voltes5').val(
$('.combine')
.not('#Voltes5')
.map(
function(){
return $(this).val();
})
.get()
.join('')
);
});
Get fiddly with it: http://jsfiddle.net/ArtBIT/u57Zp/
Here is one way to do this:
$('#setVal').on('click', function () {
$(".combine[id^=input]").each(function () {
if(this.value) {
$("#Voltes5")[0].value += ' ' + this.value;
}
});
});
There are several different ways to do this..
I'd do it this way using an array:
$(document).ready(function () {
$('#setVal').on('click', function () {
//create an array for the values
var inpAry = [];
$('.combine').each(function () {
//add each value to the array
inpAry.push($(this).val+' ');
});
//set the final input val
$('#Voltes5').val(inpAry);
});
});
but you would need to remove the combine class from #setVal because that would be included in the .each.
This way it would also be possible to have the final box updated on keyup as I'm not just appending the values, the combined values are set each time.
$(document).ready(function(){
$('#setVal').on('click',function(){
var val='';
$('.combine').not('#Voltes5').each(function(){
val+=$(this).val();
});
$('#Voltes5').val(val);
});
});
.text() will give text of the element ,for input val u have to use .val()
So there's immediate big problem in the code, which is that you're referring to your Voltes5 element as a class, not an ID. The jQuery selector you want is:
#Voltes5
instead of:
.Voltes5
There are a few other things to think about too, though, for the sake of functionality and best practices. Firstly, the Voltes5 element also has class combine, meaning that the $('.combine').each() call will include this element. The outcome of this is that it will also append its current text to itself when the code is run (or, when the code is run with the above correction).
When grabbing the current entered text of an input element, a jQuery .val() call is what you want, not .text() - see this answer for some more discussion.
Another thing that could be noted is that you should really explicitly specify what sort of input these elements are; <input type="text"> is hugely preferable to <input>.
Finally, input is a void element (reading), meaning it shouldn't have any content between opening and closing tags. Ideally, you wouldn't even give a closing tag; either have just the opening tag, or self-close it:
<input>
<input />
HTH
replace $('.Voltes5').append($(this).text()+ ' ');
with
$('#Voltes5').append($(this).text()+ ' ');
<input id="NameAjax" class="ac_input" type="text" value="">
And using jquery:
).click(function(e) {
document.getElementById("NameAjax").value = 1;
}
But after the click the value does not change:
<input id="NameAjax" class="ac_input" type="text" value="">
I am looking for the output to look exactly like:
<input id="NameAjax" class="ac_input" type="text" value="1">
How to fix it ?
$("#elementID").on('click', function() {
$("#NameAjax").val('1');
});
You mentioned Jquery so I am going to assume you are using it. If so try this:
$('#NameAjax').attr('value','1')
The first part $('#NameAjax') selects the input and the second attr('value','1') sets the value attribute to 1
Use the val method:
$('#NameAjax').val('1');
Don't use jquery only half the way. And don't use attr function to set a value.
$("element_idOrclass").click(function() {
$("#NameAjax").attr("value","1");
}