up vote 1 down vote favorite

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 () {
        CORNER_CASE_LOADING();
    });
    // FUNCTIONLITY TO CREATE THE DOWNDOWN MENUS 
    function CORNER_CASE_LOADING() {
        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>

thanks

share|improve this question
1  
this might be more appropriate for the code review exchange. – Bosworth99 Jul 11 '11 at 19:06
oh, i never knew this, thanks! – Gordon Jul 11 '11 at 19:14

migrated from stackoverflow.com Jul 12 '11 at 22:41

1 Answer

up vote 3 down vote accepted 
$(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 () {
        CORNER_CASE_LOADING();
    });

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

share|improve this answer
the thing that blew my mind is the bind 2 events in one!! – Gordon Jul 12 '11 at 15:15

Your Answer

 
or
required, but never shown
discard

By posting your answer, you agree to the privacy policy and terms of service.