Agregar contenido dinámico mediante jquery o javascript a partir de un botón

publicado por: Anonymous

estoy desarrollando un formulario y me gustaría replicar el contenido de la primera fila en la segunda, pero que esta se genere de forma dinámica mediante una función de javascript (onclick) o Jquery (click).
He leído que la forma correcta es guardar el código html en una variable como si se tratase de un string y luego ubicar mediante el uso del DOM el lugar donde se insertara el código utilizando la función append. Trate de hacerlo pero evidentemente no me ha funcionado y creo que se debe al uso de las comillas.

Adjunto a continuación el código que debería replicar y también para que se entienda mejor mi pregunta

_x000D_

_x000D_

<div class="row container-fluid">_x000D_
  <p class="text-muted" style="margin-left: 10px;">Datos Filiatorios</p>_x000D_
  <hr>_x000D_
  <div class="col-md-1 form-group">_x000D_
  </div>_x000D_
  <div class="col-md-3 form-group">_x000D_
    <div class="form-group">_x000D_
      <label for="textAseguradorMedico" class="control-label text-muted">Asegurador Medico</label>_x000D_
      <select id="textAseguradorMedico" name="textAseguradorMedico" class="form-control selectpicker input-sm" onchange="validacion('textAseguradorMedico')">_x000D_
        <option value="">Seleccionar...</option>_x000D_
        <option value="Particular" <?php if ($paciente->getObraSocial() == 'Particular') {echo 'selected';} ?>>Particular</option>_x000D_
        <option value="Prepaga" <?php if ($paciente->getObraSocial() == 'Prepaga') {echo 'selected';} ?>>Prepaga</option>_x000D_
        <option value="Obra social sindical" <?php if ($paciente->getObraSocial() == 'Obra social sindical') {echo 'selected';} ?>>Obra social sindical</option>_x000D_
        <option value="Obra social para la atencion de monotributistas" <?php if ($paciente->getObraSocial() == 'Obra social para la atención de monotributistas') {echo 'selected';} ?>>Obra social para la atención de monotributistas</option>_x000D_
      </select>_x000D_
    </div>_x000D_
  </div>_x000D_
  <div class="col-md-3 form-group">_x000D_
    <label for="textNombreObraSocial" class="control-label text-muted">Nombre</label>_x000D_
    <select id="textNombreObraSocial" name="textNombreObraSocial" class="form-control selectpicker input-sm" onchange="" value="">_x000D_
    </select>_x000D_
  </div>_x000D_
  <div class="col-md-2 form-group">_x000D_
    <label for="textPlanObraSocial" class="control-label text-muted">Plan Obra social</label>_x000D_
    <input type="text" id="textPlanObraSocial" class="form-control input-sm" name="textPlanObraSocial" onkeyup="" value="" maxlength="60" placeholder="Plan de obra social.">_x000D_
    <span class="help-block"></span>_x000D_
  </div>_x000D_
  <div class="col-md-2 form-group">_x000D_
    <label for="textFechaVencimiento" class="control-label text-muted">Fecha Vencimiento</label>_x000D_
    <input type="date" id="textFechaVencimiento" class="form-control input-sm" name="textFechaVencimiento" data-date-format="MMMM YYYY" value="" onkeyup="" value="" min="" max="" maxlength="4">_x000D_
    <span class="help-block"></span>_x000D_
  </div>_x000D_
  <div class="col-md-1 form-group">_x000D_
    <label for="textFechaVencimiento" class="control-label text-muted">Agregar</label>_x000D_
    <div>_x000D_
      <button class="btn btn-primary btn-sm" onclick="addObraSocial()"><span class="glyphicon glyphicon-adjust"></span></button>_x000D_
    </div>_x000D_
  </div>_x000D_
</div>

_x000D_

_x000D_

_x000D_

La función de javaScript que estoy utilizando para agregar dicho contenido seria (obviamente me gustaria agregar todo el código)

function addObraSocial(){
var html = '<div class="col-md-1 form-group"></div>';
$('#segundaObraSocial').append(html);

}

Muchas gracias.

solución

Me sigue sin quedar claro si necesitas replicar los valores que contienen los input y los select en el momento de dar al botón. Así que asumiré que lo que necesitas es una estructura HTML limpia en la que el usuario pueda “escribir”.

Existen varias maneras para hacer esto, te voy a dar una de ellas, que además considero que es de las más simples:

_x000D_

_x000D_

$('button').click(function() {_x000D_
  var contador = $('.obra-social').length + 1;_x000D_
	var bloque = '<div id="obra-social-' + contador + '" class="obra-social"><p>Contenido obra social</p</div>';_x000D_
  $('#contenedor').append(bloque);_x000D_
});

_x000D_

body {_x000D_
  background: #20262E;_x000D_
  padding: 20px;_x000D_
  font-family: Helvetica;_x000D_
  text-align: center;_x000D_
}_x000D_
_x000D_
.obra-social {_x000D_
  background: #fff;_x000D_
  border-radius: 4px;_x000D_
  padding: 20px;_x000D_
  font-size: 25px;_x000D_
  text-align: center;_x000D_
  transition: all 0.2s;_x000D_
  margin: 0 auto;_x000D_
  width: 300px;_x000D_
  margin-bottom: 20px;_x000D_
}_x000D_
_x000D_
button {_x000D_
  background: #0084ff;_x000D_
  border: none;_x000D_
  border-radius: 5px;_x000D_
  padding: 8px 14px;_x000D_
  font-size: 15px;_x000D_
  color: #fff;_x000D_
}

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<div class="row">_x000D_
  <div id="contenedor">_x000D_
    <div id="obra-social-1" class="obra-social">_x000D_
      <p>Contenido obra social</p>_x000D_
    </div>_x000D_
  </div>_x000D_
</div>_x000D_
<div class="row">_x000D_
  <button>_x000D_
    Añade obra social_x000D_
  </button>_x000D_
</div>

_x000D_

_x000D_

_x000D_

Lo que se suele hacer es tener almacenado en una variable un string con la estructura HTML a replicar para insertarla cómodamente donde desees. Una función útil para insertar contenido dinamicamente es, efectivamente, append(), de Jquery. Esta función inserta al final del selector que le indiques el contenido que le pases, en este caso tu estructura HTML creada con anterioridad.

Esto tiene un problema, ya que a la hora de manejar IDs, las estarías duplicando por cada vez que llamases a la función con el click. Para solucionar esto también tendrías que generar IDs, dinámicas.

Yo suelo contar el número de elementos de ese tipo que existen en el momento de hacer el click, y usar ese número para generar mis IDs.

En el código que te adjunto también te muestro un ejemplo de ello.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *