javascript - keyup not working for multiple textareas -


im using keyup function , works fine first textarea wont work others. below html , javascript:

<div class="form-group col-md-5">     <label for="sympton" class="control-label">observed symptom</label> <div class="output1"></div> </div> <div class="form-group col-md-5">     <label for="why" class="control-label">why?</label> <textarea id="mytextarea1" class="form-control" name="why" cols="20" rows="3"></textarea> </div> <div class="form-group col-md-2"> </div>         <div class="form-group col-md-5">     <label for="sympton" class="control-label">symptom 2</label> <div class="output2"></div> </div> <div class="form-group col-md-5">     <label for="why" class="control-label">why?</label> <textarea id="mytextarea2" class="form-control" name="why" cols="20" rows="3"></textarea> </div> <div class="form-group col-md-2"> </div>  
$(document).ready(function(){      $("#mytextarea1").keyup(function(){         // getting current value of textarea         var currenttext = $(this).val();          // setting div content         $(".output1").text(currenttext);     });      $("#mytextarea2").keyup(function(){         // getting current value of textarea         var currenttext = $(this).val();          // setting div content         $(".output2").text(currenttext);     });  }); 

im generating code using php don't see how effect it. yes works fine in fiddle. other javascript conflict?

    $(document).ready(function(){       <?php          if(isset($_session['analysiscounter'])){             for($i=1;$i<=$_session['analysiscounter'];$i++){ ?>              $("#mytextarea<?php echo $i; ?>").keyup(function(){                 // getting current value of textarea                 var currenttext = $(this).val();                  // setting div content                 $(".output<?php echo $i; ?>").text(currenttext);             });       <?php } } ?>       }); 

i believe issue might because of dynamically adding second , henceforth textboxes. wise delegate events scenario make work:

$(document).ready(function() {      $(document).on("keyup", "#mytextarea1", function() {      // getting current value of textarea      var currenttext = $(this).val();        // setting div content      $(".output1").text(currenttext);    });      $(document).on("keyup", "#mytextarea2", function() {      // getting current value of textarea      var currenttext = $(this).val();        // setting div content      $(".output2").text(currenttext);    });    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  <div class="form-group col-md-5">    <label for="sympton" class="control-label">observed symptom</label>    <div class="output1"></div>  </div>  <div class="form-group col-md-5">    <label for="why" class="control-label">why?</label>    <textarea id="mytextarea1" class="form-control" name="why" cols="20" rows="3"></textarea>  </div>  <div class="form-group col-md-2">  </div>  <div class="form-group col-md-5">    <label for="sympton" class="control-label">symptom 2</label>    <div class="output2"></div>  </div>  <div class="form-group col-md-5">    <label for="why" class="control-label">why?</label>    <textarea id="mytextarea2" class="form-control" name="why" cols="20" rows="3"></textarea>  </div>  <div class="form-group col-md-2">  </div>


Comments

Popular posts from this blog

how to insert data php javascript mysql with multiple array session 2 -

multithreading - Exception in Application constructor -

windows - CertCreateCertificateContext returns CRYPT_E_ASN1_BADTAG / 8009310b -