Como pegar valor do campo radio checado

webfuture · Novembro 8, 2007

Olá pessoal, estou com uma dúvida aqui, gostaria de um help de vocês, é o seguinte, tenho um formulário onde tem 6 campos com radio button com nomes iguais e somente mudando o valor, quando o usuario clica sobre o button verifico se ele marcou alguma opção, se nao marcou dou erro e para ele prosseguir tem que marcar, se tiver marcado, mando as informacoes para uma pagina via ajax e depois dou um alert, porém, no meio deste processo precisava saber qual o valor do campo radio marcado, e não sei como fazer isto, alguém pode me ajudar nisto?

Vejam o script:

var xmlHttp;
var id_membro;

function createXMLHttpRequest() {
	if (window.ActiveXObject) {
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	else if (window.XMLHttpRequest) {
		xmlHttp = new XMLHttpRequest();
	}
}

function classificar_usuario(id_membro){
if (classificar.classificacao[0].checked == false && classificar.classificacao[1].checked == false && classificar.classificacao[2].checked == false && classificar.classificacao[3].checked == false && classificar.classificacao[4].checked == false && classificar.classificacao[5].checked == false) { alert("Antes de classificar você precisa selecionar ao menos uma opção"); classificar.classificacao[0].focus(); return false;}
createXMLHttpRequest();
document.getElementById("opcoes_cl").innerHTML = "";

//preciso pegar o valor do campo radio marcado aqui....

alert(document.getElementById("classificacao").value;)

xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("get", "classifica_usuario1.asp?im=" + id_membro, true);
xmlHttp.send(null);
}

function handleStateChange() {
if(xmlHttp.readyState == 1) {
document.getElementById("classificando").innerHTML = "<br><img src=images/indicator.gif border=0> gravando aguarde...";
	 }

if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
document.getElementById("classificando").innerHTML = "";
alert(xmlHttp.responseText)
}
}

Formulario:

<span id="classificando" class="pastas"></span>

<span id="opcoes_cl">
<form action="" name="classificar" method="post">
<table BGCOLOR="#FFFFFF" width="100%">
<Tr>
<td height="5"></td>
</tr>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="2">
<tr bgcolor="#f8f8f8">
<td><input type="radio" name="classificacao" value="1"></td>
<Td class="pastas">Opcao 1</td>
</tr>
</table>
</td>
</tR>
<Tr>
<td height="5"></td>
</tr>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="2">
<tr bgcolor="#f8f8f8">
<td><input type="radio" name="classificacao" value="2"></td>					
<Td class="pastas">Opcao 2</td>
</tr>
</table>
</td>
</tR>
<Tr>
<td height="5"></td>
</tr>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="2">
<tr bgcolor="#f8f8f8">
<td><input type="radio" name="classificacao" value="3"></td>
<Td class="pastas">Opcao 3</td>
</tr>
</table>
</td>
</tR>
<Tr>
<td height="5"></td>
</tr>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="2">
<tr bgcolor="#f8f8f8">
<td><input type="radio" name="classificacao" value="4"></td>
<Td class="pastas">Opcao 4</td>
</tr>
</table>
</td>
</tR>
<Tr>
<td height="5"></td>
</tr>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="2">
<tr bgcolor="#f8f8f8">
<td><input type="radio" name="classificacao" value="5"></td>
<Td class="pastas">Opcao 5</td>
</tr>
</table>
</td>
</tR>
<Tr>
<td height="5"></td>
</tr>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="2">
<tr bgcolor="#f8f8f8">
<td><input type="radio" name="classificacao" value="6"></td>
<Td class="pastas">Opcao 6</td>
</tr>
</table>
</td>
</tR>
<tr>
<td height="5"></td>
</tr>
<tr>
<td align="center"><input type="button" class="botao" OnClick="classificar_usuario(<%Response.Write id_membro%>);return false;" value="Classificar"></td>
</tr>
<tr>
<td height="5"></td>
</tr>
</table>
</form>
</span>

Tentei fazer com o document.getElementById.... mas não deu certo, acredito que por causa que existam mais de um com o mesmo nome...

Xavier

andreia_sp · Novembro 9, 2007

O que eu consegui pensar aqui sao 3 formas:

- funcao no onclick do botao pegando o valor daquele objeto

- um hidden (input type="hidden") onde assim q você marcar um radio ele seta o valor no hidden

- um FOR verificando qual radio está selecionado e se estiver, pegar o valor dele

webfuture · Novembro 10, 2007

Olá andreia_sp, valeu pela resposta, tentei da segunda forma que você falou mas não consegui, não sei se porque coloquei da forma errada no código, mas naquela parte do código coloquei:

var sValor = document.getElementById("opcao_campo");

sValor.SetAttribute("value", "1");

A principio pensei em colocar o valor "1" para qualquer opcao selecionada para ver se dava certo, ai depois dava um jeito de pegar o valor selecionado pelo usuario, mas nao consegui, ele sempre da erro de Objeto Esperado, fiz diversos testes mas nao consegui ainda, pensei em uma forma de fazer o for mas também ainda não consegui, se souber porque não fucniona ou como fazer isto funcionar....

Valeu,

Xavier

GuttoSP · Novembro 10, 2007

JAVASCRIPT

