CODEWITHSUNDEEP
javascriptjquery
19eggs
19eggs

Reputation: 195

Append text of the input box on radio button clicked

I have been trying to append the value of the input box when a particular radio button is clicked.

Rows of radio buttons are dynamically generated. Each row will have 7 radio buttons.

When buttons are clicked, the row id and its value is put into a text area using an array. However, now when the last radio button (missing) is clicked, not only the row id and the value but the text of the input box which gets displayed needs to be appended.

So far we have 14001290~01~01~CD0|15489587~03~01~CM where CDO and CM are the values of the radio buttons and the previous to it are the row ids.

What we need now is 14001290~01~01~CD0|15489587~03~01~CM~Append this text|87554585~02~04~CD1 ?

This is my code.

$("input:radio").hover(
function() {
$(this).prev('.r-title').show();
  }, function() {
if (!$(this).is(':checked')) {
    $(this).siblings('.r-title, .m-notes').hide();
  }
});
$("input:radio").click( 
function () {
$(this).parent().parent().find('.r-title, .m-notes').hide();
var totalRd = $('table').find(':not(.pend) > input:radio:checked').length;
var clicked =[];
$("#totalRd .rd-count").html(totalRd);
$(this).siblings('.r-title, .m-notes').show(); 
$('table').find(":not(.pend) >input[type=radio]:checked").each(function() {
var selectedId = $(this).parent().parent().attr('id');
clicked.push(selectedId+"~"+this.value); 
}); //checked
$("#inputhere").val(clicked.join('|'));
});

Fiddle here

Hoping someone will help me. If you are not sure about the question please ask ? Thanks

Upvotes: 1

Views: 1726

Answers (3)

Amr Bedair
Amr Bedair

Reputation: 196

$("input:radio").hover(function() {
    $(this).prev('.r-title').show();
}, function() {
    if (!$(this).is(':checked')) {
        $(this).siblings('.r-title, .m-notes').hide();
    }
});
$("input:radio").click(function () {
    $(this).parent().parent().find('.r-title, .m-notes').hide();
    var totalRd = $('table').find(':not(.pend) > input:radio:checked').length;
    var clicked =[];
    $("#totalRd .rd-count").html(totalRd);
    $(this).siblings('.r-title, .m-notes').show(); 
    $('table').find(":not(.pend) >input[type=radio]:checked").each(function() {
var selectedId = $(this).parent().parent().attr('id');
var text = $(this).siblings('input.m-notes:visible').val();
clicked.push(selectedId+"~"+this.value+text); 
 }); //checked
    $("#inputhere").val(clicked.join('|'));
});

you need some if to check that is no an empty string and to add '~' before your string

Upvotes: 1

Jai
Jai

Reputation: 74738

I think this is what you want to do:

$('table').find(":not(.pend) >input[type=radio]:checked").each(function () {
    var selectedId = $(this).parent().parent().attr('id');
    var newVal = ($(this).next('.m-notes:visible').length) ? this.value + "~" + $(this).next('.m-notes:visible').val() : this.value;
    clicked.push(selectedId + "~" + newVal);
}); //checked
$("#inputhere").val(clicked.join('|'));

as per your latest comment you can add this:

$('.m-notes').keyup(function () {
   var $self = $(this);
   var clicked = [];
   $('table').find(":not(.pend) >input[type=radio]:checked").each(function () {
      var selectedId = $(this).parent().parent().attr('id');
      var newVal =  this.value + "~" + $(this).next('.m-notes').val();
      clicked.push(selectedId + "~" + newVal);
   }); //checked
   $("#inputhere").val(clicked.join('|'));
});

var newVal try declaring this var and do a ternary operation to check if the next .m-notes textbox is visible or not if visible the concatenate the radio value to the textbox value.

You can take a look at this fiddle.

Updated fiddle

Upvotes: 1

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93551

Something like this:

JSFiddle: http://jsfiddle.net/TrueBlueAussie/jj4Uv/22/

Feel free to remove all the comments :) Basically it updates on keyup for the text boxes and radio check changes.

// Hover shows/hides the additional information
$("input:radio").hover(function () {
    $(this).prev('.r-title').show();
}, function () {
    if (!$(this).is(':checked')) {
        $(this).siblings('.r-title, .m-notes').hide();
    }
});

/* $this is the radio button */    
function updateSummary($this){
    $this.closest('[id]').find('.r-title, .m-notes').hide();
    var totalRd = $('table').find(':not(.pend) > input:radio:checked').length;

    // Array of clicked items
    var clicked = [];

    // Set number of selected items
    $("#totalRd .rd-count").html(totalRd);

    // Show the title and notes next to the radio button
    $this.siblings('.r-title, .m-notes').show();

    // Find all checked radio buttons
    $('table').find(":not(.pend) >input[type=radio]:checked").each(function () {
        // Find closest ancestor with an id
        // See if we have a text box, if so use the text
        var $text = $(this).siblings('input[type=text]:visible');
        var selectedId = $(this).closest('[id]').attr('id');
        var value = selectedId + "~" + $(this).val();
        if ($text.length)
        {
            value += "~" + $text.val();
        }
        clicked.push(value);
    }); //checked

    // Display the selected ids 
    $("#inputhere").val(clicked.join('|'));
}

// Radio selection changes selected options
$("input:radio").click(function () {
    updateSummary($(this));    
});
$('input[type=text].m-notes').bind('keyup', function () {
    // Pass the target radio button to our helper
    updateSummary($(this).siblings(':radio'));
});

I noticed you were using an older version of JQuery otherwise I would have switched the events to use delegated version of on instead of `bind'.

Upvotes: 1

Related Questions