Question

on my MVC3 razor page,I am trying to dynamically add a textbox with click of a button

Pasted below is my Jquery .But when I click addButton ,I am getting the above error message .

To resolve this error I tried adding <script type="text/javascript" src="jquery-1.3.2.min.js"></script> ,but still I am getting the same error .Appreciate your suggestions to resolve this error.

<script type="text/javascript">



    $(document).ready(function(){



        var counter = 2;



        $("#addButton").click(function () {



            if(counter>10){

                alert("Only 10 textboxes allow");

                return false;

            }   



            var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);

                newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' +

                '<input type="text" name="textbox' + counter + 

                '" id="textbox' + counter + '" value="" >');



            newTextBoxDiv.appendTo("#TextBoxesGroup");



            counter++;

        });



        $("#removeButton").click(function () {

            if(counter==1){

                alert("No more textbox to remove");

                return false;

            }   

            counter--;



            $("#TextBoxDiv" + counter).remove();

        });



        $("#getButtonValue").click(function () {



            var msg = '';

            for(i=1; i<counter; i++){

                msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();

            }

            alert(msg);

        });



  });

</script>

Answer 1

you may want to use jquery all the way instead of mixing up native DOM and jquery. this one will actually work:

var newTextBoxDiv = $('<div id="TextBoxDiv' + counter + '"><label>Textbox #'+ counter + ' : </label><input type="text" name="textbox' + counter + '" id="textbox' + counter + '" value="" ></div>');