5

Mi duda es si es posible crear una plantilla que cuando la seleccione el usuario en el option value de un formulario le salga una plantilla automática según la opción que elija, por ejemplo que cuando un usuario seleccione la opción pedido en el option value del formulario salga la plantilla con los productos que hay por ejemplo.

Estoy buscando pero no encuentro nada al respecto. Sólo se añadir texto al textarea pero eso no me resuelve nada porque no tiene formato ni se como poner estilos dentro de un textarea. Tengo el formulario hecho lo adjunto para ver si hay solución al respecto.

  function myFunction(){
    //Cojo el id del select llamado Texto
    var lista = document.getElementById("texto");
    //Cojo la lista de opciones que hay dentro del select
    var indiceSeleccionado = lista.selectedIndex;
    if (indiceSeleccionado == 0) {
      //Esto coje todos los atributos dentro de los Options
      var sugerencia = document.getElementById("sugerencia");
      var pedido = document.getElementById("pedido");
      //Este coje el atributo dentro del div productos el cual tiene una lista de los productos
      var productos = document.getElementById("productos");
      alert("Selecciona una opcion");
      //Este atributo oculta todo los elementos al seleccionar la Opcion 0 dentro del select
      sugerencia.style.display = 'none';
      pedido.style.display = 'none';
      productos.style.display = 'none';
      

    }
    if (indiceSeleccionado == 1) {
      var sugerencia = document.getElementById("sugerencia");
      var pedido = document.getElementById("pedido");
      //Mostrar elemento
      sugerencia.style.display = 'block';
      var textarea_sugerencia = sugerencia.text;
      var valor_sugerencia = sugerencia.value;
      //Ocultar elemento
      pedido.style.display = 'none';
      var textarea_pedido = pedido.text;
      var valor_productos = pedido.value;
    }
    if (indiceSeleccionado == 2) {
      var sugerencia = document.getElementById("sugerencia");
      var pedido = document.getElementById("pedido");
      var productos = document.getElementById("productos");
      //Ocultar elemento
      sugerencia.style.display = 'none';
      //Mostrar elemento
      pedido.style.display = 'block';
      productos.style.display = "block";
      var introducir_productos = productos.text;
      var textarea_pedido = textarea_pedido.text;
      var valor_pedido = textarea_pedido.value;
    }
    else{
      
    }
}
 
<html lang="en">
  <head>
    <title>Prueba Formulario</title>

    <!-- Theme Style -->
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
<form action="send_email.php" method="post"><a target="_blank">
  <div class="row">
    <div class="col-md-12 form-group">
      <label for="name">Nombre</label>
      <input type="text" name="name" id="name" class="form-control ">
    </div>
    <div class="col-md-12 form-group">
      <label for="lastname">Apellidos</label>
      <input type="text" name="lastname" id="lastname" class="form-control ">
    </div>
    <div class="col-md-12 form-group">
      <label for="phone">Telefono de contacto</label>
      <input type="text" name="phone" id="phone" class="form-control ">
    </div>
    <div class="col-md-12 form-group">
      <label for="email">Correo electronico</label>
      <input type="email" name="email" id="email" class="form-control ">
    </div>
  </div>
  <div class="row">
    <div class="col-md-12 form-group">
      <label for="message">Escriba su mensaje</label>
      <select name ="plantillas" input type="text" name="texto" id="texto" class="form-control ">
        <option selected value="0" onclick="myFunction()"> Elige una opción </option>
        <optgroup label="Sugerencia:"> </optgroup>
        <option value="1" onclick="myFunction()">Sugerencia</option>
        <optgroup label="Pedido:"></optgroup>
        <option value="2" onclick="myFunction()">Pedido</option>
      </select><br>
      <textarea name="textarea" value ="plantillas" name="message" id="sugerencia" class="form-control " cols="30" rows="8" placeholder="Comparte tu sugerencias" hidden></textarea>
      <textarea name="textarea" value ="plantillas" name="message" id="pedido" class="form-control " cols="30" rows="8" placeholder="Haz tu Pedido"hidden></textarea>
      <div>
       <!-- Lista de productos que quiero añadir-->
        <div class="content" id="productos">Lista de productos</br>
        <br>Red Velvet   3,80 €</br>
        <br>Carrot Cake  3,20 € </br>
        <br>Tartaletas de frutas   3,80 €</br>
        <br>Tartaletas de chocolate  3,50 €</br>
        <br>Cuatro Texturas  1,80 € </br>
        <br>Milhojas   1,80 € </br>
        <br>San Marcos   1,80 € </br>
        <br>Corte de nata y arandanos  1,80 € </br>
        <br>Porcion de tarta   2,50 € </br>
        <br>Citron   3,50 € </br>
        <br>Lemon Pie  3,80 € </br>
        <br>Mousse   3,20 € </br>
        <br>Tarta de manzana   1,80 € </br>
        <br>Pain au chocolat   1,30 €</br>
        <br>Pain au raisins  1,30 € </br>
        <br>Bretzel de crema   1,50 €</br> 
        <br>Donut  1,50 €</br>
        <br>Berlinas   2,50 € </br>
        <br>Palmeras de choco y huevo  1,80 € </br>
        <br>Palmeras de nutella  1,80 € </br>
        <br>Palmeras de Kinder   1,80 € </br>
        </div>  
       
      </div>
      
    </div>
  </div>
  <div class="row">
    <div class="col-md-6 form-group">
  
    </div>
  </div>
