How to get textboxes values in MVC4 created by jQuery

How to get textboxes values in MVC4 created by jQuery

01 Apr 2024
Intermediate
202K Views
5 min read

MVC4 Using JQuery: An Overview

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. So In this MVC Tutorial, we will explore How to get textbox values in MVC4 created by jQuery.Consider our ASP.NET MVC Course for a better understanding of all MVC core concepts.

Post textbox values to the controller in mvc4 created by jQuery.

Let's understand the ID and Name attributes of HTML controls.

  1. ID

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

  2. Name

    The name attribute of an input html control is responsible for posting the control values on the server side.

Hence, while creating an HTML textbox or Dropdown list using jQuery also defined the ID and Name attributes of an HTML textbox or Dropdown list.

Note

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

Suppose, you need to select the customers from the drop-down list as shown below in Fig.

Also, Textboxes for entering customers' full names are created by jQuery as shown below.
When you submit the form you will get the Textboxes created by jQuery at the 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 methods 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();
} 

How to get HTML textbox values in the controller created on runtime

To get HTML textbox values in a controller created at runtime, we need to use a server-side scripting language such as PHP, or Python with a different kind of web framework such as Flask or Django, Ruby on Rails, etc., depending on the technology stack.

Conclusion
So in this article, we have learned how to get textbox values in MVC4 created by jQuery. I hope you enjoyed learning these concepts while programming with Asp.Net. Feel free to ask any questions from your side. Your valuable feedback or comments about this article are always welcome. Level up your career in MVC with our ASP.Net Core Certification.

FAQs

Q1. How to get the value of TextBox using jQuery?

Using the val() method.jQuery val() method is used to get the value of an input text box. This function is used to set or return the value. Return value gives the value attribute of the first element. 

Q2. How to show value in input box using jQuery?

Select the text box element using jQuery selectors. Call the val() method on the selected element to retrieve its value.

Q3. How to check if text input has value in jQuery?

jQuery check if <input> exists and has a value. if($(selector). val()) should work. If the element doesn't exist it will return 'undefined' and if it does but has no length it will return "" (which evaluates as a false)
Share Article

Live Classes Schedule

Our learn-by-building-project method enables you to build practical/coding experience that sticks. 95% of our learners say they have confidence and remember more when they learn by building real world projects.
ASP.NET Core Certification Training May 26 SAT, SUN
Filling Fast
08:30PM to 10:30PM (IST)
Get Details
Advanced Full-Stack .NET Developer Certification Training May 26 SAT, SUN
Filling Fast
08:30PM to 10:30PM (IST)
Get Details
ASP.NET Core Certification Training Jun 14 MON, WED, FRI
Filling Fast
07:00AM to 08:30AM (IST)
Get Details
ASP.NET Core (Project) Jun 22 SAT, SUN
Filling Fast
08:30PM to 10:30PM (IST)
Get Details

Can't find convenient schedule? Let us know

About Author
Shailendra Chauhan (Microsoft MVP, Founder & CEO at Scholarhat by DotNetTricks)

Shailendra Chauhan is the Founder and CEO at ScholarHat by DotNetTricks which is a brand when it comes to e-Learning. He provides training and consultation over an array of technologies like Cloud, .NET, Angular, React, Node, Microservices, Containers and Mobile Apps development. He has been awarded Microsoft MVP 8th time in a row (2016-2023). He has changed many lives with his writings and unique training programs. He has a number of most sought-after books to his name which has helped job aspirants in cracking tough interviews with ease.
Accept cookies & close this