Habilitar submit con javascript

Tengo un form donde importo un archivo y lo imprimo en pantalla marcando un borde rojo si hay errores para que el usuario los corrija, el tema es que quiero que se habilite el submit cuando este todo correcto.

Estoy usando esta función pero no se como ponerle que si todos los input o algunos no están en rojo habilite el submit

<script>
function desactivo_submit()
{
 var x = document.forms["form"].elements;
 var desactivar = true;
 for (var i = 0; i < x.length; i++) {
 if (x.value.length ==0) desactivar = false;
 }
 if (desactivar) {
 document.getElementById('submit').disabled = false;
 }
 else {
 document.getElementById('submit').disabled = 'disabled';
 }
}
</script>

Mi problema esta en el ==0 creo, ahí quiero ponerle que si el estilo del input es "border:2px solid #cc0000;" lo desactive.

Espero haber sido claro.

1 respuesta

Respuesta
1

Y si enseñas el botón solo cuando el formulario este correcto. Podrías hacer que el estilo del botón tenga "display none" por defecto desde el inicio, y cuando valide el formulario, modificar este estilo a inline u otro cuando no existan errores

<script>
function desactivo_submit()
{
var por = document.forms["form"].elements;
var desactivar = true;
for (var i = 0; i < por.length; i++) {
if (por.value.length ==0) desactivar = false;
}
if (desactivar) {
document.getElementById('submit').style.display= "none";
}
else {
document.getElementById('submit').style.display= 'inline';
}
}
</script>

Hola, gracias por la ayuda y disculpa la demora.

Me gusto esa opción pero no la pude hacer andar, cambie el estilo del botón y no me lo muestra pero al modificar los errores no me aparece de nuevo.

Así tengo el botón.

<div id="botonera">
 <input type='submit' name="guardar" id='guardar' value='Guardar datos' class='boton' onclick='saltar();'/><input type="button" value="Volver" id="volver" class="boton" onclick="saltar(); self.location.href='importar.php'" />
 </div

Y el script puse el que me pasaste.

Gracias

Me olvidaba, estos son los input donde imprimo el archivo importado, lo valido y coloreo con rojo los errores.

<tr>
 <td><input type="text" onKeyup="desactivo_submit()" name="<?php echo ("trab_apellido".$i);?>" id="<?php echo ("trab_apellido".$i);?>" value="<?php echo $apellido; ?>" style="border:0px; width: 80px;<?php if(!(preg_match("/^([a-z ñáéíóú ÑÁÉÍÓÚ ]{2,50})$/i",$apellido))){ echo "border:2px solid #cc0000;";} ?>" onblur="valida_apellido(<?php echo $i; ?>); esconde(<?php echo $i; ?>);" ></td>
 <td><input type="text" onKeyup="desactivo_submit()" name="<?php echo ("trab_nombre".$i); ?>" id="<?php echo ("trab_nombre".$i); ?>" value="<?php echo $nombre; ?>" style="border:0px; width: 80px;<?php if(!(preg_match("/^([a-z ñáéíóú ÑÁÉÍÓÚ ]{2,50})$/i",$nombre))){ echo "border:2px solid #cc0000;";} ?>" onblur="return valida_nombre(<?php echo $i; ?>);" /></td>
 <td><input type="text" onKeyup="desactivo_submit()" name="<?php echo ("trab_cuil".$i); ?>" id="<?php echo ("trab_cuil".$i); ?>" value="<?php echo $cuil; ?>" style="border:0px; width: 80px;<?php if(!cuitValido($cuil)){ echo "border:2px solid #cc0000;";}?>" onblur="return valida_cuil(<?php echo $i; ?>);" /></td>
 <td><input type="text" onKeyup="desactivo_submit()" name="<?php echo ("trab_basico".$i); ?>" id="<?php echo ("trab_basico".$i); ?>" value="<?php echo $basico; ?>" style="border:0px; width: 80px; text-align:right;<?php if(!is_numeric($basico)){ echo "border:2px solid #cc0000;";} ?>" onblur="return valida_basico(<?php echo $i; ?>);"/></td>
 <td><input type="text" onKeyup="desactivo_submit()" name="<?php echo ("trab_bruto".$i); ?>" id="<?php echo ("trab_bruto".$i); ?>" value="<?php echo $bruto; ?>" style="border:0px; width: 80px; text-align:right;<?php if(!is_numeric($bruto)){ echo "border:2px solid #cc0000;";} ?>" onblur="return valida_bruto(<?php echo $i; ?>);"/></td>
 <td><input type="text" onKeyup="desactivo_submit()" name="<?php echo ("trab_afiliado".$i); ?>" id="<?php echo ("trab_afiliado".$i); ?>" value="<?php echo $afili; ?>" style="border:0px; width: 50px; text-align:center;<?php if(trim((string)$afili) !== "0" && trim((string)$afili) !== "1"){ echo "border:2px solid #cc0000;";} ?>" onblur="return valida_afiliado(<?php echo $i; ?>);" maxlength="1"/></td>
 </tr>

Gracias

El id del botón es 'guardar', nosotros estamos buscando en el script el botón con id "submit".

En las líneas
document.getElementById('submit').style.display= 'inline';

y

document.getElementById('submit').style.display= "none";


Modifica la palabra 'submit' por el valor del id del botón (que en este caso es 'guardar')

Disculpa pero tampoco funciona....

Intenta con esto:

<html>
<head>
<title>jjsjas</title>
<script>
function desactivo_submit(){
var por = document.forms["form"].elements;
var desactivar = true;
for (var i = 0; i < por.length; i++) {
if (por.value.length ==0){
desactivar = false;
}
}
if (!desactivar) {
document.getElementById('guardar').style.display= "none";
}else {
document.getElementById('guardar').style.display= 'inline';
}
}
</script>
</head>
<body>
<form id="form" method="post">
<table border="1">
<tr>
<td><input type="text" onblur="desactivo_submit()" name="<?php echo ("trab_apellidoa");?>" id="<?php echo ("trab_apellido");?>" value="<?php echo "ja ja"; ?>" ></td>
<td><input type="text" onblur="desactivo_submit()" name="<?php echo ("trab_nombre"); ?>" id="<?php echo ("trab_nombre"); ?>" value="<?php echo "jojo"; ?>" /></td>
<td><input type="text" onblur="desactivo_submit()" name="<?php echo ("trab_cuil"); ?>" id="<?php echo ("trab_cuil"); ?>" value="<?php echo "jojo"; ?>" /></td>
<td><input type="text" onblur="desactivo_submit()" name="<?php echo ("trab_basico"); ?>" id="<?php echo ("trab_basico"); ?>" value="<?php echo "jojo"; ?>" /></td>
<td><input type="text" onblur="desactivo_submit()" name="<?php echo ("trab_bruto"); ?>" id="<?php echo ("trab_bruto"); ?>" value="<?php echo "jojo"; ?>" /></td>
<td><input type="text" onblur="desactivo_submit()" name="<?php echo ("trab_afiliado"); ?>" id="<?php echo ("trab_afiliado"); ?>" value="<?php echo "jojo"; ?>" maxlength="1"/></td>
</tr>
</table>
<div id="botonera">
<input type='submit' name="guardar" id='guardar' value='Guardar datos' class='botón' onclick='saltar();'/><input type="button" value="Volver" id="volver" class="botón" onclick="saltar(); self.location.href='importar.php'" />
</div>
</form>
</body>
</html>

Lo importante acá es el botón submit (que su id sea referenciado correctamente)

Y que la función javascript se anote de manera integra.

Si copias y pegas este código tendría que funcionar como esperamos.

Saludos!

Claro, pero yo en el value traigo los datos del archivo que el usuario importa.

El tema es así, yo tengo un form donde solo hay un botón de importar, ahí tomo el archivo que el usuario sube, almaceno en variables los datos separados por coma y lo imprimo en una tabla validando con expresiones regulares y funciones (en PHP) y coloreo con rojo los datos mal cargados que hay en el .txt para que el usuario corrija los errores. Una vez todo corregido quiero que se habilite o aparezca el submit, o en caso de que el archivo no tenga errores aparezca de una.

Gracias

Entiendo:

Lo que sucede es que para validar solo el javascript elimine muchas de las cosas que habías elaborado (ya que no manejo la base de datos desde donde rescatas la información)

Mantén tal cual el los campos (a excepción de modificar el evento onkeyup por onblur para mejorar la efectividad) el formulario si o si tiene que llamarse "form" y la función desactivo_submit() la copias tal cual te la entregué. No tendría que haber problemas.

Hice tal cual lo que me indicas pero sigue sin funcionar, lo único que cambie fue el "form" por "formulario" ya que en mi caso tengo id y name del form como "formulario"

<script>
 function desactivo_submit(){
 var por = document.forms["formulario"].elements;
 var desactivar = true;
 for (var i = 0; i < por.length; i++) {
 if (por.value.length ==0){
 desactivar = false;
 }
 }
 if (!desactivar) {
 document.getElementById('guardar').style.display= "none";
 }else {
 document.getElementById('guardar').style.display= 'inline';
 }
}
</script>

