Agregar valores a un campo texto desde un campo select
Les cuento que estoy utilizando un script al cual le estoy mejorando un poco el inicio de sesión para hacerlo más fácil para mis usuarios. Mi intención es que el usuario pueda escribir la primera parte de su correo, la cual es numérica y que la extensión del email se diligencie al seleccionar el valor de un campo select, por ejemplo:
Donde: 111111->seria el valor que diligenciaria el usuario
@midominio -> seria el valor que yo le daria a la opcion del select.
Para lo anterior lo que pretendo es ocultar el campo actual de correo electronico, para no modificar ningun concepto del script y crear otro campo que sea numerico(para evitar que diligencie otro caracter) y utilizar un código que me permita que lo que el usuario este escribiendo en el campo numerico se vaya copiando en el campo oculto de correo electronico.
De igual manera que al lado del campo numerico se encuentre el campo select, que le permita seleccionar la extensión del dominio y al seleccionarla de igual manera este campo complete el correo en el campo oculto... Posterior el usuario diligenciara su contraseña y podria iniciar sesión.
El inconveniente al que no le he encontrado solución es que cuando selecciono el select su valor diligencia el campo oculto sin tener en cuenta lo que se halla previamente diligenciado en el campo numerico... Para ser mas clara, al seleccionar la opción en el campo select, reemplaza lo que halla diligenciado en el campo oculto y lo que necesito es que complete el email del campo, no que lo reemplace.
A continuación les describo el código que estoy utilizando actualmente y screenshot de lo que suceden dicho código:
<! DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function(){
$(document).on('change','#mySelect',function(){ //detectamos el evento change
var value = $(this).val();//sacamos el valor del select
$('#mySelect').val(value);//le agregamos el valor al input (notese que el input debe tener un ID para que le caiga el valor)
});
});
</script>
<script src="http://code.jquery.com/jquery-1.0.4.js"></script>
<script>
$(document).ready(function () {
$("#texto1").keyup(function () {
var value = $(this).val();
$("#mySelect").val(value);
});
});
</script>
</head>
<body>
<input type="text" id="mySelect" value="" placeholder="campo oculto"/><br><br><!--style="display:none"-->
<input type="text" id="texto1" value=""/>
<select id="mySelect">
<option value="@midominiouno.com">@dominio1</option>
<option value="@midominiodos.com">@dominio2</option>
<option value="@midominiotres.com">@dominio3</option>
</select>
</body>
</html>
Agradesco la ayuda que me puedan prestar ya que he intentado muchas cosas y no doy con la solución.
1 respuesta
a ver si esto te sirve: https://jsfiddle.net/xpvt214o/643166/
Puedes modificarlo si quieres que el dominio no aparezca al principio o lo que sea, pero esa es la idea.
Otro opción seria mandar al script PHP dos campos usuario a dominio, y que sea PHP quien los procese.
¡Gracias! wow, excelente tu solución... anoche estuve trabaje hasta tarde y logre darle solución, pero el que me propones esta mucho mucho más limpio y claro. Muchas gracias por tu interés y tu tiempo. Te muestro el código que había logrado realizar.
