You must Sign In to post a response.
  • Category: ASP.Net MVC

    How to add textbox and dropdownlist dynamically in mvc using jquery

    hi all i have dropdownbox and a text box

    i have an image with + and - to add and remove lke below code then how to add textbox with dropdownlist dynamically upto 10 when click on + image and - will remove one by one

    <td class="center">
    <a href="#"> <img src="@Url.Content("~/images/cross.jpg")" width=16px height=16px title='@Resources.Resource.tip_RemoveApprover' alt='@Resources.Resource.tip_RemoveApprover' onclick="javascript:removeCurrentRow(this);">
    <img src="@Url.Content("~/images/plus.jpg")" width=16px height=16px title='@Resources.Resource.Approver' alt='@Resources.Resource.Approver' onclick="javascript:AddTextBox(this);"></a>
  • #769033


    Adding Textbox and Dialogbox dynamically both are same logic, so can you try the below logic to create a textbox on button click event and if it works, apply same for the dialog box.


    var counter = 2;

    $("#+ Button").click(function () {

    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="" >');



    $("#- Button").click(function () {
    alert("No more textbox to remove");
    return false;


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


    <input type='button' value='+ Button' id='addButton'>
    <input type='button' value='- Button' id='removeButton'>

    Similarly for dialog box replace the text area with dialog area.


  • #769036

    You can use given script code as example to add textbox and dropdownlist dynamically in mvc using jquery
    <script type="text/javascript" src=""></script>
    <script type="text/javascript">
    function createTextbox(){
    return "<input type='text' />"
    function createDropDown(){
    return "<select><option>One</option><option>Two</option><option>Three</option></select>"
    function createRow(){
    return "<tr><td>" + createTextbox() + "</td><td>" + createDropDown() + "</td><td>" + createDropDown() + "</td></tr>";
    function getValuesForPostback(){
    var ToReturn = "<items>";
    $('#sampleTable tr').each(function(){
    ToReturn += "<item>";
    ToReturn += "<text>" + $(this).find('input[type=text]').val() + "</text>";

    $(this).find('select option:selected').each(function(){
    ToReturn += "<select>" + $(this).val() + "</select>";
    ToReturn += "</item>";
    ToReturn += "</items>";
    return ToReturn;
    function submitValues()



  • #769041

    To add any control dynamically, we need to have a container control under which we need to add the newly created controls.
    In case of adding the textbox dynamically using JQuery, we need to create a container control lets say create a div element and then add the newly created control as below:

    <div id="DivContainer">

    For the full code snippet, you can follow the below post:

    Hope it will be helpful to you.

    Pawan Awasthi(DNS MVM)
    +91 8123489140 (whatsApp), +60 14365 1476(Malaysia)

  • Sign In to post your comments