Generate dynamic TextBoxes based on DropDownList selection using jQuery

Last Reply 8 months ago By pandeyism

Posted 8 months ago

hi,

i need code for displaying dropdown list only after the textbox appears. i am trying to run the code. the problem is i have to selected to number of questions to be entered by the user through drop down and after that for each question they should display number of answers for the particular question user wants to enter.

 <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#divAnswers").hide();
            $("#ddl1").change(function () {
                var total = $("#ddl1").val();
                var rawhtml = "";
                for (var i = 1; i <= total; i++) 
                {
                    rawhtml += "Q. " + i + "<textarea id='txtbox" + i + "' class = 'txtoption' wrap = 'hard'/><br/>";

                    $("#ddlAnswers").change(function () {
                        $("#divAnswers").show();
                        var noOfAnswers = $("#ddlAnswers").val();
                        var rawhtml1 = "";

                        for (var j = 1; j <= noOfAnswers; j++) {
                            rawhtml1 += "Ans" + j + "<textarea id='txtAnswer" + j + "' class = 'txtans' wrap = 'hard'/><br/>";

                        }
                        $("#allanswer").html(rawhtml1);
                    });
                }
                $("#alltext").html(rawhtml);
            });

 

<html>
<body>
    <form id="form1" runat="server">
    <div id = "ddlquestions">
    Number of questions:
    <select id="ddl1">
        <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>
    </select>
    </div>
    <br />
    <div id = "divAnswers">
    How many answers?
    <select id = "ddlAnswers">
       <option value = "1">1</option>
        <option value = "2">2</option>
        <option value = "3">3</option>
        <option value = "4">4</option>
    </select>
    </div>
    <div id="alltext">
    </div>
    <div id ="allanswer">
    </div>
    <br />
    <input type ="button"  ID="btnsave" runat="server" value="save" />
    
    </form>
</body>
</html>

 

You are viewing reply posted by: pandeyism 8 months ago.
Posted 8 months ago Modified on 8 months ago

Hi himani895,

Please refer below sample.

Remove this line of code

$("#divAnswers").hide();

and add style to disable div.

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#ddl1").change(function () {
            var total = $("#ddl1").val();
            var rawhtml = "";
            for (var i = 1; i <= total; i++) {
                rawhtml += "Q. " + i + "<textarea id='txtbox" + i + "' class = 'txtoption' wrap = 'hard'/><br/>";
                $('#divAnswers').show();
                $("#ddlAnswers").change(function () {
                    var noOfAnswers = $("#ddlAnswers").val();
                    var rawhtml1 = "";
                    for (var j = 1; j <= noOfAnswers; j++) {
                        rawhtml1 += "Ans" + j + "<textarea id='txtAnswer" + j + "' class = 'txtans' wrap = 'hard'/><br/>";
                    }
                    $("#allanswer").html(rawhtml1);
                });
            }
            $("#alltext").html(rawhtml);
        });
    });
</script>
<div>
    <div id="ddlquestions">
        Number of questions:
        <select id="ddl1">
            <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>
        </select>
    </div>
    <br />
    <div id="divAnswers" style="display: none">
        How many answers?
        <select id="ddlAnswers">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
        </select>
    </div>
    <div id="alltext">
    </div>
    <div id="allanswer">
    </div>
    <br />
    <input type="button" id="btnsave" runat="server" value="save" />
</div>

Demo