[Vuejs]-How to add input field on click more than once

by

0👍

Using document.createElement, you can create new input HTMLElement and using container.appendChild function, you can add that new element to the div selector as follows.

function createNewInputFields() {
  var container = document.getElementById('new-input-container');
  
  const newElem = document.createElement("input");
  newElem.setAttribute("type", "text");
  container.appendChild(newElem);
}
<div id="new-input-container"> </div>
<button onclick="createNewInputFields()">Add New</button>

0👍

Depending on your logic, you can try one of these solutions :

First logic : Create inputs by a number

<template>
  <div id="app">
    <input type="text" v-for="i in numberOfInputs" :key="i" />
    <br />
    <button @click="addInput">Add input</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data: () => ({
    numberOfInputs: 0,
  }),
  methods: {
    addInput: function () {
      this.numberOfInputs++;
    },
  },
};
</script>

Second logic: Create inputs by values

<template>
  <div id="app">
    <input
      type="text"
      v-for="(value, i) in values"
      :key="i"
      v-model="values[i]"
    />
    <br />
    <button @click="addInput">Add input</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data: () => ({
    values: [],
  }),
  methods: {
    addInput: function () {
      let value = "";
      this.values.push(value);
    },
  },
};
</script>

0👍

I just fixed the bugs in your code.

To add a new item, you must use +=.
If you use only = the first time you will add an item.
But with each subsequent click, the item will be rewritten

The problem with this option is that when you add new fields, the content of the already created ones will be removed!

function createNewInputFields() {
    var container = document.getElementById('new-input-container')
    container.innerHTML += "<input type='text'/>";
}
<div id="new-input-container"> </div>
<p class="add-new-shareholders-p"><i class="fa fa-plus-circle fa-lg" onclick="createNewInputFields()">Click Me</i></p>

The correct way to add a new field while keeping the idea of your code and saving information in already created fields is:

function createNewInputFields() {
    var container = document.getElementById('new-input-container');
    var x = document.createElement("input");
    x.setAttribute('type', 'text');
    container.appendChild(x);
}
<div id="new-input-container"> </div>
<p class="add-new-shareholders-p"><i class="fa fa-plus-circle fa-lg" onclick="createNewInputFields()">Click Me</i></p>

0👍

Your function will work fine, the only change that you need to make is, instead of setting value using innerHTML property, you can use the insertAdjacentHTML( ) function.

The reason your code only adds the input field once is because what innerHTML is doing here is just overwrite existing HTML each time you set a value using the assignment operator (=). That is because, innerHTML property just gets the innerHTML from the element like it is a string. One option is to concatinate the new input html to the existing innerHTML, the other is to use insertAdjacentHTML( ) function.

insertAdjacentHTML( ) will add adjacent html each time, takes in 2 parameters, first one is the place you want to insert which can be which can be one of (‘beforebegin’ ‘beforeend’ ‘afterbegin’ ‘afterend’), in your case the best would be ‘beforeend’. The second parameter is the HTML you want to add.

document.querySelector('.btn').addEventListener('click', createNewInputFields);

function createNewInputFields() {
  const container = document.getElementById('new-input-container');
  const inputHtml =  "<input type='text'/>";
  container.insertAdjacentHTML('beforeend', inputHtml);
}
        <div id="new-input-container"></div>
        <p class="add-new-shareholders-p">
        <button class='btn'> create field</button>
        </p>

Leave a comment