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.