Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Fábio BN

Ajax: checkbox, radio e Enter

Por , em Javascript

Recommended Posts

Fábio BN    17

Fábio BN
Postado
- No meu formulário tenho um botao do tipo "checkbox" e um do tipo "radio", este botões estão com um problema.


- O "checkbox" mesmo sem estar selecionado, ele está passando o valor dele pelo post como se estivesse clicado.


- Já o "radio" possuo 2 botões de "radio" com o mesmo nome, um de "sim" outro de "não", acontece que só esta passando o valor do primeiro, mesmo se eu selecionar o botão "não", o valor que está passando é apenas do primeiro botão de "sim", eles tem o mesmo nome para que o intercâmbio possa ser feito na tela na seleção.


Outra dúvida, o botão de enviar ( type="button" ) não funciona com o Enter, apenas funciona se clicar nele.


Existe alguma forma de corrigir esses problemas citados acima?


Obrigado

Fábio!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ronaldo Marcos    11

Ronaldo Marcos
Postado

Quanto ao Rádio Sim/nao:

Cada um deles apesar de estar com values diferentes né, senão não faria sentido usá-los, não vou o usar o nome mais sim o Id no exemplo certo?

Digamos que fosse isso: Você pode viajar? () sim () não

Voce precisa pegar qual está marcado usando uma função como essa:

 

function getPegaViagem() {
for (i=0; i<document.forms["nomeformulario"].viajar.length; i++)
{
if (document.forms["nomeformulario"].viajar.checked)
{
return document.forms["nomeformulario"].viajar.value;
}
}
}

 



o 'nomeformulario' é o nome do formulário que comporta os ítens e 'viajar' é o ID que coloquei no input radio, ok

quando voce clica no botão enviar acredito que esteja executando uma açao parecida com a de baixo, vou colocar nela como deve usar a funcao acima e vc ajusta para o seu

 

function enviaFormulario() {
var oForm = document.getElementById("nomeformulario");
var sURL = oForm.action;

// aqui é importante para você

var opcaoViaja = getPegaViagem(); //viu que ele chama a função anterior aqui Fábio Cn?
var pessviajar = opcaoViaja;

// o resto abaixo é tudo padrão

oXMLhttp.open("post", sURL, true);
oXMLhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

oXMLhttp.onreadystatechange = function() {

if (oXMLhttp.readyState == 4) {
//Tratar a resposta do servidor
var arResult = oXMLhttp.responseText.split(",");
escreveMensagemPess(arResult[0]);
}
};

var sXml = criaXMLViagem(pessviajar);
xmldom = carregaObjetoComXML(sXml);
oXMLhttp.send(xmldom);
}

 

Quanto ao Checkbox, tem como mandar o código que gera ele e dizer que valor que ele ta enviando?

Quanto ao type=button, se vc ta usando onclick nele, deve aceitar o enter sim, desde que o foco esteja nele claro, se vc quer que ele esteja com foco quando termina de preencher algum outro campo vai ter de criar uma outra ação antes, mas seria interessante a gente ver o que você ja fez, isto é, deixe-nos ver a parte do código que está isso....

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fábio BN    17

Fábio BN
Postado

- Oi, no caso, para fazer o Intercâmbio dos botão rádio, eu deixo eles com o mesmo "name" isso faz como que independente da seleção, seja recebido apenas o conteúdo do primeiro, que é "sim". O radio com o valor "nao" não está sendo processado mesmo que selecionado.

-Já o Checkbox está passando o valor "sim" mesmo que ele não esteja selecionado.
- E o "button" não funciona com o Enter, apenas se clicar nele.

 

Segue meu Código:

 

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sem título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
// Função Ajax 

function acao(){
var xmlhttp;

// Identifica Navegador
if (window.XMLHttpRequest) { // IE7+,Mozilla, Safari,Chrome ...
xmlhttp = new XMLHttpRequest();
xmlhttp.overrideMimeType('text/xml');

} else if (window.ActiveXObject) { // IE5 ou IE6
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

}else{
alert ("Seu navegador não tem suporte para ajax.");
}
// Fim de Identifica Navegador
	xmlhttp.onreadystatechange = function(){
		if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
			document.getElementById("resposta_do_servidor").innerHTML = xmlhttp.responseText;
			}else{
			return false;
		}		
	}


// execução do código aqui
var var_nome = document.getElementById("nome").value;
var var_email = document.getElementById("email").value;
var var_viajar = document.getElementById("viajar").value;
var var_acompanhado = document.getElementById("acompanhado").value;
var campos = "nome="+var_nome+"&email="+var_email+"&viajar="+var_viajar+"&acompanhado="+var_acompanhado;

xmlhttp.open("POST", "recebe.asp", true);
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');/*linha chave para o método POST*/
xmlhttp.setRequestHeader("Content-length", campos.length); // Comprimento do conteúdo=comprimento dos dados a enviar
xmlhttp.send(campos);
document.form_post.reset();

}
// Fim de Função Ajax
</script>

