Add a textbox by clickink a button

2 posts, 0 answers
  1. anna caroline silva dos
    anna caroline silva dos avatar
    1 posts
    Member since:
    Oct 2020

    Posted 04 Nov Link to this post

    Hello, 

     

    Is it possible to add a textbox dinamically, by clicking a button?

    I have the following code, and I need to add a textbox, just like the one I already have when click the "Add Button"

     

    01.<!DOCTYPE html>
    02.<html>
    03.<head>
    04.    <meta charset="utf-8"/>
    05.    <title>Kendo UI Snippet</title>
    06. 
    08. 
    09.    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    12.</head>
    13.<body>
    14.   
    15.    <div>
    16.      <input id="textbox" style="width: 100%;" />
    17.      <input type="button" id="add" value="Add TextBox" class="k-button"/>
    18.    </div>
    19.    <script>             
    20.                $(document).ready(function () {
    21.           $("#textbox").kendoTextBox({
    22.               placeholder: "email@email.com.br",
    23.                label: {
    24.                    content: "Email",
    25.                    floating: true
    26.                }
    27.             });
    28.          })
    29.    </script>
    30.</body>
    31.</html>

  2. Stoyan
    Admin
    Stoyan avatar
    10 posts

    Posted 05 Nov Link to this post

    Hi, Anna,

    thank you for sharing your code.

    What you are looking for can be done with a jQuery event:

    1. add a click event listener to the button
    2. manipulate the DOM to create and add a new input field to the HTML body with every click.
    3. initialize the kendo TextBox widget like you have done 

    Note that you must append the input to the body

     $("body").append(textbox);
     before you initialize the Text Box
    $(textbox).kendoTextBox();

    or it will initialize incorrectly. Here is an example: https://dojo.telerik.com/@Stoyan/ItAMiyAW

    If you are interested I recommend this tutorial on jQuery events.

    I hope to have cleared up the topic. Please don't hesitate to reach out if you have any additional Kendo UI inquiries.

    Regards,
    Stoyan
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Back to Top