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 2020 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
    31 posts

    Posted 05 Nov 2020 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