Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Calculadora

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

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>

7 months ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos