Anónimo
Ayuda con la programación de cuadros de texto en Javascript
¿Hola tengo un formulario en el cual necesito que al elegir personalizado no obligue a escribir pero solo numero pero que cuando elija estándar m deshabilite el cuadro de texto como puedo hacer esto? Las validaciones la he echo en un archivo aparte aquí te pongo los dos archivos
Formulario
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Documento sin título</title>
<script language="javascript" type="text/javascript" src="functions/js/comprobarpersonas.js">
</script>
<script language="javascript" type="text/javascript">
function habilitar(posicionamiento) {
if(posicionamiento=="estandar"){
document.getElementById('criterio').disabled=true; document.getElementById('criterio').value="";
}else{
document.getElementById('criterio').disabled=false;
}
}
function onlynumber(e){
if(isNaN(String.fromCharCode(e.charCode)) && e.charCode != 0) || e.charCode == 32){
return false;
}
</script>
</head>
<body>
<div>
<center>
<form action="enviarposicionamiento.php" method="post" name="formulario" onsubmit="JavaScript:return comprobarpersonas(document.getElementById('persona').value,document.getElementById('correo').value,document.getElementById('posicionamiento').value,document.getElementById('criterio').value,document.getElementById('telefono').value,document.getElementById('consulta').value)">
<table>
<th colspan="2">Posicionamiento</th>
<tr>
<td align="right" >Persona de Contacto</td>
<td align="left"><input type="text" id="persona" name="persona" width="300px" maxlength="30"size="30px"/></td>
</tr>
<tr>
<td align="right">E-mail</td>
<td align="left"><input type="text" id="correo" name="correo" width="150px" maxlength="30"size="30px "/></td>
</tr>
<tr>
<td align="right">Posicionamiento</td>
<td align="left">
<select name="posicionamiento" id="posicionamiento" onchange="habilitar(document.getElementById('posicionamiento').value)">
<option value="estandar"> Estandar (4 criterios)</option>
<option value="personalizado" > Personalizado</option>
</select>
</td>
</tr>
<tr>
<td align="right" >Nº criterios</td>
<td align="left"> <input type="text" id="criterio" name="criterio" maxlength="4" size="5px" disabled="disabled" keypress="onlynumber(e)" />
</td>
</tr>
<tr>
<td align="right">Telétefono</td>
<td align="left"><input type="text" id="telefono" name="telefono" maxlength="9"size="9px"/></td>
</tr>
<tr>
<td align="right">Consulta</td>
<td align="left"><textarea id="consulta" name="consulta" style="height:100px; width:300px;"></textarea></td>
</tr>
<tr>
<td colspan="2"><center><input type="submit" id="enviar" value="Contacte con Nosotros"/></center></td>
</tr>
</table>
</form>
</center>
</div>
</body>
</html>
DOCUMENTO JAVASCRIPT PARA VALIDAR
// JavaScript Document
//Función para las comprobaciones de los contactos
function comprobarpersonas(persona,correo,posicionamiento,criterio,telefono,consulta)
{
if(persona==""){
alert("El nombre de la Persona de Contacto no puede estar vacío.");
return false;
}
if(correo==""){
alert("El E-mail no puede estar vacío");
return false;
}
if(ComprobarMail(correo)==""){
return false;
}
if(posicionamiento=="personalizado"){
if(criterio=="")
{ alert("criterio no puede permanecer vacio");
return false;
}
}
if(telefono==""){
alert("El Teléfono no puede estar vacío.");
return false;
}
if(consulta==""){
alert("Debe usted poner su consulta.");
return false;
}return true;
}
function Comprobar(variable)
{
if(variable=="")
{
return false;
}
return true;
}
function ComprobarMail(mail){
var patron2 =...
Formulario
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Documento sin título</title>
<script language="javascript" type="text/javascript" src="functions/js/comprobarpersonas.js">
</script>
<script language="javascript" type="text/javascript">
function habilitar(posicionamiento) {
if(posicionamiento=="estandar"){
document.getElementById('criterio').disabled=true; document.getElementById('criterio').value="";
}else{
document.getElementById('criterio').disabled=false;
}
}
function onlynumber(e){
if(isNaN(String.fromCharCode(e.charCode)) && e.charCode != 0) || e.charCode == 32){
return false;
}
</script>
</head>
<body>
<div>
<center>
<form action="enviarposicionamiento.php" method="post" name="formulario" onsubmit="JavaScript:return comprobarpersonas(document.getElementById('persona').value,document.getElementById('correo').value,document.getElementById('posicionamiento').value,document.getElementById('criterio').value,document.getElementById('telefono').value,document.getElementById('consulta').value)">
<table>
<th colspan="2">Posicionamiento</th>
<tr>
<td align="right" >Persona de Contacto</td>
<td align="left"><input type="text" id="persona" name="persona" width="300px" maxlength="30"size="30px"/></td>
</tr>
<tr>
<td align="right">E-mail</td>
<td align="left"><input type="text" id="correo" name="correo" width="150px" maxlength="30"size="30px "/></td>
</tr>
<tr>
<td align="right">Posicionamiento</td>
<td align="left">
<select name="posicionamiento" id="posicionamiento" onchange="habilitar(document.getElementById('posicionamiento').value)">
<option value="estandar"> Estandar (4 criterios)</option>
<option value="personalizado" > Personalizado</option>
</select>
</td>
</tr>
<tr>
<td align="right" >Nº criterios</td>
<td align="left"> <input type="text" id="criterio" name="criterio" maxlength="4" size="5px" disabled="disabled" keypress="onlynumber(e)" />
</td>
</tr>
<tr>
<td align="right">Telétefono</td>
<td align="left"><input type="text" id="telefono" name="telefono" maxlength="9"size="9px"/></td>
</tr>
<tr>
<td align="right">Consulta</td>
<td align="left"><textarea id="consulta" name="consulta" style="height:100px; width:300px;"></textarea></td>
</tr>
<tr>
<td colspan="2"><center><input type="submit" id="enviar" value="Contacte con Nosotros"/></center></td>
</tr>
</table>
</form>
</center>
</div>
</body>
</html>
DOCUMENTO JAVASCRIPT PARA VALIDAR
// JavaScript Document
//Función para las comprobaciones de los contactos
function comprobarpersonas(persona,correo,posicionamiento,criterio,telefono,consulta)
{
if(persona==""){
alert("El nombre de la Persona de Contacto no puede estar vacío.");
return false;
}
if(correo==""){
alert("El E-mail no puede estar vacío");
return false;
}
if(ComprobarMail(correo)==""){
return false;
}
if(posicionamiento=="personalizado"){
if(criterio=="")
{ alert("criterio no puede permanecer vacio");
return false;
}
}
if(telefono==""){
alert("El Teléfono no puede estar vacío.");
return false;
}
if(consulta==""){
alert("Debe usted poner su consulta.");
return false;
}return true;
}
function Comprobar(variable)
{
if(variable=="")
{
return false;
}
return true;
}
function ComprobarMail(mail){
var patron2 =...
1 Respuesta
Respuesta de jeybi
1
Deberías explicarte mejor, por lo que entendí puedes probar esto:
1. Debes interceptar el evento "change" del select donde tienes las opciones "personalizado" y "estandar". El código seria algo como:
document.getElementById('posicionamiento').onchange = miFuncionQueCambiaElTextBox; // SIN '()'
2. La función "miFuncionQueCambiaElTextBox" se ejecutara cada vez que el usuario cambia de opción en el select, en dicha función debes obtener la opción seleccionada y de acuerdo a esta realizar la opción pertinente. Código:
function miFuncionQueCambiaElTextBox(){
var opcionSeleccionada = this.options[ this.selectedIndex ].value ; // this es la lista
switch( opcionSeleccionada ){
case 'estandar':
// Codigo aqui
break;
case 'personalizado':
// Codigo aqui
break;
}
}
3. Ahora, por lo que puede comprender deseas que el script bloquee la escritura de cualquier cosa salvo números. Esto lo realizas interceptando el evento "keypress" del input, allí debemos checar si el carácter presionado es un numero, en caso contrario regresamos "false" y el carácter no se escribirá:
var numeros = ['1','2','3','4','5','6','7','8','9','0']; // Carecteres que se permitiran escribir
function checarNumerico(event) {
var caracter = String.<span class="me1">fromCharCode</span><span class="br0">(</span> ( window.event || event ).<span class="me1">charCode</span><span class="br0">)</span>;
var seEncontro = false;
for(var i = 0; i < numeros.length; i++){
if( numeros == caracter ){
seEncontro = true;
break;
}
}
// Si no se cuentra, no se escribe
if( !seEncontro)
return false;
}
Hay varios métodos, pero si luego necesitas agregar otros caracteres como el punto, etc este es más practico. Este código es solo la función, para que funcione debes agregar la funciona al evento en el lugar donde verificamos si es "estandar" o "personalizada".
case 'personalizado':
var input =document.getElementById('tucampodetexto');
input.disabled = false; // En caso de que el usuaro haya elegio "estandar" anteriormente
input.onkeypress = checarNumerico;
break;
4. Ahora el otro es mas facil, solo debes obtener el elemento y deshabilitarlo:
case 'estandar':
var input =document.getElementById('tucampodetexto');
input.disabled = true; // Deshabilitamos
input.onkeypress = function(){}; // Por si el usario eligio "personalizado" anteriormente
break;
El código no lo he probado, puede contener errores de sintaxys y de lógica, de cualquier forma espero haberte ayudado, un saludo.
<div id="_mcePaste" style="overflow: hidden; position: absolute; left: -10000px; top: 505px; width: 1px; height: 1px;">opcionSeleccionada</div>
1. Debes interceptar el evento "change" del select donde tienes las opciones "personalizado" y "estandar". El código seria algo como:
document.getElementById('posicionamiento').onchange = miFuncionQueCambiaElTextBox; // SIN '()'
2. La función "miFuncionQueCambiaElTextBox" se ejecutara cada vez que el usuario cambia de opción en el select, en dicha función debes obtener la opción seleccionada y de acuerdo a esta realizar la opción pertinente. Código:
function miFuncionQueCambiaElTextBox(){
var opcionSeleccionada = this.options[ this.selectedIndex ].value ; // this es la lista
switch( opcionSeleccionada ){
case 'estandar':
// Codigo aqui
break;
case 'personalizado':
// Codigo aqui
break;
}
}
3. Ahora, por lo que puede comprender deseas que el script bloquee la escritura de cualquier cosa salvo números. Esto lo realizas interceptando el evento "keypress" del input, allí debemos checar si el carácter presionado es un numero, en caso contrario regresamos "false" y el carácter no se escribirá:
var numeros = ['1','2','3','4','5','6','7','8','9','0']; // Carecteres que se permitiran escribir
function checarNumerico(event) {
var caracter = String.<span class="me1">fromCharCode</span><span class="br0">(</span> ( window.event || event ).<span class="me1">charCode</span><span class="br0">)</span>;
var seEncontro = false;
for(var i = 0; i < numeros.length; i++){
if( numeros == caracter ){
seEncontro = true;
break;
}
}
// Si no se cuentra, no se escribe
if( !seEncontro)
return false;
}
Hay varios métodos, pero si luego necesitas agregar otros caracteres como el punto, etc este es más practico. Este código es solo la función, para que funcione debes agregar la funciona al evento en el lugar donde verificamos si es "estandar" o "personalizada".
case 'personalizado':
var input =document.getElementById('tucampodetexto');
input.disabled = false; // En caso de que el usuaro haya elegio "estandar" anteriormente
input.onkeypress = checarNumerico;
break;
4. Ahora el otro es mas facil, solo debes obtener el elemento y deshabilitarlo:
case 'estandar':
var input =document.getElementById('tucampodetexto');
input.disabled = true; // Deshabilitamos
input.onkeypress = function(){}; // Por si el usario eligio "personalizado" anteriormente
break;
El código no lo he probado, puede contener errores de sintaxys y de lógica, de cualquier forma espero haberte ayudado, un saludo.
<div id="_mcePaste" style="overflow: hidden; position: absolute; left: -10000px; top: 505px; width: 1px; height: 1px;">opcionSeleccionada</div>