I have a table data which is generated dynamically via a loop. The td contains a hidden field. below is the code for the same:
<td class="gridtd" id = "r<%=RowNumber%>c<%=ColumnNumber%>">
<input id="hiddendata" type="hidden" value="<%: item.Key%>"/>
</td>
I need to extract the value of the hidden field based on the td selected using jQuery. Please help me get the correct jquery code.
Just select your input and take the value (val()):
$("#hiddendata").val();
If you want to take all hidden input values:
$("input[type='hidden']").each(function () {
console.log($(this).val());
});
Note that the element ids must be unique.
I need to extract the value of the hidden field based on the td selected using jQuery.
If by select you mean, click, you can simply pass this when getting the value:
$("td").on("click", function () {
console.log(
$("[type='hidden']", this).val()
);
});
For your general knowledge, if you do $("#hiddendata", this).val(); inside of the click handler, it will return the correct value (even having multiple ids with the same value).
But definitely, the ids must be unique.
Use this :
$('#hiddendata').val();
$('td').click(
function(event)
{
$(event.target).find('#hiddendata').val();
}
);
It ll give the hiddendata value based on td selection
This will give the value of the hidden field for the selected td.
$('.gridtd').click(function(){
console.log($(this).find('input').val());
});
$('.gridtd').click(function(){
console.log($(this).find('input[type=hidden]').val());
});
You can try this:
$('.gridtd').each(function(){
var currentId = $(this).attr('id');
var hiddenval = $('#'+currentId).find('input[type=hidden]').val();
alert(hiddenval);
})
Related
I'm currently working on a dynamic form which enables the user to add as many variants as they would like. This form which can be added has a price, size and color. The size and color are select2 select boxes which enable the user to select multiple things. The form:
<div class="col-sm-4">
<label>Kleuren</label>
<select name="colors[{{$i}}][]" id='color-options' class="form-control multiple-select" multiple="multiple">
#foreach($colors as $id=>$color)
<option value="{{$id}}">{{$color}}</option>
#endforeach
</select>
</div>
When looking at the HTML code I have multiple of these forms which go by name: colors[0][], colors[1][], colors[2][] etc.
How do I print the value of a selected new color in a new div? The code which I have thus far:
$(document).ready(function() {
$('.multiple-select').select2({
language: 'nl'
});
$('.summernote').summernote();
var addVariantButton = document.getElementById('addVariant[0]');
addVariantButton.addEventListener('click', function(){
addVariant(0);
});
var colorSelected = document.getElementsByName('colors[0][]');
colorSelected.addEventListener("click", displayColorSelected);
});
function displayColorSelected() {
var selected_value = document.getElementById("color-options").value;
console.log(selected_value);
}
But this only works for the first colors input form, but how can I make this into a more dynamical function to get all colors input?
You can get all selected values in array as below:
function displayColorSelected() {
var selected_value = $("[id='color-options']").toArray().map(x => $(x).val());
console.log(selected_value);
}
Note: id selector will always return single element which will be first with that id. So you're getting value for first select only.
You can use attribute selector ([]) instead which will find every element with given id. So here $("[id='color-options']").toArray() will find every element with id equal to color-options and map(x => $(x).val()) will return only value part from the elements array.
Add all the selects a class ("color-select" for example), and run over all the selects -
$('.color-select').each(function() { console.log($(this).val()); })
You may need to delegate your event listener
document.addEventListener('event',function(e){
if(element){//do something}
})
Since you are using jquery its easier
$(document).on('event','element',function());
I am creating several buttons dynamically. I am trying to assign each on a different class or id so when it is clicked on it will have a different output. How would I add an value at the end of each class or id name to give each button a unique class or id name?
Here is my code
socket.on('usernames', function(data){
var $contentWrap = $("#contentWrap").empty();
for(i=0; i <data.length; i++){
$input = $('<input type="button" style="width:200px" class= "button"/></br>');
$input.val(data[i]);
$input.appendTo($("#contentWrap"));
}
});
Can I created an on click event for the all button that I created. So far I created an on click even, but it only works for the first button.
Here is my code
$(document.body).on('click','.button', function(e) {
console.log($('.button').val());
});
Use $(this).val() instead of $('.button').val(). this will refer clicked button.
$(document.body).on('click','.button', function(e) {
console.log($(this).val());
});
socket.on('usernames', function(data){
var $contentWrap = $("#contentWrap").empty();
for(i=0; i <data.length; i++){
$input = $('<input type="button" id="btn"'+i+' style="width:200px" class= "button"/></br>');
$input.val(data[i]);
$input.appendTo($("#contentWrap"));
}
});
Problem: Is with this part of code console.log($('.button').val()); The part $('.button') selects all the buttons , But when you say .val() it defaults to the first one out of the collection. Hence you see the same output on all the button clicks.
Solution: Change the code to log the current clicked button value by using $(this).val(). this will refer to the element that triggered the event.
So the final line of code should be
console.log($(this).val());
I have a table with Column title. There is also a edit button. If I click the button, Table title should be a Input field with title name as a value in it. Edit button will turn into Save Button.
I can rename the title and Save the new names. I not good in jquery and what I made creating bunch of input fields and I can't save new names. FIDDLE
Any help will save my day. Thanks in advance.
jQuery:
var textInfo = $('.table th').text();
$("html").on('click', '.btn-danger', function() {
$('.table th').append('<input id="attribute" type="text" class="form-control" value="' + textInfo + '" >');
$('.btn-danger').text('Save');
}) ;
Here is a fiddle that solves your problem.
http://jsfiddle.net/has9L9Lh/54/
It uses a common approach of toggling an element's class (or some other attribute), to determine the state of your program. In this case, it determines whether or not the columns are in edit-mode, and changes the button text and th html accordingly.
$("html").on('click', '.btn-danger', function() {
var editMode = $(this).hasClass('edit-mode'),
columns = $('.table th');
if (!editMode){
$(this).html('Save').addClass('edit-mode');
columns.each(function(){
var txt = $(this).text();
var input = $('<input type="text">');
input.val(txt);
$(this).html(input);
});
} else {
$(this).html('Edit').removeClass('edit-mode');
columns.each(function(){
var newName = $(this).find('input').eq(0).val();
$(this).html(newName);
});
}
}) ;
• you should not use id in the append this will create multiple id of the same name.
• use $(".form-control").length to check if it exist. this will solve multiple input when button is clicked multiple times.
• create a new button to submit your change.
• create another click event for the new button.
• than use it $.val() to get input value than pass that value to the new table title. and you are done.
I hope this will point you to the right direction. :D
I have the below hidden field and I want to disable all the elements within a specific div based on the value of the hidden field.
Here is the hidden field.
<input type="hidden" id="addincidentval" name="addincidentval" value="Add Incident"/>
The div id is ehdiv and it contains select, input text and check and textarea fields.
Below is the jquery function
$(function(){
var addinc = $("#addincidentval").val();
if(addinc =="Add Incident"){
$("#ehdiv *").disable();
}
})
use this jquery code
$(function(){
var addinc = $("#addincidentval").val();
if(addinc =="Add Incident"){
$("#ehdiv *").prop("disabled",true);
}
})
$("#ehdiv").find('*').prop('disabled', true)
you can also try
$("#ehdiv :input").prop('disabled', true)
How to select ALL children (in any level) from a parent in jQuery?
How to get all child inputs of a div element (jQuery)
:input selects all input, textarea, select and button elements. more: http://api.jquery.com/input-selector/
$(function(){
var addinc = $("#addincidentval").val();
if(addinc =="Add Incident"){
$("#ehdiv :input").attr("disabled", true);
}
})
I have something very simple to just get an input value.
The code looks like this:
var $a = $('.custom-amount').val();
$('.custom-amount').on('change', function() {
alert($a)
})
And my input:
<div class='custom-amount'>
<input placeholder='Custom Amount' type='text-area'>
For some reason, my alerts are empty. Does anyone see whats going wrong?
Change your selector to $('.custom-amount input'), and get the value after the change event is fired, e.g.
$('.custom-amount input').on('change', function() {
var a = $(this).val();
alert(a);
});
Right now, you are trying to get the value of a div, which won't work. You need to get the value of the input.
Edit: also, it looks like you are trying to display a textarea. Try replacing this...
<input placeholder='Custom Amount' type='text-area'>
With this...
<textarea placeholder='Custom Amount'></textarea>
This may help:
http://jsfiddle.net/d648wxry/
The issue is very simple, you are getting the value of the div element. Instead you should retrieve the value of the input element so the 'custom-amount' class must be added to the input.
Also you need to execute the val() method inside the event to get the value updated.
var $a = $('.custom-amount');
$('.custom-amount').on('change', function() {
alert($a.val());
});
Cause your div has no value. Change your code to:
var $input = $('.custom-amount input');
$input.on('change', function() {
var $a = $input.val();
alert($a)
})
First of all, you only assign to $a outside of the change function. This would be more clear if you kept your code lined up better (see the edit I made to your post). This is the right way to do it:
$('.custom-amount').on('change', function() {
var $a = $('.custom-amount').val();
alert($a)
});
Second of all, the class custom-amount is assigned to a <div> instead of the <input> element. You have to select the <input> element, not the <div>. Change your markup to:
<div>
<input placeholder='Custom Amount' type='text-area' class='custom-amount'>
</div>