alert de botones si seleccionar "continuar cancelar"

KAKOROSAS · #1 (**permalink**) 11/10/2012, 13:49

hola... les coloco un código de prueba para una situación que no eh podido hacer funcionar...

la idea es hacer un script confirm() que muestre una lista de los radion button que no fueron seleccionados obviamente con la opción continuar o cancelar para volver a responder

la idea es que yo pueda editar el mensaje del script osea.. si solo fue contestado el 1 que diga .. la pregunta 2 , 3 , 4 no fue contestada y los botones continuar y cancelar respectivamente

muchas gracias por su tiempo

Código PHP:

  <!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> 
</head> 
 
<body> 
<form id="form2" name="form2" method="post" action=""> 
  <p> 
    <label> 
      <input type="radio" name="a1" value="a" id="a1_0" /> 
      a</label> 
    <br /> 
    <label> 
      <input type="radio" name="a1" value="b" id="a1_1" /> 
      b</label> 
    <br /> 
    <label> 
      <input type="radio" name="a1" value="c" id="a1_2" /> 
      c</label> 
    <br /> 
  </p> 
  <p> 
    <label> 
      <input type="radio" name="a2" value="a" id="a2_0" /> 
      a</label> 
    <br /> 
    <label> 
      <input type="radio" name="a2" value="b" id="a2_1" /> 
      b</label> 
    <br /> 
    <label> 
      <input type="radio" name="a2" value="c" id="a2_2" /> 
      c</label> 
  </p> 
  <p> 
    <label> 
      <input type="radio" name="a3" value="a" id="a2_3" /> 
      a</label> 
    <br /> 
    <label> 
      <input type="radio" name="a3" value="b" id="a2_4" /> 
      b</label> 
    <br /> 
    <label> 
      <input type="radio" name="a3" value="c" id="a2_5" /> 
      c</label> 
</p> 
  <p> 
    <label> 
      <input type="radio" name="a4" value="a" id="a2_6" /> 
      a</label> 
    <br /> 
    <label> 
      <input type="radio" name="a4" value="b" id="a2_7" /> 
      b</label> 
    <br /> 
    <label> 
      <input type="radio" name="a4" value="c" id="a2_8" /> 
      c</label> 
  </p> 
  <p><br /> 
  </p> 
  <p>    <input type="submit" name="enviar" id="enviar" value="Enviar" /><br /> 
</p> 
</form> 
</body> 
</html>

angel1993 · #2 (**permalink**) 11/10/2012, 14:18

Mete en el form el evento onsubmit

<form onsubmit="comrpobar()"

Comprobar es una funcion que busca los no seleccionados y genera el texto del confirm...
Mete el Confirm en el return de la función y si el usuario hace "false" onsubmit lo detecta y no se envía el form.

Dradi7 · #3 (**permalink**) 11/10/2012, 14:28

Mira este ejemplo que hize espero te sirva

Código HTML:

Ver original<!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>
        function validar(){
            return false;        
        }
    </script>
</head> 
 
<body> 
<form id="form2" name="form2" method="post" action="" onsubmit="return validar();"> 
    pregunta 1
  <p> 
    <label> 
      <input type="radio" name="a1" value="a" id="a1_0" /> 
      a</label> 
    <br /> 
    <label> 
      <input type="radio" name="a1" value="b" id="a1_1" /> 
      b</label> 
    <br /> 
    <label> 
      <input type="radio" name="a1" value="c" id="a1_2" /> 
      c</label> 
    <br /> 
  </p>
    <br/>
    pregunta 2
  <p> 
    <label> 
      <input type="radio" name="a2" value="a" id="a2_0" /> 
      a</label> 
    <br /> 
    <label> 
      <input type="radio" name="a2" value="b" id="a2_1" /> 
      b</label> 
    <br /> 
    <label> 
      <input type="radio" name="a2" value="c" id="a2_2" /> 
      c</label> 
  </p> 
    <br/>
    pregunta 3
  <p> 
    <label> 
      <input type="radio" name="a3" value="a" id="a2_3" /> 
      a</label> 
    <br /> 
    <label> 
      <input type="radio" name="a3" value="b" id="a2_4" /> 
      b</label> 
    <br /> 
    <label> 
      <input type="radio" name="a3" value="c" id="a2_5" /> 
      c</label> 
</p> 
    <br/>
    pregunta 4
  <p> 
    <label> 
      <input type="radio" name="a4" value="a" id="a2_6" /> 
      a</label> 
    <br /> 
    <label> 
      <input type="radio" name="a4" value="b" id="a2_7" /> 
      b</label> 
    <br /> 
    <label> 
      <input type="radio" name="a4" value="c" id="a2_8" /> 
      c</label> 
  </p> 
  <p><br /> 
  </p> 
  <p>    <input type="submit" name="enviar" id="enviar" value="Enviar" /><br /> 
</p> 
</form> 
</body> 
</html>

Código Javascript:

Ver originalfunction comprobarPregunta(ele){
    var radios = document.getElementsByName(ele);
    var noContesto = true;
    for(var x=0;radios[x];x++){
        if(radios[x].checked){
            noContesto = false;
            break;
        }
    }
    return noContesto;
}
function validar(){
    var ele = document.forms['form2'].elements;
    var name = '';
    var noContestados = '';
    for(var x=0;ele[x];x++){
        if(ele[x].type == "radio" && ele[x].name!=name){
            name = ele[x].name;
            noContestados += comprobarPregunta(ele[x].name) ? (name.replace(/\D/gi,"") + ', ') : '';
        }else{
            continue;
        }
    }
 
    if(noContestados!=''){
        // CON ESTO ESTOY VERIFICANDO QUE SI PONE EN ACEPTAR ENTONCES REALIZAR EL SUBMIT DE LO CONTRARIO QUE NO HAGA EL SUBMIT
        if(confirm("Falta responer las siguientes preguntas " + noContestados.substr(0,noContestados.length-2))){
            return true;
        }else{
            return false;
        }
    }
    return true;
}

Saludos

KAKOROSAS · #4 (**permalink**) 11/10/2012, 14:41

es lo que necesito hacer.. muchas gracias.. lo tratare de adaptar a mi código ...

muchas gracias .. aviso cualquier cosa..

saludos

KAKOROSAS · #5 (**permalink**) 11/10/2012, 20:29

Dradi7....

me funciono muy bien .. inserte unos if para validar unos textbox y me quedo funcionando muy bien a primera vista...

muchas gracias...

solo me queda unos detalles en los cuales creare un nuevo tema ..