</form>
</body>
</html>


Hola Buenas ya solucione el problema de otra manera creando checkbox y eliminando el textarea, Gracias a todos por las respuestas.

1

2 respuestas 2

0

Quiza sea más fácil es utilizar nav-tabs porque no necesitas de javascript para pasar de una a otra. Por lo tanto saca toda referencia al Java script que tengan que ver con el cambio de plantilla..

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="container">

  <ul class="nav nav-pills nav-stacked">

    <li role="presentation" class="active">
      <a href="#sugerir" aria-controls="sugerir" role="tab" data-toggle="pill">Sugerencias</a>
    </li>

    <li role="presentation">
      <a href="#producto" aria-controls="producto" role="tab" data-toggle="pill">Productos</a>
    </li>

  </ul>

  <div class="tab-content">

    <div role="tabpanel" class="tab-pane active" id="sugerir">

      <h1> en este bloque pon tu plantilla de Sugerencias</h1>
    </div>


    <div role="tabpanel" class="tab-pane" id="producto">

      <h1> en este bloque pon tu plantilla de Productos</h1>

      <!-- Lista de productos que quiero añadir-->
      <div class="content" id="productos">Lista de productos</br>
        <br>Red Velvet 3,80 €</br>
        <br>Carrot Cake 3,20 € </br>
        <br>Tartaletas de frutas 3,80 €</br>
      </div>


    </div>
  </div>

4
  • Asumo que utilizas bootstrap 3.x Commented el 21 dic. 2019 a las 20:57
  • Y aclaro que SI SE NECESITA JAVASCRIPT para que funcione el tab nav de bootstrap :S... lo agrege a la edicion que hice. Commented el 3 abr. 2020 a las 22:34
  • Me refería a que no necesitas javascript porque ya lo tiene el bootstrap. Si tuvieras los bloques de los los tabs o pills no necesitarías hacer ese javascript. Mi solución fue una propuesta alterna. Que bueno que hayas encontrado la solución por ti mismo en base a los que querías. Saludos. Commented el 5 abr. 2020 a las 3:43
  • Ok, te refieres a que no se necesita crear tu propia función de javascript... :) Commented el 5 abr. 2020 a las 22:05
0

Dentro de la función podrías poner los pedidos dependiendo del valor que te llegue.

  <label for="cars">Choose a car:</label>
  <select id="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select>
  </div>
  <div id="information">Contenido inicial</div>

  <script src="jquery.js"></script>

  <script type="text/javascript">

  function CambiaContenidoFuncion(valor, carro) {
    colocarEn = document.getElementById("information"); //Captura el elemento donde se pondrá la información.
    colocarEn.innerHTML = "Has precionado el elemento :" + valor + ' ' + carro;
    if(valor === 1){
        colocarEn.innerHTML = colocarEn.innerHTML + "</br>Producto a, </br>producto b, </br>producto c"
    }
  };

  $('#cars').change(function() {
    var x = document.getElementById("cars").selectedIndex;
    var y = document.getElementById("cars").options;
    CambiaContenidoFuncion(x , y[x].value);

  });
  </script>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.