</head>

<body>
 <div id="resposta_do_servidor" style="color:#ff0000;"> </div>
<form name="form_post" id="form_post">
  <p>Nome: 
    <input type="text" id="nome">
  </p>
  <p> E-mail: 
    <input type="text" id="email">
  </p>
  <p>Vai viajar: Sim 
    <input type="radio" name="viajar"  value="sim" id="viajar" checked>
    Não 
    <input type="radio" name="viajar"  value="nao" id="radio">
  </p>
  <p>Se for acompanhado, clique aqui: 
    <input type="checkbox" name="acompanhado" id="acompanhado" value="sim">
  </p>
  <p>
    <input type="button" onclick="acao()" value="Enviar">
  </p>
</form>
</body>
</html>

ASP:

<%
nome = replace(request.form("nome"),"'","'")
email = replace(request.form("email"),"'","'")
viajar = replace(request.form("viajar"),"'","'")
acompanhado = replace(request.form("acompanhado"),"'","'")

response.write nome&"<br>"&email&"<br>"&viajar&"<br>"&acompanhado

%>

Se vc poder alterar o meu código com as correções, agradeço.

 

Obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ronaldo Marcos    11

Ronaldo Marcos
Postado

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Documento sem título</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">

// Função Ajax

 

function acao(){

var xmlhttp;

 

// Identifica Navegador

if (window.XMLHttpRequest) { // IE7+,Mozilla, Safari,Chrome ...

xmlhttp = new XMLHttpRequest();

xmlhttp.overrideMimeType('text/xml');

 

} else if (window.ActiveXObject) { // IE5 ou IE6

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

 

}else{

alert ("Seu navegador não tem suporte para ajax.");

}

// Fim de Identifica Navegador

xmlhttp.onreadystatechange = function(){

if(xmlhttp.readyState == 4 && xmlhttp.status == 200){

document.getElementById("resposta_do_servidor").innerHTML = xmlhttp.responseText;

}else{

return false;

}

}

 

 

// execução do código aqui

var var_nome = document.getElementById("nome").value;

var var_email = document.getElementById("email").value;

 

 

//alterei daqui .....

function getPegaViagem() {

for (i=0; i<document.forms["form_post"].viajar.length; i++)

{

if (document.forms["form_post"].viajar.checked)

{

return document.forms["form_post"].viajar.value;

}

}

}

 

var var_viajar = getPegaViagem();

 

if (document.getElementById("acompanhado").checked == true) //verifiquei vendo se ta marcado ou nao usando a propriedade checked mesmo pois era só um.

{

var var_acompanhado = "sim";

}else{

var var_acompanhado = "Não";

}

 

//....até aqui

 

var campos = "nome="+var_nome+"&email="+var_email+"&viajar="+var_viajar+"&acompanhado="+var_acompanhado;

 

 

 

xmlhttp.open("POST", "recebe.asp", true);

xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');/*linha chave para o método POST*/

xmlhttp.setRequestHeader("Content-length", campos.length); // Comprimento do conteúdo=comprimento dos dados a enviar

xmlhttp.send(campos);

document.form_post.reset();

 

}

// Fim de Função Ajax

</script>

 

</head>

 

<body>

<div id="resposta_do_servidor" style="color:#ff0000;"> </div>

<form name="form_post" id="form_post">

<p>Nome:

<input type="text" id="nome">

</p>

<p> E-mail:

<input type="text" id="email">

</p>

<p>Vai viajar: Sim

<input type="radio" name="viajar" value="sim" id="viajar" checked>

Não

<input type="radio" name="viajar" id="viajar" value="nao" id="radio"><!-- coloquei ID aqui também, estava só no de cima -->

</p>

<p>Se for acompanhado, clique aqui:

<input type="checkbox" name="acompanhado" id="acompanhado" >

</p>

<p>

<input type="button" onclick="acao()" value="Enviar">

</p>

</form>

</body>

</html>

 

No asp não muda nada né...

 

Quanto ao Enter ele funciona por padrão como eu disse, desde que o foco esteja no botão, vou postar a parte algo que talvez seja o que você quer no Enter...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ronaldo Marcos    11

Ronaldo Marcos
Postado

Veja só, como eu disse se o foco estiver no botao nao é necessário, se não estiver funcionando talvez tenha alguma outra coisa no código atrapalhando (nesse que mandou acima não tem nada que impeça que funcione):

 

 


<script type='text/javascript'>
function VerificaEnter(ev) {
if (window.event && window.event.keyCode == 13 || ev.which == 13) {
acao();
}
}
</script>

 

E alterei o form assim:

 

<form name="form_post" id="form_post" onKeyPress="VerificaEnter(event)">

 