En los input no puede haber nada que este alterando el funcionamiento? La verdad que no entiendo porque no aparece.

Gracias y disculpa...

Me faltó un detalle en la función, intenta con esta versión:

function desactivo_submit(){
var por = document.forms["formulario"].elements;
var desactivar = true;
for (var i = 0; i < por.length; i++) {
if (por.value.length ==0){
desactivar = false;
}
}
if (!desactivar) {
document.getElementById('guardar').style.display= "none";
}else {
document.getElementById('guardar').style.display= 'inline';
}
}

Disculpa pero tampoco anda....

Lo que sucede es que el sitio está cambiando algunos caracteres del programa por eso cada vez que te envío una version del script esta aparece mal.

En la linea

if (por.value.length ==0){

modifícala por

if (por [ i ].value.length ==0){


Se entiende que por es un arreglo lo que tendrías que hacer es unir la sintaxis


Si sigue llegando con problemas dame un correo al cual entregar la función sin detalles

Gracias por la paciencia! je! Ahí anduvo, pero hay algo mas.

Si el archivo no contiene ningún error no aparece el submit.

Ahí depende de la inicialización que tienes del botón, antes de ejecutar la función desactivo-submit tienes que tener alguna instancia donde valides el resultado del archivo y ahí tienes que volver a validar si es correo que haga aparecer el botón.

Te lo comento así ya que hasta el momento solo he utilizado esa función y esta se ejecuta en el momento de interactuar con el formulario, desconozco como evalúas la integridad del archivo a penas se carga.

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas

Grabar desconexión de usuario logueado

Tengo una web en la que los usuarios pueden loguearse, y al hacerlo se graba en una base de datos mysql el usuario y la hora de conexión. Quisiera saber cómo hacer para que también quede grabada la hora de "desconexión". Si pulsan el botón de cerrar...
2 respuestas

Datos obligatorios

Estoy haciendo un formulario en HTML para solicitar datos y necesito que sean obligatorios. Se que con HTML no se puede pero con JavaScript o algo similar si. ¿Cómo puedo hacerlo?
1 respuesta

Hacer un mensaje de alerta

Necesitaría saber como hacer que salte un mensaje de alerta al seleccionar un valor de un list/menu. Me explico, tienes tres campos y un botón de enviar. En cada campo tienes, por ejemplo, 5 valores y un sexto, que seria el primero de los seis, que...
7 respuestas

Validar inputs dinamicos

Tengo un formulario con 76 campos dinámicos, y al darle submit necesito que se valide que todos están llenos, para esto hice esta función que llamo en el evento onSubmit de la forma: function ValidarVacios() { var f = document.forms['form1']; var...
1 respuesta

Pasar nombre del campo como variable

Necesito hacer un validador, tengo dos campos (de fecha) llamados fech1 y fech2 y una función que valida la fecha en el evento OnClick del botón submit, ¿Cómo puedo pasar los nombre de campo de los campos de fecha para que la función me los tome?...
1 respuesta

Enfoque en botones de formulario

Ayudame con lo siguiente: Tengo un formulario que solamente tiene un botn (submit) y cuando el usuario o el visitante de mi página por error presión ENTER pensando que así pasara al siguiente cuadro de texto, por defecto se activa el botón enviando...
3 respuestas

Como Redireccionar a url leída en un campo de mysql

Agradecería vuestra ayuda porque me he quedado para en este punto. Tengo una base de datos con los campos usuario, password y url ( cada usuario tiene su propia url) Tengo una web con un formulario de acceso y al validar los datos (usuario, password)...
1 respuesta

Clásico juego de memoria con javascript

Estoy usando un código que encontré en la red para un juego de memoria (el clásico juego de destapar imágenes de dos en dos y tratar de hacer las parejas). Podés verlo en funcionamiento en: http://www.tunait.com/javascript/scripts/juegos/memoria.htm...
1 respuesta

Javascript formulario web

Le comento mi problema esperando que me pueda ayudar. He realizado la ss Web con un programa bastante sencillo que facilita no emplear código: http://centroeducacion.es El problema lo tengo a la hora de Los formularios pej. La página de contacto...
6 respuestas

Adicionar atributos a un campo dependiendo del radiobutton seleccionado

Tengo dos radio button para elegir que campo debería ser obligatorio Dependiendo del radio button que se escoja un campo pasara a ser obligatorio y el otro seguirá sin serlo
1 respuesta