Real Time Example add dynamic fields using jquery looking Treeview

I have Implemented add Dynamic Fields Using jquery

Look at code :

  2. <html>
  3. <head>
  4. <title>Dynamically add input field using jquery</title>
  5. <style>
  6. .container1 input[type=text] {
  7. padding:5px 0px;
  8. margin:5px 5px 5px 0px;
  9. }


  12. .add_form_field
  13. {
  14.     background-color: #1c97f3;
  15.     border: none;
  16.     color: white;
  17.     padding: 8px 32px;
  18.     text-align: center;
  19.     text-decoration: none;
  20.     display: inline-block;
  21.     font-size: 16px;
  22.     margin: 4px 2px;
  23.     cursor: pointer;
  24. border:1px solid #186dad;

  26. }

  28. input{
  29.     border: 1px solid #1c97f3;
  30.     width: 260px;
  31.     height: 40px;
  32. margin-bottom:14px;
  33. }

  35. .delete{
  36.     background-color: #fd1200;
  37.     border: none;
  38.     color: white;
  39.     padding: 5px 15px;
  40.     text-align: center;
  41.     text-decoration: none;
  42.     display: inline-block;
  43.     font-size: 14px;
  44.     margin: 4px 2px;
  45.     cursor: pointer;

  47. }
  48. </style>
  49. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  50. <script>
  51. $(document).ready(function() {
  52.     var max_fields      = 20;
  53.     var wrapper         = $(".container1"); 
  54.     var add_button      = $(".add_form_field"); 
  55.     
  56.     var x = 0; 
  57.     $(add_button).click(function(e){ 
  58.         e.preventDefault();
  59.         if(x < max_fields){ 
  60.             x++; 
  62.             $(wrapper).append('<li><a href="#" style="margin-left: 10px;" class="w3-button"><span class="glyphicon glyphicon-triangle-right" name="mytext[]"></span>Chapter '+ x+'</a></li>'); //add input box
  63.         }
  64. else
  65. {
  66. alert('You Reached the limits')
  67. }
  68.     });
  69.     
  70.     $(wrapper).on("click",".delete", function(e){ 
  71.         e.preventDefault(); $(this).parent('div').remove(); x--;
  72.     })
  73. });
  74. </script>
  75. </head>
  76. <body>
  77. <div class="container1">
  78.     <button class="add_form_field">Add New Chapters  &nbsp; <span style="font-size:16px; font-weight:bold;">+ </span></button>
  79.     
  80. </div>
  81. </body>
  82. </html>
    83.  

Comments

Post a Comment

Popular posts from this blog

CREATING INTERNET APPLICATION PROJECT & MVC USING DATA BASE FIRST APPROACH

In this we are going to see about how to create a project in visual studio and the concept of mvc. Here in this demo we are creating internet application base project. Step 1: Open the Microsoft Visual Studio. Go to File in that go to new and select Project. In new project select Visual C# , In that  select ASP.NET MVC 4 Web Application. After selecting the project type give the name of the project and the desired location where you want to save your project and press ok. In my case I am giving my project name as my first project. After pressing ok a page will appear for selecting template to which we want to run our project. Here we are selecting our template as Internet Application. Internet Application is a account controller that uses forms and authentication. Our view engine will be Razor. After pressing ok project is generated. Now let us see about MVC (MODEL VIEW CONTROLLER). Model : It should be responsible for the data of a...
Read more

How to create DATA BASE And Tables in MSSQL Server

Step 1.  Press Windows Button in that search for SSMS, Image will appear like this                           click on this image Microsoft SQL Server Management Studio window will open. Step  2.  Enter Server name if it’s not available as default, else connect to default server  by pressing  connect in login window. Step  3. After perfectly login a window will open in that a sub window by name Object Explorer will be there. Step 4. In Object Explorer  right click  on the Data Base in that press new Data Base. Step  5.  Type any name in Database name bar. As I have created a new database as tested which will be explore in Databases in Object Explorer. Step 6. Explore the database which you have created as I have created database by name tested I am exploring my database in that go to tables. Step 7. Rig...
Read more

Data Type Conversions in C# with real time example

In This Post We Will Learn   Data Type Conversions 1.   Implicit Conversions 2.   Explicit  Conversions 3.   Different between Parse() and TryParse() Implicit Conversion is done by the compiler  1.  When there is no loss of  information if the conversion is done  2.  if there is no possibility of throwing  exception during the conversion  Example :  Converting an int to a float will not loose any data and no Exception will be thrown, hence an implicit conversion can be done. using System; namespace Datatypes_conversion {     class Program     {         static void Main(string[] args)         {            // Implicit Convertion Real Time Example              int r = 100;             float m = r;    ...
Read more

Nullable Type In C# with Example

IN THIS  POST WE WILL LEARN    1. NULLABLE TYPE IN C#    2. NULL COALESCING  OPERATOR   ??   Type in C# In C# types are divided into 2 broad Categories Reference Types :  Interface , Class , Delegates , Arrays E.t.c Value Types        : Int , Float , Double , Structs ,Enums E.t.c By Default value types are non nullable. To make then nullable Use   ? int r= 0 (r is non nullable, so r cannot be set null , r= null will generate Error ) int? m =0 (m is nullable int , so m=null is legal) Example :  Nullable Type  In C# using System; namespace NullableTypeInCshape {     class Program     {         static void Main(string[] args)         {             bool? AreYouvirgin = true;             if (AreYouvirgin ==true)         ...
Read more

Basic -C# Reading and writing to a console

     * Reading From the Console      * Writing to the Console      * Two Ways To Write Console            1)  Concatenation             2)  Place Holder Syntax Reading and Writing to Console  using System; //  A Namespace is used to Organize your code and is Collection of Classes     class Program     {         static void Main()  // Main Methods          {             // Prompt The User For His First Name              Console.WriteLine("Enter First Name");             // Read the name from Console              string firstname = Console.ReadLine();             // Prompt the User For His Last Name   ...
Read more