# Adding/remving dynamically text boxes

I have this coding and I think it works. However, I would like to understand if there is a better way to do this. This would automatically create new textboxes or delete them based on the given selected number.

<script>
var OLD_CASE_NUMBER = 1;

$("#cornercases").ready(function () { CORNER_CASE_LOADING(); });$("#cornercases").change(function () {
});
// FUNCTIONLITY TO CREATE THE DOWNDOWN MENUS
var topvalue = $('#cornercases').val(); var counter = 0; var newvalue = parseInt(OLD_CASE_NUMBER) + 1; // ADD MORE VALUES IN CASE if (parseInt(topvalue) == 1 && parseInt(OLD_CASE_NUMBER) == 1) { var counter = 1; var newTextBoxDiv =$(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.html('<label>Textbox #'+ counter + ' : </label><input type="text" name="textbox' + counter + '" id="textbox' + counter + '" value="" >');
newTextBoxDiv.appendTo("#div_selection_section");
}
if (newvalue <= topvalue)
{
for (counter=newvalue;counter<=topvalue;counter++)
{
var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter); newTextBoxDiv.html('<label>Textbox #'+ counter + ' : </label><input type="text" name="textbox' + counter + '" id="textbox' + counter + '" value="" >'); newTextBoxDiv.appendTo("#div_selection_section"); } } else if (parseInt(OLD_CASE_NUMBER) > parseInt(topvalue)) { for (counter=10;counter>topvalue;counter--) {$("#TextBoxDiv" + counter).remove();
}
}
OLD_CASE_NUMBER = topvalue;
}
</script>
<select id=cornercases name=cornercases>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<div id='div_selection_section'></div>


## migrated from stackoverflow.comJul 12 '11 at 22:41

This question came from our site for professional and enthusiast programmers.

• this might be more appropriate for the code review exchange. – Bosworth99 Jul 11 '11 at 19:06

$(document.createElement('div')). ...  is the same as: $('<DIV></DIV>'). ....


you can just build uppon your previus jQuery statements:

$('<DIV></DIV>') .attr('id','lol') .html('hey hey') .appendTo("#div_selection_section");  $("#cornercases").change(function () {
});


is the same as:

$("#cornercases").change(CORNER_CASE_LOADING);  and you can bind 2 events in one with jQuery so: $("#cornercases").bind("change ready",CORNER_CASE_LOADING)


you might want to parsInt topvalue in the line with te var

var topvalue = parseInt(\$('#cornercases').val());


you will not need to repeat pareInt in each 'if' if you do that.

Also, I see that OLD_CASE_NUMBER is an integer (and if you do what is mesioned above), you won't need to parse that either

as far as I see the second line of your function var counter = 0; is useless, because everywhere you use counter you first set it to something else

• the thing that blew my mind is the bind 2 events in one!! – Gordon Jul 12 '11 at 15:15