function classificar_usuario(id_membro) {

for (i = 0; i < 6; i++) {

if (document.classificar["classificacao["+i+"]"].checked != false) {

createXMLHttpRequest();

//document.getElementById("opcoes_cl").innerHTML = "";

alert(document.classificar["classificacao["+i+"]"].value);

xmlHttp.onreadystatechange = handleStateChange;

xmlHttp.open("get", "classifica_usuario1.asp?im=" + id_membro, true);

xmlHttp.send(null);

}

alert("Antes de classificar você precisa selecionar ao menos uma opção");

document.classificar["classificacao[0]"].focus();

return false;

}

No formulário acrescente o id dos campos: id="classificacao[0]", id="classificacao[1]", id="classificacao[2]" ...

webfuture · Novembro 12, 2007

Olá GuttoSP, valeu pelo código, a única coisa que notei foi que mesmo você marcando uma opção e ele prosseguindo com a ação depois de tudo feito ele ainda da o erro, acredito que por causa do for que tem que ir até 6, ou seja, se voce marca a primeira opção ele prossegue com a função, ai vai para o 2, se nao esta marcado a partir dai ele da erro e assim por diante, existe alguma opção que fale que o for tenha que parar quando o campo for checado ?

To dando uma procurada aqui também...

Xavier

GuttoSP · Novembro 12, 2007

Acrescente um return true logo depois de xmlHttp.send(null);, dentro do for

xmlHttp.send(null);
				return true;

webfuture · Novembro 12, 2007

Olá GuttoSP me tira uma dúvida, quando você falou para acrescentar o id=classificacao[0]... seria para deixar o name="classificacao" e ir acrescentando os ids para cada um deles? Pois se deixo os ids e nomes com [0]... ele deixa selecionar mais de um, agora noto que esta acontecendo o seguinte, meu codigo esta com name="classificaao" e id="classificacao[0]..." ai ele so funciona se marco a primeira opção, se marco alguma das outras ele não deixa prosseguir....

Me da mais um help ?

Xavier

GuttoSP · Novembro 12, 2007

O name sempre será o mesmo, classificacao, mas a id deverá ser diferente, como no code abaixo:

<script>
var xmlHttp;
var id_membro;

function createXMLHttpRequest() {
	if (window.ActiveXObject) {
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	else if (window.XMLHttpRequest) {
		xmlHttp = new XMLHttpRequest();
	}
}

	function classificar_usuario(id_membro) {
		for (i = 0; i < 6; i++) {
			if (document.classificar["classificacao["+i+"]"].checked != false) {			
				createXMLHttpRequest();
				//document.getElementById("opcoes_cl").innerHTML = "";
				alert(document.classificar["classificacao["+i+"]"].value);
				xmlHttp.onreadystatechange = handleStateChange;
				xmlHttp.open("get", "classifica_usuario1.asp?im=" + id_membro, true);
				xmlHttp.send(null);
				return true;
			}
		}
		alert("Antes de classificar você precisa selecionar ao menos uma opção");
		document.classificar["classificacao[0]"].focus();
		return false;
	}

function handleStateChange() {
if(xmlHttp.readyState == 1) {
document.getElementById("classificando").innerHTML = "<br><img src=images/indicator.gif border=0> gravando aguarde...";
	 }

if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
document.getElementById("classificando").innerHTML = "";
alert(xmlHttp.responseText)
}
}
</script>
Formulario:

<span id="classificando" class="pastas"></span>

<span id="opcoes_cl">
<form action="" name="classificar" method="post">
<table BGCOLOR="#FFFFFF" width="100%">
<Tr>
<td height="5"></td>
</tr>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="2">
<tr bgcolor="#f8f8f8">
<td><input type="radio" name="classificacao" id="classificacao[0]" value="1"></td>
<Td class="pastas">Opcao 1</td>
</tr>
</table>
</td>
</tR>
<Tr>
<td height="5"></td>
</tr>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="2">
<tr bgcolor="#f8f8f8">
<td><input type="radio" name="classificacao" id="classificacao[1]" value="2"></td>					
<Td class="pastas">Opcao 2</td>
</tr>
</table>
</td>
</tR>
<Tr>
<td height="5"></td>
</tr>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="2">
<tr bgcolor="#f8f8f8">
<td><input type="radio" name="classificacao" id="classificacao[2]" value="3"></td>
<Td class="pastas">Opcao 3</td>
</tr>
</table>
</td>
</tR>
<Tr>
<td height="5"></td>
</tr>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="2">
<tr bgcolor="#f8f8f8">
<td><input type="radio" name="classificacao" id="classificacao[3]" value="4"></td>
<Td class="pastas">Opcao 4</td>
</tr>
</table>
</td>
</tR>
<Tr>
<td height="5"></td>
</tr>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="2">
<tr bgcolor="#f8f8f8">
<td><input type="radio" name="classificacao" id="classificacao[4]" value="5"></td>
<Td class="pastas">Opcao 5</td>
</tr>
</table>
</td>
</tR>
<Tr>
<td height="5"></td>
</tr>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="2">
<tr bgcolor="#f8f8f8">
<td><input type="radio" name="classificacao" id="classificacao[5]" value="6"></td>
<Td class="pastas">Opcao 6</td>
</tr>
</table>
</td>
</tR>
<tr>
<td height="5"></td>
</tr>
<tr>
<td align="center"><input type="button" class="botao" onClick="classificar_usuario('27');" value="Classificar"></td>
</tr>
<tr>
<td height="5"></td>
</tr>
</table>
</form>
</span>

webfuture · Novembro 12, 2007

Olá GuttoSP, valeu, agora funcionou direitinho...

obrigado,

Xavier

Arquivado

Como pegar valor do campo radio checado

Recommended Posts

webfuture 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

andreia_sp 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

webfuture 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

GuttoSP 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

webfuture 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

GuttoSP 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

webfuture 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

GuttoSP 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

webfuture 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante