CODEWITHSUNDEEP
javascriptjquery
Md Rathik
Md Rathik

Reputation: 86

JQuery Append Text Dynamically by Onblur input value

When i give input (1) then its successfully append text. But when i erase then input value and again give input(2) then its increasing with previous value(1+2=3). Where loop count previous and present value

first i gave 1 then append 1text then i again give 1 then it append two text. Where loop count previous and present value

   $(document).ready(function(){
    var i=0;
    $("#flatcount").blur(function() {
            var floor = (this).value;
                for(i=1;i<=floor;i++) {
                    $('#row').append('<p>This is appended text</p><br>');
                }
    });
});

Upvotes: 1

Views: 509

Answers (2)

prasanth
prasanth

Reputation: 22500

You need to empty the element.before append like $('#row').empty()

$(document).ready(function() {
  var i = 0;
  $("#flatcount").blur(function() {
    var floor = $(this).val();
    $('#row').empty() //empty
    for (i = 1; i <= floor; i++) {
      $('#row').append('<p>This is appended text</p><br>');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="flatcount">
<p id="row"></p>

Upvotes: 1

zarif khan
zarif khan

Reputation: 81

use this code i think it will work

$(document).ready(function(){
    var i=0;
    $("#flatcount").blur(function() {
               $("#row").empty();
               var floor = (this).value;
                for(i=1;i<=floor;i++) {
                    $('#row').append('<p>This is appended text</p><br>');
                }
    });
});

Upvotes: 1

Related Questions