Create ordered list plus generate input field HTML & JS

Question

I have here the complete code of what I have applied and tried. Using the JS below, I got the display of the ordered list wrongly. It must be in 1,2,3 ... (so on and forth). For this, it sticked to 1.,1.,1. .... Another is that, using the JS below, how to customize it that I will get dynamic input fields? Because what if I'll input 5? The result of the fields must be 5 in number also. But what happened, 5 fields are added/appended to the current number of fields (sample, I inputted 3 before and 3 fields displayed so when 5 is inputted, there are 8 fileds in all). What I want is the exact number of fields from the number being inputted. (not that good at JS but I am badly wanting to learn its nature).

<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>

<script type="text/javascript">
$(document).ready(function() {
   $("ul").each(function() {
    $(this).find("li").each(function(count) {
       $(this)
         .css("list-style-type", "none")
         .prepend("<div class='listnumber'>" + (count + 1) + ".</div>");
       });
    });
 })    
</script>

<script type="text/javascript">
  $(document).ready(function() {
  $('[name="cand_no"]').on('change', function() {
         if (this.value != '') {
             var val = parseInt(this.value, 10);

             for (var i = 0; i < val; i++) {
                 var $cloned = $('.template tbody').clone();
                 $('#studentTable tbody').append($cloned.html());
         }
     });
  })
</script>   

</head>
 <body>
      <p>
         <label><strong>No.: </strong></label>
         <label><input name="cand_no" type="number" placeholder="Enter no. of fields." /></label>
         <div class="clear"></div>
     </p>
     <div class="cand_fields">
       <table id="studentTable" width="630" border="0">
            <tr>
               <td>Name</td>
            </tr>
            <tr>
               <td><input name="cand_name" type="text" placeholder="Name" required="required" /></td>
            </tr>
       </table>

    </div>

    <div class="template" style="display: none">
       <table>
        <tr >
           <td><ul><li><input name="cand_name" type="text" placeholder="Name" required="required" /></li></ul></td>



           </tr>
        </table>
      </div>
   </body>
</html>

Thanks a million..

Arun P Johny · Accepted Answer · 2014-01-31 08:55:27Z

2

Try

$(document).ready(function () {
    $(".template ul li").css("list-style-type", "none").prepend("<div class='listnumber'></div>");
})
$(document).ready(function () {
    var $tmpl = $('.template tbody'),
        $target = $('#studentTable tbody');
    $('[name="cand_no"]').on('change', function () {
        if (this.value != '') {
            var val = (parseInt(this.value, 10) || 0) + 2;
            var len = $target.children().length;

            if (val < len) {
                $target.children().slice(val).remove();
            } else {
                for (var i = len; i < val; i++) {
                    $($tmpl.html()).appendTo($target).find('.listnumber').text(i - 1);
                }
            }
        }
    });
})

Demo: Fiddle

answered Jan 31, 2014 at 8:55

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Create ordered list plus generate input field HTML & JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related