CODEWITHSUNDEEP
javascriptjquery
owen
owen

Reputation: 147

keyup not working for multiple textareas

Im using keyup function and that works fine for first textarea but wont work for others. Below is my html and 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 the current value of textarea
        var currentText = $(this).val();

        // Setting the Div content
        $(".output1").text(currentText);
    });

    $("#myTextarea2").keyup(function(){
        // Getting the current value of textarea
        var currentText = $(this).val();

        // Setting the Div content
        $(".output2").text(currentText);
    });

});

Im actually generating the code using php don't see how that would effect it. But yes works fine in fiddle. Could 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 the current value of textarea
                var currentText = $(this).val();

                // Setting the Div content
                $(".output<?php echo $i; ?>").text(currentText);
            });
      <?php } } ?>
      });

Upvotes: 1

Views: 563

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

I believe that the issue might be because of dynamically adding the second and henceforth textboxes. So it is wise to delegate the events for this scenario to make it work:

$(document).ready(function() {

  $(document).on("keyup", "#myTextarea1", function() {
    // Getting the current value of textarea
    var currentText = $(this).val();

    // Setting the Div content
    $(".output1").text(currentText);
  });

  $(document).on("keyup", "#myTextarea2", function() {
    // Getting the current value of textarea
    var currentText = $(this).val();

    // Setting the 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>

Upvotes: 1

Related Questions