Raj Karanam Raj Karanam - 11 days ago 4
HTML Question

how to empty the first textarea value in second textarea using js

I am getting the first textarea value in second textarea because I am using same id for add more concept. Below is my code.

<div id="divShortAnswerOption_Templated">
<div class="form-group">
<div class="col-sm-3">
<textarea name="t_short_answer[]" id="t_short_answer[]" style="width:100%;height:150px;" class="form-control"></textarea>
<span id="check-e"></span>
</div>
<div class="col-sm-2">
<a href="javascript:void(0);" class="btn btn-primary addmoreShort" id="result-button"><i class="fa fa-plus-circle" aria-hidden="true" style="font-size:20px;"></i></a>
<a href="javascript:void(0);" class="btn btn-danger deleteShort"><i class="fa fa-minus-circle" aria-hidden="true" style="font-size:20px;"></i></a>
</div>
</div>
</div>


Below is my js code:

if(flagForType=="short"){
var contentHtml = '';
contentHtml += '<div class="col-sm-3">';
contentHtml += '<textarea name="t_short_answer[]" id="t_short_answer" style="width:100%;height:150px;" class="form-control"></textarea>';
contentHtml += '<span id="check-e"></span>';
contentHtml += '<div>';
$("#divShortAnswerOption_Templated").append(contentHtml);
}


below is my image :

I written hii in first textarea when I add another textarea first textarea value is displaying in second textarea

I wrote hii in first textarea. When I add another textarea, first textarea value is displaying in second textarea.

Answer

How about adding and removing textareas. Hope it helps!

$(document).ready(function(){
       
   $('.userButton').click(function() { 

    var someID = $(this).attr("id");
    if(someID === "result-button"){
      var contentHtml =
    '<div class="col-sm-3">' +
        '<textarea name="t_short_answer[]" class="form-control t_short_answer" style="width:70%;height:120px;"></textarea>' +
        '<span class="check-e"></span>' +
    '<div>';
      $("#divShortAnswerOption_Templated").append(contentHtml);
    }
    else if(someID === "deleteTextArea"){
      $(this).closest("#divShortAnswerOption_Templated").find("textarea.t_short_answer:last").remove();
    }
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="divShortAnswerOption_Templated">
                  <div class="form-group">
                         <div class="col-sm-3">
                                   <textarea name="t_short_answer[]" id="t_short_answer[]" style="width:70%;height:120px;" class="form-control"></textarea>
                                    <span id="check-e"></span>
                         </div>
                        <div class="col-sm-2">
                            <a href="javascript:void(0);" class="btn btn-primary addmoreShort userButton" id="result-button"><i class="fa fa-plus-circle" aria-hidden="true"></i></a>
                            <a href="javascript:void(0);" class="btn btn-danger deleteShort userButton" id = "deleteTextArea"><i class="fa fa-minus-circle" aria-hidden="true"></i></a>
                     </div>
                  </div>
             </div>

Comments