Category: ASP.Net MVC

10 Mar 2017 19:36

Joined:	12/04/2011
Level:	Silver
Points:	104

Points:	5

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

13 Mar 2017 13:46

Joined:	18/12/2008
Level:	Gold
Points:	2921

Points:	4

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

15 Mar 2017 06:52

Joined:	30/04/2012
Level:	Gold
Points:	7233

Points:	4

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

15 Mar 2017 12:37

Joined:	28/04/2006
Level:	Gold
Points:	29773

Points:	4

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

How to add textbox and dropdownlist dynamically in mvc using jquery

About dotnetspider.com

Quick Links

General

Services