CODEWITHSUNDEEP
jquery
The Learner
The Learner

Reputation: 3917

jquery changing the dynamically created list

I am creating using Jquery some lists. There is 1 text boxes. user gives some data. when ever user does press Button , that data is copied and added to the div.

$("#Add").click(function(){
   var val = $('[name=Variablename]').val();
     var masterHTML = '<input type="checkbox" name="'+val+'">'+val+'   '+val+'  '+'<br>';
                $("#main").append( masterHTML);
          });

now the list can be big say example:

sampletext1
sampletext2
sampletext3
sampletext4
sampletext5
sampletext6

next to each there will be a check button. as this is all dynamic data. so when a user checks say sampletext1. how can I get that data. basically I am looking at getting that data display on the text box so that user can update sampletext1 to sampletext1update and post it back.

how can I do that . I am not using tables (or) forms. just div and adding text with check button

the div main is :

<div id="main">
</br>
</div>

Upvotes: 0

Views: 89

Answers (1)

bipen
bipen

Reputation: 36541

one way... give all your dynamically generated checkbox a class(same class)..say checkboxClass... and call click event for that

$('#main').on('change','.checkboxClass',function(){
   if($(this).is(':checked')){
       alert($(this).val());
    }
   });

and you need to define value attribute of checkbox for this to work (which is missing in above code)....again since this is checkbox user can choose multiple...have you thought about that..??

updated

then create a button dynamically along with checkbox with same class.. hide it ...

 $("#Add").click(function(){
     var val = $('[name=Variablename]').val();
     var masterHTML = '<input class="checkboxClass" type="checkbox" value="'+val+'" name="'+val+'">'+val+'   '+val+'  '+ '<button class="buttonClass">update</button><br>';
     $("#main").append( masterHTML);
      $('.buttonClass').hide(); //hide button
  });   


  $('#main').on('change','.checkboxClass',function(){
    $('.buttonClass').hide(); //make sure all other button is hidden
    if($(this).is(':checked')){ //<--here missed bracket
        $(this).next('.buttonClass').show(); //show the button that is just clicked
    }
   });

  //code to update on click of button
  $('#main').on('click','.buttonClass',function(){
       $('#yourtextBoxId').val($(this).prev().val());
  });

Upvotes: 1

Related Questions