I created a HTML table that has a radio button, delete button, and a text box in each row. When I select the apply button, I want to get the value of the text box in the same row as the checked radio button. Attached is my fiddle. Any help would be greatly appreciated :)
<input type="text" name="context" class="chooseContext"/>
This is the text that I am wanting to figure out how to alert based on which radio button is selected.
JSFiddle Code
Not sure if it's the most elegant solution but you can do this
//Send selected default to add on
$(".contexts-list tr input[type='radio']:checked").each(function() {
var val = $(this).parents("tr").find("input.chooseContext").val();
alert("Default: " + val);
});
Demo of it working
you can alert it like this:
$('#applyButton').on('click', function(){
var alertTxt = $(':radio:checked').closest('tr').find('.chooseContext').val();
alert(alertTxt);
});
Updated Fiddle
I solve this kind of things by using parents property in jQuery.
so usually when you click on something do a
$(this).parents('tr').find('input[type=text]').val();
So the hint here is to pick up the parent element row and then try finding the desired element in that row to take action.
You can set a number on id of input radio and input text, then you can check what of the radios of the same group is checked, then take the id of this radio and get the val of input text that has the same id. Wait i´m doing the jsfiddle... Regards!
EDIT: Here are users faster than me, Regards!
Related
I have the following code:
jQuery
$(document).ready(function(){
$('input[name="new_tax_button_post_tag"]').click(function(){
value = $('input[name="post_tag"]').val();
$("#fieldID3").val(value);
});
});
and I want it change:
HTML
<input type="text" id="fieldID3" name="changeme"value="n/a">
The problem is that the click itself is what creates the value, so I have to click the button twice to get the desired results. The first click creates the value. The second click sets the value in the field.
How do I make it so that it does it in one click?
It's like which came first the chicken or the egg.....
I write jquery on the basis of ID of button and textbox,
and also remove value from following input field,
<input type="text" id="fieldID3" name="changeme">
$(document).ready(function(){
$("#new_tax_button_post_tag").click(function(){
value = $("#post_tag").val();
$("#fieldID3").val(value);
});
});
I hope this useful for you.
I want to populate the selection from multiple list boxes to a single text box.
I've played around with it a bit but I'm still having trouble getting it to work
Many Thanks Brian
#Brian Lee
I have done a simple example. Please check this: http://plnkr.co/edit/sAEn6iBkwmZuWq56yHVT?p=preview
Created three set of <select> and a <textarea>. On change of select, updated textarea :
$("select").on("change", function() {
$("textarea").val( $("textarea").val() +' '+ $(this).find("option:selected").val() );
})
Been looking around and I cant seem to find an answer to this so maybe im wording it wrong but here it goes.
So I have a table displaying data from a database. In jQuery I have made it so a row can be added with empty inputs and then submitted to the database, this works fine.
I am now attempting to be able to edit it. So each row will have a button to edit that row, the button will put the row values into inputs so you can change the value and update the database. How can I do this? I was looking into using this here but Im not sure how I can get the value of the input boxes without them having some sort of ID.
jQuery I was trying to use:
$('#tbl').on('click','.xx',function() {
$(this).siblings().each(
function(){
if ($(this).find('input').length){
$(this).text($(this).find('input').val());
}
else {
var t = $(this).text();
$(this).text('').append($('<input />',{'value' : t}).val(t));
}
});
});
Am I over thinking this? Should I just be grabbing the values and then putting them in pre-made input boxes?
Update:
HTML:
sb.AppendLine("<table style='width: 80%;'>")
sb.AppendLine("<tr class='inputRowbelow'>")
sb.AppendLine("<td style='width: 20%;' class='ui-widget-header ui-corner-all'>Area</td>")
sb.AppendLine("<td class='ui-widget-header ui-corner-all'>Details</td>")
sb.AppendLine("<td class='ui-widget-header ui-corner-all'>Options</td>")
sb.AppendLine("</tr>")
For Each w In workItems
sb.AppendLine("<tr>")
sb.AppendLine("<td>" & w.area & "</td>")
sb.AppendLine("<td>" & w.details & "</td>")
sb.AppendLine("<td><a href='#' class='fg-button ui-state-default ui-corner-all edit'><img src='/images/spacer.gif' class='ui-icon ui-icon-pencil' /></a></td>")
sb.AppendLine("</tr>")
Next
sb.AppendLine("</table>")
There are a couple of ways to do this, including changing your VB code to add extra data to the html, but I will answer this from a pure javascript/JQuery solution.
First of all you need to handle the click event for each edit button, after that you find the matching row, and then you can get the first to td elements of that row...
$(".edit").click(function(e){
e.preventDefault();//prevent the link from navigating the page
var button = $(this);//get the button element
var row = button.closest("tr");//get the row that the button belongs to
var cellArea = row.find("td:eq(0)");//get the first cell (area)
var cellDetails = row.find("td:eq(1)");//get the second cell (details)
//now you can change these to your inputs and process who you want
//something like this...
ConvertToInput(cellArea, "area");
ConvertToInput(cellDetails, "details");
});
function ConvertToInput(element, newId){
var input = $("<input/>");//create a new input element
input.attr("id", newId);//set an id so we can find it
var val = element.html();//get the current value of the cell
input.val(val);//set the input value to match the existing cell
element.html(input);//change the cell content to the new input element
}
Here is a working example
From that you can then do the saving that you say you have already implemented, using the ID values of each field to get the values to save.
Instead of using a For Each ... in ... Next loop, use a a For loop with a counter. give each button and each row an ID with the current counter value at the end. You can then use Jquery to make each row editable separately, because each row has a row number now.
Ok, I have a situation where I have a page which has checkboxes on it next to items with input text fields.
I have a button at the top with the same fields of which the user can use to apply the settings to all the fields in the page that have been selected with their respective checkbox.
I'm trying to work out how to get all the checkboxes in the page that have been checked an then loop through them so I can possibly grab the ID for that row and then update the respective items, but I'm not 100% sure how to do this.
Each of the checkboxes on the page have the same class name, so I thought something like this would work..
var selected = $('input:checked', '.discount_select');
But it doesn't appear to work.
Here is a example checkbox and it's corresponding text box..
<input type="text" size="4" name="discount[101129]">
<input type="checkbox" value="1" class="discount_select" name="select[101129]">
So basically I wanna loop through the found selectec checkboxes, hopefully be able to pull out the id 101129 somehow and then be able to update the textbox with that same id.
JsFiddle: http://jsfiddle.net/79udU/
This should work:
$('#apply_selected').click(function() {
$('.discount_select:checked').each(function() {
$(this).prev("input").val(this.name);
});
});
Demo: http://jsfiddle.net/79udU/1/
Edit: To actually apply the value from the top input, use this:
$('#apply_selected').click(function() {
$('.discount_select:checked').each(function() {
$(this).prev("input").val($("#apply_discount").val());
});
});
Demo: http://jsfiddle.net/79udU/2/
you need
var selected = $('input.discount_select:checked' );
Welcome
I have a problem. I'm trying to build a javascript function that will retrieve me from the selected radiobutton value to div dynamically, after page loads. On the side I have several groups radiobutton. The function is to check which radiobutton is selected, regardless of which group it is and return the value to a div. Additionally, I would like that everyone is not selected range value has been added to the same div.
function returnRadio(){
return $('div :radio:checked'); // you can use class or id to your div
}
returnRadio();
To assign the first selected radiobutton to a div, you coud do this:
$("#your_div").text( $(":radio:checked:first").val() );
As you have many radio button groups, you could have many selected radios at a time. To retrieve them all, you can do this:
$(":radio:checked").each(function(){
alert($(this).val());
});
Hope this helps. Cheers