Skip to main content
2 de 3
se añadieron 266 caracteres en el cuerpo; título editado
OrielC.
  • 120
  • 1
  • 11

Crear múltiples tarjetas con contenidos diferentes del menú select [SOLUCIONADO]

Hola espero me puedan ayudar. Necesito que al seleccionar en el menu select "numero 1" ó "numero 2".

Que pase a las cartas y así agregar múltiples cartas con contenido del "option" diferentes "numero 1" ó "numero 2"

YA ESTA MODIFICADO CON LA SOLUCIÓN A MI PREGUNTA

var card = [

];

(function newcards(card) {

  this.init = function() {
    this.generateList();
    this.enterUser();
  };

  this.generateList = function() {

    var parent = document.querySelector(".contenido");
    var template = '';

    for (var i = 0; i < card.length; i++) {

      template += '<div class="col-sm-4">';
      template += '<div class="card animated bounceInRight">';
      template += '<div class="card-delete" data-card="' + i + '">x</div>';
      template += '<div class="card-block">';
      template += '<h3 class="card-title">' + card[i].name + '</h3>';
      template += '<h3 class="card-title">' + card[i].select + '</h3>';
      template += '</div>';
      template += '</div>';
      template += '</div>';
    }
    parent.innerHTML = '';
    parent.insertAdjacentHTML('afterbegin', template);
    deleteCard();
  };
  this.enterUser = function() {
    function grabUser() {
      var name = document.querySelector('#user_name').value,
        select = document.querySelector('#user_name').value;



      // Referencia al Select
      let elOpt = document.getElementById('opciones');
      // Obtenemos el texto de la opción seleccionada
      selectedText = elOpt.options[elOpt.selectedIndex].text;
      // Obteneros el valor de la opción seleccionada
      selectedValue = elOpt.options[elOpt.selectedIndex].value;



      var elements = [name];
      if (validateUser(elements)) {
        document.querySelector('#myForm').reset();



        card.push({
          select: selectedText,
          name: name
        });



        generateList();
      } else {
        document.querySelector('#error').style.display = 'block';
        setTimeout(function() {
          document.querySelector('#error').style.display = 'none';
        }, 2000);
      }
    }
    document.querySelector('#myForm').addEventListener('submit', function(e) {
      e.preventDefault();
      grabUser();
    });
  };
  this.validateUser = function(inputs) {
    for (var i = 0; i < inputs.length; i++) {
      if (inputs[i] == '') {
        return false
      }
    }
    return true;
  };
  this.deleteCard = function() {
    var buttons = document.querySelectorAll(".card-delete");

    function deleteThis(element) {
      var obj = parseInt(element.getAttribute('data-card'));
      card.splice(obj, 1);
      generateList();
    }
    for (var i = 0; i < buttons.length; i++) {
      buttons[i].addEventListener('click', function(e) {
        deleteThis(this);
      })
    };
  };
  this.init();
})(card);
.card {
  width: 300px;
  height: 300px;
  transition: transform 0.5s;
  transform-style: preserve-3d;
  cursor: pointer;
  position: relative;
  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.card-block {
  margin: 1em;
}

.card-text {
  color: #00BCD4;
  margin-bottom: 0px;
}

#error {
  display: none;
}

.card-delete {
  position: absolute;
  right: 10px;
  top: 6px;
  line-height: 9px;
  padding: 5px 5px;
  font-size: 17px;
  color: #F44336;
  cursor: pointer;
}
<script src="//code.jquery.com/jquery-3.0.0.min.js"></script>
<div class="row">
  <div class="form-container">
    <form id="myForm">
      <div class="form-group">
        <input type="text" class="form-control" id="user_name" placeholder="Escribe lo que sea">
      </div>

      <select id="opciones">
        <option>Numero 1</option>
        <option>Numero 2</option>
        <option>Numero 3</option>
        <option>Numero 4</option>
      </select>

      <input type="submit" id="boton" class="btn btn-block btn-primary" value="Agregar Carta">
      <p class="text-danger" id="error">Completa Los Campos</p>
    </form>
  </div>
  <div class="content-container">
    <div class="row contenido">
    </div>
  </div>
</div>

OrielC.
  • 120
  • 1
  • 11