# Dynamically add new input field

**URL:** <https://forum.ionicframework.com/t/dynamically-add-new-input-field/136856>\
**Category:** ionic-v3\
**Created:** [July 31, 2018, 10:49am UTC](https://forum.ionicframework.com/t/dynamically-add-new-input-field/136856 "2018-07-31T10:49:26Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![uddyvky](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/uddyvky/32/121897_2.png) [@uddyvky](https://forum.ionicframework.com/u/uddyvky)\
**Post date:** [July 31, 2018, 10:49am UTC](https://forum.ionicframework.com/t/dynamically-add-new-input-field/136856/1 "2018-07-31T10:49:26Z")

</div>

Hey, guys, I was thinking about adding input field with a plus button click on form i.e user presses the ‘+’ button and an input field appears (the user can have any no. of input fields).  
Can anyone please suggest me how to do it??

---

<div class="post-metadata">

**Author:** ![Rupnesh](https://avatars.discourse-cdn.com/v4/letter/r/a88e4f/32.png) [@Rupnesh](https://forum.ionicframework.com/u/Rupnesh)\
**Post date:** [July 31, 2018, 11:28am UTC](https://forum.ionicframework.com/t/dynamically-add-new-input-field/136856/2 "2018-07-31T11:28:37Z")

</div>

refer this forum link…[How to add text field dynamically](https://forum.ionicframework.com/t/how-to-add-text-field-dynamically/128836/2)

---

<div class="post-metadata">

**Author:** ![uddyvky](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/uddyvky/32/121897_2.png) [@uddyvky](https://forum.ionicframework.com/u/uddyvky)\
**Post date:** [August 1, 2018, 7:15am UTC](https://forum.ionicframework.com/t/dynamically-add-new-input-field/136856/3 "2018-08-01T07:15:17Z")

</div>

Thanks Rupnesh, it did work but can you explain how can i send the input value of those forms to the backend??  
Like if someone created 3 more input forms using the add button how can I catch and send those values to backend??

---

<div class="post-metadata">

**Author:** ![Rupnesh](https://avatars.discourse-cdn.com/v4/letter/r/a88e4f/32.png) [@Rupnesh](https://forum.ionicframework.com/u/Rupnesh)\
**Post date:** [August 1, 2018, 7:39am UTC](https://forum.ionicframework.com/t/dynamically-add-new-input-field/136856/4 "2018-08-01T07:39:32Z")

</div>

```auto
submitData() {
  let doc_name_txtvalues:any=[];
  let doc_add_txtvalues:any=[];
  let doc_cont_txtvalues:any=[];

  for(let i=0; i<=this. MySelect1.length;i++) {
    doc_name_txtvalues.push(this.doc_name[i]);
    doc_add_txtvalues.push(this.doc_add[i]);
    doc_cont_txtvalues.push(this.doc_cont[i]);
  }
  //pass the doc_name_txtvalues,doc_add_txtvalues,doc_cont_txtvalues to api.

  //or--------------------------------
  let dataarray:any=[];
  for(let i=0; i<=this. MySelect1.length;i++) {
   dataarray.push({"name":this.doc_name[i],"add":this.doc_add[i],"cont":this.doc_cont[i]});
  }
  //pass the dataarray to api.
  
}

```

---

<div class="post-metadata">

**Author:** ![uddyvky](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/uddyvky/32/121897_2.png) [@uddyvky](https://forum.ionicframework.com/u/uddyvky)\
**Post date:** [August 10, 2018, 6:20am UTC](https://forum.ionicframework.com/t/dynamically-add-new-input-field/136856/5 "2018-08-10T06:20:00Z")

</div>

Will it work with pdfmake??  
As i want the values to be printed on a pdf file.

---

<div class="post-metadata">

**Author:** ![venkatap](https://avatars.discourse-cdn.com/v4/letter/v/5f9b8f/32.png) [@venkatap](https://forum.ionicframework.com/u/venkatap)\
**Post date:** [March 18, 2020, 5:08pm UTC](https://forum.ionicframework.com/t/dynamically-add-new-input-field/136856/6 "2020-03-18T17:08:48Z")

</div>

Hello this post was very helpful to me. if any one can help me on , once i add multiple items , i would like to generate a pdf file is it possible. please if any one can help me out i would be very thankful

---

<div class="post-metadata">

**Author:** ![uddyvky](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/uddyvky/32/121897_2.png) [@uddyvky](https://forum.ionicframework.com/u/uddyvky)\
**Post date:** [March 19, 2020, 1:45am UTC](https://forum.ionicframework.com/t/dynamically-add-new-input-field/136856/7 "2020-03-19T01:45:27Z")

</div>

Yes it is possible to generate a pdf file by using ionic plugins.

---

<div class="post-metadata">

**Author:** ![venkatap](https://avatars.discourse-cdn.com/v4/letter/v/5f9b8f/32.png) [@venkatap](https://forum.ionicframework.com/u/venkatap)\
**Post date:** [March 26, 2020, 11:18am UTC](https://forum.ionicframework.com/t/dynamically-add-new-input-field/136856/8 "2020-03-26T11:18:19Z")

</div>

If any link or any code is available pls send me the link or code. thanks

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 9:01pm UTC](https://forum.ionicframework.com/t/dynamically-add-new-input-field/136856/9 "2021-07-19T21:01:22Z")

</div>

Closed on July 19, 2021, 9:01pm UTC