innerHTML Por opção I.E X Fire Fox

jgd · Agosto 7, 2009

Olá Pessoal, preciso novamente de ajuda... Agora com relação a exibição e execução de forms que são carregados conforme a escolha do usuários via innerHTML.

A operação é a seguinte:

O usuário escolhe uma das opções.

Conforme a opção selecionada o form é carregado em uma Div..

Para isso de início tenho um form com dois checkbox uma div e alguns campos hidden conforme abaixo:

<form name="form3" method="post" action="artigos.asp?acao=" onSubmit='return form_simples(this)'>

Registrar Opinião: <input type="checkbox" name="sel" id="1" value="1" onclick="mostraOpcao(form3.sel,0,1);">

Registrar Voto: <input type="checkbox" name="sel2"  id="2" value="2" onclick="mostraOpcao(form3.sel2,0,2);">

<div id="mostra">
</div>

<input type="hidden" name="acao" value="">
<input type="hidden" name="acao2" value="22">
<input type="hidden" name="G" value="<%=zIdG%>">
</form>

Então para evitar que o usuário escolha mais de uma opção e também traga o formulários correspondente chamo a função mostraOpcao no onClick que carrega o conteúdo da opção na div = mostra... Aí estou tendo dois problemas: 1) Fire Fox: Não estou conseguindo validar os campos. Contudo se coloco a referencia do form junto ao código do innerHTML a ser carregado (ver abaixo código comentado) até consigo validar os campos... mais também só submeto os campos da div... sem os hidden que ficam fora e abaixo da div os quais serão utilizados nas próximas ações e que os hiddens não vão. Dá erro no asp. 2) I.E e Fire Fox: Se faço a validação pelo servidor (asp)... Quando não passa e a página é recarregada ( via history.go(-1) ) a checkbox fica selecionada mais a Div fica vazia. Agradeço qualquer ajuda. Função:

<script>
var maxi=1;
var P1;
var P2;
var PX;
var contador=new Array(0,0);

function mostraOpcao(valor,grupo,valor2){
    if (valor.checked==true){

    //alert(valor2);

    contador[grupo]++;
        
     if (valor2=="1"){    
     document.getElementById("mostra").innerHTML = "/*<form name='form3' method='post' action='artigos.asp' onSubmit='return validacampos();'>*/<input type='text' maxlength='15' name='obrigNome' title='Nome' value=''><br><input type='text' size='1' maxlength='2' name='obrigUf' title='UF' value=''><br><input type='text' size='39' name='obrigEmail' title='Email' value=''><br><textarea name='obrigComentario' cols='30' title='Comentário' rows='5'></textarea><input type='hidden' name='tipoacao' value='come'><input type='image' src='btEnviar.gif' alt='Enviar' id='image'1 name='image'1>";
     }
     if (valor2=="2"){    
     document.getElementById("mostra").innerHTML = "/*<form name='form3' method='post' action='artigos.asp' onSubmit='return validacampos();'>*/<input type='radio' name='obrigVoto' title='Voto' value='0'>Ruim&nbsp;<input type='radio' name='obrigVoto' title='Voto' value='1' id='radio'>Bom<br><input type='hidden' name='tipoacao' value='voto'><input type='image' src='btRegVoto.gif' alt='Registrar Voto' id='image'1 name='image'1>";
     }
    
    if (contador[grupo]>maxi) {
        alert('Não se pode escolher mais de '+maxi+' campos ao mesmo tempo.');
        valor.checked=false;
            
      if (valor2=="2"){    
     document.getElementById("mostra").innerHTML = "/*<form name='form3' method='post' action='artigos.asp' onSubmit='return validacampos();'>*/<input type='radio' name='obrigVoto' title='Voto' value='0'>Ruim&nbsp;<input type='radio' name='obrigVoto' title='Voto' value='1' id='radio'>Bom<br><input type='hidden' name='tipoacao' value='voto'><input type='image' src='btRegVoto.gif' alt='Registrar Voto' id='image'1 name='image'1>";
        }
      if (valor2=="1"){    
     document.getElementById("mostra").innerHTML = "/*<form name='form3' method='post' action='artigos.asp' onSubmit='return validacampos();'>*/<input type='text' maxlength='15' name='obrigNome' title='Nome' value=''><br><input type='text' size='1' maxlength='2' name='obrigUf' title='UF' value=''><br><input type='text' size='39' name='obrigEmail' title='Email' value=''><br><textarea name='obrigComentario' cols='30' title='Comentário' rows='5'></textarea><input type='hidden' name='tipoacao' value='come'><input type='image' src='btEnviar.gif' alt='Enviar' id='image'1 name='image'1>";
      }    
      contador[grupo]--;
            
      }
    }else {
                
    }
    
if (contador[grupo]==0){
document.getElementById("mostra").innerHTML = "";
}


}</script>

.Andreia. · Agosto 7, 2009

ptz perai, eu não entendi.. porque você criou vários forms dentro da mesma div (com pequenas mudanças)??

