Please enable Javascript to correctly display the contents on Dot Net Tricks!

How to get textboxes values in MVC4 created by jQuery

Posted By : Shailendra Chauhan, 19 Aug 2013
Updated On : 20 Aug 2013
Total Views : 161,534   
Support : MVC5, MVC4 & MVC3
 

Yesterday, I was trying to get the values of TextBoxes created by jQuery. I was expecting to get the value of each Textbox created by jQuery by the Id attribute of the TextBox, but I was getting NULL. I tried to find out the reason behind this reason and finally I got the solution. Let's understand the ID and Name attribute of Html controls.

  1. ID

    Id attribute of an input html control is responsible for uniquely identified a control on the html page. We use Id for getting an input html control's value using jQuery at client side or for applying some CSS to that control.

  2. Name

    Name attribute of an input html control is responsible for posting that control values on server side.

Hence, while creating a Html TextBox or Dropdown list using jQuery also defined the Id and Name attributes of an Html TextBox or Dropdown list.

Note

When you will not defined the Name attributes of an Html TextBox or Dropdown list then form will not post the TextBox or Dropdown list values to the server. It means at controller's action result you will not find the Html TextBox or Dropdown list.

Suppose, you need to select no of customers from drop down list as shown below fig.

Also, Textboxes for entering customers full name are created by jQuery as shown below.
When you will submit the form you will get the Textboxes created by jQuery at controller side as shown below -

The View

<script src="~/Scripts/jquery-1.8.2.js"></script>
<script>
 $(document).ready(function () {
 $("#ddl").change(function () {
 var i = $("#ddl :selected").val();
 var str = "";
 for (var j = 1; j <= i; j++) {
 var id = "txtCustomer" + j;
 //Remember to add name attribute to get values at server side
 str = str + "<span>Customer " + j + " Full Name: </span><input type='text' id='" + id + "' name='" + id + "'/><br/>";
 }
 $("#content").html(str);
 });
 });
</script>

<br />
@using (Html.BeginForm())
{ 
 <h2>Get TextBoxes Values Created by jQuery</h2>
 
 <span>Select No. of Customers </span>
 <select id="ddl" name="ddl">
 <option>Select</option>
 <option>1</option>
 <option>2</option>
 <option>3</option>
 <option>4</option>
 </select>
 <br />
 <div id="content">
 </div>
 <br />
 <div align="center">
 <input type="submit" id="btnSave" value="Save" />
 </div> 
}

You can get the Html TextBox or Dropdown list values created by jQuery by two method as given below -

Method 1: Get Values Using FormCollection

public ActionResult Index()
{
 return View();
}

[HttpPost]
public ActionResult Index(FormCollection form, string ddl)
{
 for (int i = 1; i <= Convert.ToInt32(ddl); i++)
 {
 string id = "txtCustomer" + i;
 string customer = form[id];
 }
 return View();
}

Method 2: Get Values Using Request.Form

public ActionResult Index()
{
 return View();
}

[HttpPost]
public ActionResult Index(string ddl)
{
 for (int i = 1; i <= Convert.ToInt32(ddl); i++)
 {
 string id = "txtCustomer" + i;
 string customer = Request.Form[id];
 }
 return View();
} 
What do you think?

I hope you will enjoy the tips while programming with MVC. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.

 
Recommended for you
 
About the Author
Shailendra Chauhan

Shailendra Chauhan is an Entrepreneur, Author, Architect, and Corporate Trainer. He has rewarded as Microsoft MVP for his exceptional contributions in Microsoft Visual Studio and Development Technologies.

With more than 7 years in hand experience Shailendra Chauhan is a polymath in the domains of Microsoft .NET technologies and an array of other technologies including JavaScript, AngularJS, Node.js, Ionic and NoSQL Databases to name but a few.

He is the author of some of most popular e-books which encompass technical Interview on Node.js Interview Questions and Answers , ASP.NET MVC Interview Questions and Answers , AngularJS Interview Questions and Answers and LINQ Interview Questions and Answers. Furthermore he is a technical reviewer for book on ASP.NET MVC 4 Mobile App Development. Know more...
 
Free Interview Books
 
28 AUG
NodeJS Development (offline)

Sat, Sun 11:00 AM-12:30 PM

More Details
8 AUG
ASP.NET MVC with AngularJS Development (online)

Monday 09:30 PM-11:00 PM IST

More Details
4 AUG
NodeJS Development (online)

Thursday 06:00 AM-7:30 AM IST

More Details
1 AUG
AngularJS Development (online)

Mon-Fri 08:00 PM-09:30 PM IST

More Details
1 AUG
ASP.NET MVC with AngularJS Development (online)

Mon-Fri (07:30 AM-09:00 AM IST)

More Details
24 JUL
AngularJS Development (offline)

Sat,Sun     (08:00 AM-09:30 AM)

24 JUL
ASP.NET MVC with AngularJS Development (offline)

Sat, Sun     (09:30 AM-11:00 AM)

28 MAY
ASP.NET MVC with AngularJS Development (offline)

Sat, Sun     (05:00 PM-07:00 PM IST)

30 APR
NodeJS Development (offline)

Sat, Sun     (11:00 AM-12:30 PM IST)

BROWSE BY CATEGORY
 
SUBSCRIBE TO LATEST NEWS
 
LIKE US ON FACEBOOK
 
+