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
Post a Comment