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>
    </td>
  • #769033

    Hi,

    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.




    $(document).ready(function(){

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

    newTextBoxDiv.appendTo("#TextBoxesGroup");

    });

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

    counter--;

    $("#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.


    Thanks,
    Mani

  • #769036

    You can use given script code as example to add textbox and dropdownlist dynamically in mvc using jquery
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></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()
    {
    alert(getValuesForPostback());
    }
    $(document).ready(function(){
    $('#sampleTable').append(createRow());

    $('#btnAdd').click(function(){
    $('#sampleTable').append(createRow());
    });

    $('#btnSubmit').click(function(){
    submitValues();
    });
    });
    </script>

  • #769041

    Hai VELIDIRAVIRAM,
    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:

    https://www.aspsnippets.com/Articles/Dynamically-add-and-remove-TextBoxes-using-jQuery.aspx

    Hope it will be helpful to you.


    Regards,
    Pawan Awasthi(DNS MVM)
    +91 8123489140 (whatsApp), +60 14365 1476(Malaysia)
    pawansoftit@gmail.com


Sign In to post your comments