Ele vai acionar a função acao(), em qualquer lugar que der enter dentro do Form, isso que você queria?

 

Se for isso tem de lembrar que 'usuarios' dão enter em tudo (exceto quando deveriam fazer), isso vai enviar sem preencher outros campos, então você vai ter de validar os campos obrigatórios ante de executar acao();

 

..é isso?


Compartilhar este post

Link para o post
Compartilhar em outros sites

Fábio BN    17

Fábio BN
Postado

Obrigado, só não consegui fazer funcionar o botão para aceitar o Enter, você poderia alterar ele no fonte?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sem título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
// Função Ajax 

function acao(){
var xmlhttp;

// Identifica Navegador
if (window.XMLHttpRequest) { // IE7+,Mozilla, Safari,Chrome ...
xmlhttp = new XMLHttpRequest();
xmlhttp.overrideMimeType('text/xml');

} else if (window.ActiveXObject) { // IE5 ou IE6
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

}else{
alert ("Seu navegador não tem suporte para ajax.");
}
// Fim de Identifica Navegador
	xmlhttp.onreadystatechange = function(){
		if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
			document.getElementById("resposta_do_servidor").innerHTML = xmlhttp.responseText;
			}else{
			return false;
		}		
	}


// execução do código aqui
var var_nome = document.getElementById("nome").value;
var var_email = document.getElementById("email").value;

function getPegaViagem() {
    for (i=0; i<document.forms["form_post"].viajar.length; i++)
    {
        if (document.forms["form_post"].viajar[i].checked)
        {
            return document.forms["form_post"].viajar[i].value;
        }
    }
}

var var_viajar = getPegaViagem();    

if (document.getElementById("acompanhado").checked == true) //verifiquei vendo se ta marcado ou nao usando a propriedade checked mesmo pois era só um.
        {
          var var_acompanhado = "sim";
        }else{
          var var_acompanhado = "Não";
        }
 

var campos = "nome="+var_nome+"&email="+var_email+"&viajar="+var_viajar+"&acompanhado="+var_acompanhado;

xmlhttp.open("POST", "recebe.asp", true);
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');/*linha chave para o método POST*/
xmlhttp.setRequestHeader("Content-length", campos.length); // Comprimento do conteúdo=comprimento dos dados a enviar
xmlhttp.send(campos);
document.form_post.reset();

}
// Fim de Função Ajax
</script>

</head>

<body>
 <div id="resposta_do_servidor" style="color:#ff0000;"> </div>
<form name="form_post" id="form_post">
  <p>Nome: 
    <input type="text" id="nome">
  </p>
  <p> E-mail: 
    <input type="text" id="email">
  </p>
  <p>Vai viajar: Sim 
    <input type="radio" name="viajar"  value="sim" id="viajar" checked>
    Não 
    <input type="radio" name="viajar"  value="nao" id="viajar">
  </p>
  <p>Se for acompanhado, clique aqui: 
    <input type="checkbox" name="acompanhado" id="acompanhado" value="sim">
  </p>
  <p>
    <input type="button" onclick="acao()" value="Enviar">
  </p>
</form>
</body>
</html>

Eu estou usando esse exemplo para aplicar num formulário maior, eu sempre mexi com ASP para validar os dados, mas com JS não entendo muito, vou ter que fazer aulas na Internet, você me ajudou muito, Obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ronaldo Marcos    11

Ronaldo Marcos
Postado

 

 

Eu também mexo mais com asp, só que resolvi aprender JS porque esse negócio de sair de página, refresh etc, não tolero mais, rs... Sinceramente, acredito que aulas na internet vai te complicar, eu nunca entendia direito como funcionava internamente o JS, e na internet ficava pior, hoje vejo que tem muita coisa na internet que não tem nada a ver... lembro da primeira vez que fui tentar criar uma coisa básica como chamar uma cidade depois de escolher o estado no combo, tem tantos 'tutoriais' na internet que mais complica que explica... sugiro se tiver tempo estudar com livros mesmo, tem um chamado 'Ajax-Guia de programação' de Emmanuel Borba, que ensina aplicando inclusive com Asp e exemplos práticos... se quiser posso te adiantar e mandar um 'roteiro' pra validar | gravar | reexibir dados | sem sair da página, só me passa um email depois....

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

troque esse button por um submit e execute o ajax no evento onsubmit do form. Ai o ENTER vai funcionar.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fábio BN    17

Fábio BN
Postado

Oi Ronaldo.
Eu já fiz muita coisa em ASP, mas tudo rodando após um post, após um redirect, e realmente preciso me atualizar, pois não dá mais para ficar dando refresh em tudo.
Para quem mexe com ASP ralmente JS é bem diferente os comandos, anotei o meu o nome do livro, vou comprar.

Me manda um e-mail no fabio.nascimento9898@gmail.com
Obrigado pela ajuda amigo!
Abraços!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito