I have a problem that I cannot solve and that is that I have a form in html
and I have a optgroup
, which is responsible for the options that I put in a dropdown...
But now what I want is for me to get one textarea
according to the option value
one I click. I know it can be done but I can't find a way and also put characters in it textarea
, depending on whether one template or another comes out.
I attach the code.
Thank you so much!!!
<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="mensaje" 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>
</div>
<div class="row">
<div class="col-md-6 form-group">
<script>
function myFunction(){
var lista = document.getElementById("texto");
var indiceSeleccionado = lista.selectedIndex;
var listaint = document.getElementById("texto").options[1];
var textoSeleccionado = listaint.text;
var listaint2 = document.getElementById("texto").options[2];
if (indiceSeleccionado == 0) {
var textarea_mensaje = document.getElementById("mensaje");
var textarea_pedido = document.getElementById("pedido");
alert("Selecciona una opcion");
textarea_mensaje.style.display = 'none';
textarea_pedido.style.display = 'none';
}
if (indiceSeleccionado == 1) {
var textarea_mensaje = document.getElementById("mensaje");
//mostrar elemento
textarea_mensaje.style.display = 'block';
var textareaSeleccionado = textarea_mensaje.text;
var valorSeleccionado = textarea_mensaje.value;
var textarea_pedido = document.getElementById("pedido");
//ocultar elemento
textarea_pedido.style.display = 'none';
var textareaSeleccionado2 = textarea_pedido.text;
var valorSeleccionado2 = textarea_pedido.value;
}
if (indiceSeleccionado == 2) {
var textarea_mensaje = document.getElementById("mensaje");
textarea_mensaje.style.display = 'none';
var textareaSeleccionado = textarea_mensaje.text;
var valorSeleccionado = textarea_mensaje.value;
var textarea_pedido = document.getElementById("pedido");
textarea_pedido.style.display = 'block';
var textareaSeleccionado2 = textarea_pedido.text;
var valorSeleccionado2 = textarea_pedido.value;
}
else{
}
//var indiceSeleccionado = lista.selectedIndex;
//alert(lista);
}
</script>
</div>
</div>
</form>
Code pasted from the test page and the textareas do not appear, I do not understand why...
<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="Sugerencia" value ="plantillas" name="message" id="mensaje" class="form-control " cols="30" rows="8" placeholder="Comparte tu sugerencias" hidden></textarea>
<textarea name="Pedido" value ="plantillas" name="message" id="pedido" class="form-control " cols="30" rows="8" placeholder="Haz tu Pedido" hidden></textarea>
</div>
</div>
<div class="row">
<div class="col-md-6 form-group">
<script>
function myFunction(){
var lista = document.getElementById("texto");
var indiceSeleccionado = lista.selectedIndex;
var listaint = document.getElementById("texto").options[1];
var textoSeleccionado = listaint.text;
var listaint2 = document.getElementById("texto").options[2];
if (indiceSeleccionado == 0) {
var textarea_mensaje = document.getElementById("mensaje");
var textarea_pedido = document.getElementById("pedido");
alert("Selecciona una opcion");
}
if (indiceSeleccionado == 1) {
var textarea_mensaje = document.getElementById("mensaje");
//mostrar elemento
textarea_Seleccionado.style.display = 'block';
var textareaSeleccionado = textarea_mensaje.text;
var valorSeleccionado = textarea_mensaje.value;
var textarea_pedido = document.getElementById("pedido");
alert("Selecciona una opcion1");
//ocultar elemento
textarea_pedido.style.display = 'none';
var textareaSeleccionado2 = textarea_pedido.text;
var valorSeleccionado2 = textarea_pedido.value;
}
if (indiceSeleccionado == 2) {
var textarea_mensaje = document.getElementById("mensaje");
textarea_mensaje.style.display = 'none';
var textareaSeleccionado = textarea_mensaje.text;
var valorSeleccionado = textarea_mensaje.value;
var textarea_pedido = document.getElementById("pedido");
textarea_pedido.style.display = 'block';
var textareaSeleccionado2 = textarea_pedido.text;
var valorSeleccionado2 = textarea_pedido.value;
}
else{
}
//var indiceSeleccionado = lista.selectedIndex;
//alert(lista);
}
</script>
<input type="submit" value="Send Message" class="btn btn-primary"></a>
</div>
</div>
</form>