Eu acho que o primeiro passo que você podia fazer, é deixar mais pratico seu codigo. Isso vai te facilitar não só agora como la na frente quando você precisar de uma manutenção.

você tem 2 checkboxs iniciais, quando você clica em um ele tem que aparecer um form, e se clicar no outro, aparece outro form. é isso ?

jgd · Agosto 7, 2009

Isso mesmo Andreai... Se clica em um aparece um se clica no outro aparace outro.

Então? Mas se coloco o form fora da Div... o Fire Fox não pega ( nem função de validação nem hiddens..

Checkboxs....

</form>

JGD

E... Se separo em mais de um form... Ou seja:

<form name="form1" method="post" action="artigos.asp?acao=" onSubmit=onSubmit='return validacampos();'>

Registrar Opinião: <input type="checkbox" name="sel" id="1" value="1" onclick="mostraOpcao(form1.sel,0,1);">

Registrar Voto: <input type="checkbox" name="sel2"  id="2" value="2" onclick="mostraOpcao(form1.sel2,0,2);">
</form>

E coloco nova referencia do form no código a ser carregado no innetHTML... ver linha:

innetHTML ="/*<form name='form3' method='post' action='artigos.asp' onSubmit='return validacampos();'>*/.....

Aí os hidden não vão enviados no submit.

JGD

.Andreia. · Agosto 7, 2009

montei um exemplo bem simples (apenas pra ter ideia) testa ai ve se é mais ou menos isso

<form name="frm" action="proxima.asp">

FRM1:<input type="checkbox" name="chk_form1" onclick="frm2.style.display='none'; frm1.style.display='block'">
FRM2:<input type="checkbox" name="chk_form2" onclick="frm2.style.display='block'; frm1.style.display='none'">
<br>
<div id="frm1" style="display:none";>Form 1
<br>
<input type="text" name="campo1_frm1"><br>
<input type="text" name="campo2_frm1"><br>
<input type="text" name="campo3_frm1">
</div>
<br>
<div id="frm2" style="display:none";>Form 2
<br>
<input type="text" name="campo1_frm2"><br>
<input type="text" name="campo2_frm2"><br>
<input type="text" name="campo3_frm2">
</div>
<br>
<input type="submit" value="Validar">
</form>

a pagina proxima.asp só tem os request dos campos que estao dentro das divs.

ps.: testado no IE 8 e FF 3

jgd · Agosto 7, 2009

Andreia,

O que você mostrou é uma alterantiva... Contudo.

Na validação dos campos via javaScript... E mostra todos os campos. Os ocultos e os visíveis....

Se eu fizer a validação pelo asp... Quando volto (faltou algum campo)... a pagina só mostra o checkbox checado...

Os campos não.. Igual meu 2ª problemas.

teria alaguma solução pra não perder desaparecer os campos?

Veja código sugerido com as desmais particularidade:

<%
'Teste Andrea
Id = "Vai"
%>
<HTML>
<HEAD>
<TITLE>TesteAdreia</TITLE>
<script>

function validacampos(){
    var campo = document.forms[0];
    var i=0;
    var erro ="";
    //var nro1 ="";
    //var nro2 ="";
    
    for (i=0; i< campo.elements.length; i++){
     var nomecampo = campo.elements[i].name;
     
    
      if (nomecampo.substring(5,0) == 'obrig'){
      
           //alert(nomecampo);
      
           var valida = campo.elements[i].value;
           
           if (nomecampo == "obrigCheca" && campo.elements[i].id=="1"){
           var nro1 = campo.elements[i].checked;
           }
           if(nomecampo == "obrigCheca" && campo.elements[i].id=="2"){
           var nro2 = campo.elements[i].checked;
           
           if (nro1==false && nro2==false){
           erro = erro + "Informe sobre a opção.\n"
            }
           }     
           
           if (valida == ''){
               erro = erro + "Preencha o campo "+ campo.elements[i].title +" corretamente. \n"
              
              //alert('o campo ' +  campo.elements[i].title + ' deve ser preenchido!');
             //return false;
         }
      }
   }

    if(erro != ""){
        alert("Erros:\n"+erro);
        return false;
    }else{

        return true;

    }


}
//-->
</script>
</head>
<html>
<body>
<br>
<form name="frm" action="proxima.asp" onsubmit="return validacampos();">

FRM1:<input type="checkbox" name="chk_form1" onclick="frm2.style.display='none'; frm1.style.display='block'">
FRM2:<input type="checkbox" name="chk_form2" onclick="frm2.style.display='block'; frm1.style.display='none'">
<br>
<div id="frm1" style="display:none";>Form 1
<br>
<input type="text" name="obrigCampo1_frm1" title="Campo 1 Form1"><br>
<input type="text" name="obrigCampo2_frm1" title="Campo 2 Form1"><br>
<input type="text" name="obrigCampo3_frm1" title="Campo 3 Form1">
</div>
<br>
<div id="frm2" style="display:none";>Form 2
<br>
<input type="text" name="obrigCampo1_frm2" title="Campo 1 Form2"><br>
<input type="text" name="obrigCampo2_frm2" title="Campo 2 Form2"><br>
<input type="text" name="obrigCampo3_frm2" title="Campo 3 Form2">
</div>
<br>
<input type="submit" value="Validar">
<input type="hidden" name="acao" value="22">
<input type="hidden" name="G" value="<%=Id%>">

</form>
</BODY>
</HTML>

Resultado 1:

<%
Response.Write "Form1 <br>"
Response.Write "1 " & Request("obrigCampo1_frm1") & "<br>"
Response.Write "2 " & Request("obrigCampo2_frm1") & "<br>"
Response.Write "3 " & Request("obrigCampo3_frm1") & "<br><br>"

Response.Write "Form2 <br>"
Response.Write "1 " & Request("obrigCampo1_frm2") & "<br>"
Response.Write "2 " & Request("obrigCampo2_frm2") & "<br>"
Response.Write "3 " & Request("obrigCampo3_frm2") & "<br>"

Response.Write "hidden " & Request("acao") & "<br>"
Response.Write "hidden " & Request("G") & "<br>"

%>

Tratamento pelo ASP. Arquivo: TesteAndeia 2.asp

<%
'Teste Andrea
Id = "Vai"
%>
<HTML>
<HEAD>
<TITLE>TesteAdreia 2 </TITLE>

</head>
<html>
<body>
<br>
<form name="frm" action="proxima2.asp">

FRM1:<input type="checkbox" name="chk_form1" onclick="frm2.style.display='none'; frm1.style.display='block'">
FRM2:<input type="checkbox" name="chk_form2" onclick="frm2.style.display='block'; frm1.style.display='none'">
<br>
<div id="frm1" style="display:none";>Form 1
<br>
<input type="text" name="obrigCampo1_frm1" title="Campo 1 Form1"><br>
<input type="text" name="obrigCampo2_frm1" title="Campo 2 Form1"><br>
<input type="text" name="obrigCampo3_frm1" title="Campo 3 Form1">
</div>
<br>
<div id="frm2" style="display:none";>Form 2
<br>
<input type="text" name="obrigCampo1_frm2" title="Campo 1 Form2"><br>
<input type="text" name="obrigCampo2_frm2" title="Campo 2 Form2"><br>
<input type="text" name="obrigCampo3_frm2" title="Campo 3 Form2">
</div>
<br>
<input type="submit" value="Validar">
<input type="hidden" name="acao" value="22">
<input type="hidden" name="G" value="<%=Id%>">

</form>
</BODY>
</HTML>

Resultado 2 : Arquivo: proximo2.asp

<%
Sub Alerta(msg)
response.write "<script>"
response.write "alert('"&msg&"')"
Response.Write ";history.go(-1)"
response.write "</script>"
End Sub

if Request("obrigCampo1_frm1") ="" or Request("obrigCampo2_frm1") ="" or Request("obrigCampo3_frm1")="" then 

Alerta("Falta campo From 1")

end if 


if Request("obrigCampo1_frm2") ="" or Request("obrigCampo2_frm2") ="" or Request("obrigCampo3_frm2")="" then 

Alerta("Falta campo Form 2")

end if 

Response.Write "Form1 <br>"
Response.Write "1 " & Request("obrigCampo1_frm1") & "<br>"
Response.Write "2 " & Request("obrigCampo2_frm1") & "<br>"
Response.Write "3 " & Request("obrigCampo3_frm1") & "<br><br>"

Response.Write "Form2 <br>"
Response.Write "1 " & Request("obrigCampo1_frm2") & "<br>"
Response.Write "2 " & Request("obrigCampo2_frm2") & "<br>"
Response.Write "3 " & Request("obrigCampo3_frm2") & "<br>"

Response.Write "hidden " & Request("acao") & "<br>"
Response.Write "hidden " & Request("G") & "<br>"
%>

.Andreia. · Agosto 7, 2009

opte por fazer a validação com javascript, filtrando pra validar só a div que você selecionou. a validação do asp é mais pra segurança

jgd · Agosto 10, 2009

Andreia...

Putz Meu! Fui implementar a sua dica no projeto... Apareceu outro problema...

a função: function validacampos() do fecosão té pegando...

Porque? Porque tem mais de um form na minha página:

Preciso listar todos os campos independente o numeros de forms. Mais a função : function validacampos() acima..

Se tiver mais de um form... Ela deixa passar.

Alguma outra dica ???

JGD

Entrar

innerHTML Por opção I.E X Fire Fox

Pergunta

jgd

Link para o comentário

Compartilhar em outros sites

6 respostass a esta questão

Posts Recomendados

.Andreia.

Link para o comentário

Compartilhar em outros sites

jgd

Link para o comentário

Compartilhar em outros sites

.Andreia.

Link para o comentário

Compartilhar em outros sites

jgd

Link para o comentário

Compartilhar em outros sites

.Andreia.

Link para o comentário

Compartilhar em outros sites

jgd

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades