aspx Tutorial

NET Articles,jQuery demo, asp.net with jQuery, online tutorial,Jquery, SilverLight, Javascript, asp.net,JSON, MVC,.NET Articles,demo, Web Services,
Advertise Here

Toolbar

Get our toolbar!

Advertize



Posted by Aamir Hasan   on Tuesday, November 22, 2011 Total Views:  

In my previous example, I have demonstrate how to dynamically creating input textboxes with jQuery in asp.net. Now, In this example I will tell you how to retrieve dynamic input text boxes value with jQuery in asp.net. I have used serializeArray to encode the form elements as an array of names and values. In the below code, serialize the input type textboxes and pass to each loop to iterate and get name and value of each textbox.

Here’s an example

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Dynamic textbox.aspx.cs"

    Inherits="Dynamic_textbox" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <style>

        html, body

        {

            font-family: "Helvetica Neue" , Arial, Helvetica;

            font-size: 12px;

        }

        b

        {

            padding: 0 2px 0 10px;

        }

        label

        {

            padding: 2px 10px;

        }

        input

        {

            border: 1px solid #eaeaea;

            background-color: #fcfcfc;

            padding: 4px 5px;

        }

        input:focus

        {

            background-color: #fceeaa;

        }

    </style>

    <script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            var dyDiv = $("#dyntb");

            for (var i = 0; i < 10; i++) {

                dyDiv.append("<p>Textbox " + i + "<label><input type='text' name='tbbox[]' value='textbox " + i + "'<label></p>");

            }

            $("#Button1").click(function () {

                var txt = "";

                $.each($('input[name^=tbbox]').serializeArray(), function (i, tbbox) {

                    txt += "<p>" + i + ')  <b>Name:</b> ' + tbbox.value + '  <b>value:</b>  ' + tbbox.value + "</p>";

                });

                $("#msg").html(txt);

            });

        });

    </script>

</head>

<body>

<h1></h1>

    <form id="form1" runat="server">

    <div id="dyntb">

    </div>

    <div id="msg">

    </div>

    <input id="Button1" type="button" value="Submit" />

    </form>

 </body>

</html>

Output

Download

Dynamic_textbox_jquery.zip (1.27 kb)

See live demo

Tags: ,
Category: All | asp.net | jQuery
Protected by Copyscape Online Plagiarism Tool

Comments (2) -

Chad Gabaree
Chad Gabaree United States
7/13/2015 7:42:31 AM #

I couldn't refrain from commenting. Perfectly written!|

BROCKSTAR BY BRIAN NELSON WILLIS
BROCKSTAR BY BRIAN NELSON WILLIS United States
3/25/2017 12:21:25 AM #

www.ripoffreport.com/.../square-trade-ebay-houston-mo-214940 |#Complaint Review: Square Trade, Ebay, Houston Motor Cars#|

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

Advertizement 1
Advertizement 2
Advertizement 3
Advertizement 4
Advertizement 5