This is a migrated thread and some comments may be shown as answers.
Add a textbox by clickink a button
1 Answer 15 Views
This is a migrated thread and some comments may be shown as answers.
anna caroline silva dos
Top achievements
Rank 1
anna caroline silva dos asked on 04 Nov 2020, 08:58 PM

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>

1 Answer, 1 is accepted

Sort by
0
Stoyan
Telerik team
answered on 05 Nov 2020, 12:02 PM

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/.

Asked by
anna caroline silva dos
Top achievements
Rank 1
Answers by
Stoyan
Telerik team
Share this question
or