TextBox create div javascript

Question

I want to create different "div" in the body when the user enter the number of div in the textbox

For example, with the markup for my textbox: <input type="text" id="numberDiv" maxlength="1">

I am using the following JS:

<script>
    $(document).ready(
    function () {
        $('#numberDiv').keyup(

        function () {
            var s = $("#numberDiv").val();
            var nbrDiv = parseInt(s);
            for(var i = 0; i <= nbrDiv; i++)
            {
               var iDiv = document.createElement('div');
               iDiv.id = 'div';
               document.getElementsByTagName('body')[0].appendChild(iDiv);
               iDiv.innerHTML = "I'm a div";
            }
        })
    });
</script>

My problem is when I put for example "1" in the textbox it creates 1 div but when I press an other key (for example: enter, alt, ...) it creates another div even if my input has the maxlength="1". How can I disable the pressing on another key when my first number is in the textbox.

you can put a check like if(keycode == something) then don't allow it to be output, you're familiar with key codes right? every key on the keyboard has a a code or id associated with it — Abdul Ahmad, Dec 06 '14 at 21:46
look here for help: http://stackoverflow.com/questions/19849189/js-function-to-allow-enter-only-letters-and-white-spaces also here: http://www.dotnetlearners.com/javascript/allow%20only%20alphabets%20in%20a%20textbox%20using%20javascript.aspx — Abdul Ahmad, Dec 06 '14 at 21:47
If you're using jQuery, then use jQuery. Don't use `document.getElementsByTagName('body')[0].appendChild(iDiv);` — j08691, Dec 06 '14 at 21:47
I must check all the keycode ? There is not an other way please ? @AbdulAhmad — Memo, Dec 06 '14 at 21:48
@user3524214 no you can do something like if (keycode > somenumber || keycode < somenumber) usually similar keys are grouped together so just pick a range — Abdul Ahmad, Dec 06 '14 at 21:49
why don't you try to mask your field: http://igorescobar.github.io/jQuery-Mask-Plugin/ this will make it so people can only enter numbers and only 1 number if you wish — Abdul Ahmad, Dec 06 '14 at 21:50

score 0 · Answer 1 · answered Dec 06 '14 at 21:52

you can mask your input like so:

first Import the jQuery mask library,

Textbox : <input type="text" id="numberDiv" maxlength="1">

$(document).ready(
    function () {
    $('#numberDiv').mask('0');
});

this will only allow 1 number (digit character) to be in the box at a time

look here for more examples

and here to download the mask plugin

score 0 · Answer 2 · answered Dec 06 '14 at 21:53

either you put the check on keycode for using event, if it is for numeric value then only run the logic. simple if in function will work.

<script>
$( "#whichkey" ).on( "keydown", function( event ) {
if( event.which <           // range for 1 to 9){
//logic comes here
}
});
</script>

or you can add code to remove innerhtml before adding the div. So even if user press anyother key like enter. It will delete the innerhtml and then add the 1 div.

fardjad · Accepted Answer · 2014-12-06T22:32:11.310

First of all, you shouldn't use the same id for all of the divs. So instead of iDiv.id = 'div' you might want to do this:

iDiv.attr('id', 'div[' + i + ']');

I'm not sure about your requirements, but you might also want to check the number of divs before creating new ones:

$('#numberDiv').keyup(function() {
  var s = $(this).val();
  var currentDivsCount = $('body > div').length;
  var nbrDiv = parseInt(s, 10) - currentDivsCount;
  if (isNaN(nbrDiv)) return;
  var iDiv;
  for (var i = 0; i < Math.abs(nbrDiv); i++) {
    if (nbrDiv > 0) {
      iDiv = $('<div>I\'m a div</div>');
      iDiv.attr('id', 'div[' + (currentDivsCount + i) + ']');
      iDiv.appendTo('body');
    } else {
      $('body > div:last').remove();
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="numberDiv" maxlength="1">

My body is delete when I put 1 in the textbox – Memo Dec 06 '14 at 23:45 — Memo, Dec 06 '14 at 23:45
When I put 3 -> 1 div, 4 -> 2 div, 5 -> 3 div @fardjad – Memo Dec 06 '14 at 23:50 — Memo, Dec 06 '14 at 23:50

TextBox create div javascript

3 Answers3