Question

0

170

Vistas

How can I get multiple input for optional phone number dynamically (DOM)?

Here is my code. I want to add more phone number as optional phone. How can I do it dinamically?

          <div class="col-12 row border my-2 py-2">
                <div class="col-6 form-group">
                    <label class="control-label " for="official_phone"><h5 class="h6">Phone (Official) *</h5></label>
                    <input class="form-control" type="text" name="official_phone" placeholder="Input Phone Number.." required/>
                </div>
                <div class="col-6 form-group">
                    <label class="control-label " for="optional_phone"><h5 class="h6">Phone (Others) </h5></label>
                    <input class="form-control" type="text" name="optional_phone" placeholder="Input Phone Number.."/>
                </div>
                
            </div>

7 months ago · Juan Pablo Isaza

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-07-04T08:36:42.653Z

Just make a button that triggers the input div into the parent form.

let count = 1;
function addphone(){
    const parent = document.getElementById("phone-list");
    let el = document.createElement("div");
    el.setAttribute("class","col-6 form-group");
    el.innerHTML = `<label class="control-label " for="optional_phone_${count}"><h5 class="h6">Phone (Optional) *</h5></label><input class="form-control" type="text" name="optional_phone_${count}" placeholder="Input Phone Number.." required/>`;
    parent.appendChild(el);
  count++;
}

<html>
  <head></head>
<body>
  <div class="col-12 row border my-2 py-2">
    <div id="phone-list">
      <div class="col-6 form-group">
        <label class="control-label " for="official_phone"><h5 class="h6">Phone (Official) *</h5></label>
        <input class="form-control" type="text" name="official_phone" placeholder="Input Phone Number.." required/>
      </div>
      <div class="col-6 form-group">
        <label class="control-label " for="optional_phone"><h5 class="h6">Phone (Others)</h5></label>
        <input class="form-control" type="text" name="optional_phone" placeholder="Input Phone Number.."/>
      </div>
    </div>
    <button type="button" onclick="addphone()">Add Phone</button>
  </div>
</body>
</html>