3 replies to this topic

[newDev]

Olá pessoal, venho aqui nesse fórum pedir ajuda em algo que estou precisando urgentemente...

Vou ser breve:

Tenho um campo List (vencimento) e outro grupo de radio (periodicidade).

E abaixo desses dois campos eu tenho um texto normal escrito: "Total: R$0,00"...

Preciso que quando alterado algum dos campos (vencimento ou/e periodicidade), uma seja chamada uma função que pega os valores dos campos, acessa um aquivo* e retorne para o texto "Total: R$0,00" o valor obtido.

* Esse arquivo se chama valores.php, ele pega os dados via get de vencimento e periodicidade, faz uns calculos e imprime na tela o resultado neste formato: 0,00

Já pesquisei bastante e não achei nada a respeito, então, se alguem poder me dar uma força nisso ficaria grato.

[Marcio Toloi]

Olá amigo!

Estive analisando seu caso e montei um esqueminha aqui... espero que ajude. Vamos lá.

Pelo que entendi você possui um formulário HTML com os seguintes campos:

[Combobox] vencimento

(radio) periodicidade 1
(radio) periodicidade 2
(radio) periodicidade 3... etc.

Para tal, montei o seguinte HTML:

<select size="1" id="vencimento" onChange="atualizaDados();">
  <option value="1">opção 1</option>
  <option value="2">opção 2</option>
</select>

<input type="radio" value="1" name="period" onClick="atualizaDados();">
<input type="radio" value="2" name="period" onClick="atualizaDados();">
<input type="radio" value="3" name="period" onClick="atualizaDados();">

Logo abaixo incluí uma DIV que irá receber o texto com os valores que vc precisa:

<p>
  <div>
	<b>
	  Total: R$ <span id="valor">0,00</span>
	</b>
  </div>
</p>

Agora, vamos fazer nossas funções que irão utilizar o Ajax para buscar os dados do 'valores.php'.

<script language="javascript">

//Antes de mais nada, instanciamos nosso Ajax.
var ajax = new instanciaAjax();
// *A função instanciaAjax() é responsável por verificar qual browser
// o usuário possui e, com isso, instanciar o Ajax adequado.

function atualizaDados() {

  //Pegamos os valores dos campos.
  var period	 = document.getElementsByName('period').value;
  var vencimento = document.getElementById('vencimento')
  vencimento = vencimento.options[vencimento.selectedIndex].value;
  
  //Montamos a URL que irá receber os dados dos campos via GET.
  var url = 'valores.php?period='+ period +'&venc='+ vencimento;

  //Configuramos a função que irá processar o resultado do PHP.
  ajax.onreadystatechange = atualizaValor;

  //Enviamos a requisição para o PHP.
  ajax.open("GET", url, true);
  ajax.send(null);
}


function atualizaValor() {

  //Verificamos se o Ajax já terminou de receber os dados.
  if (ajax.readyState == 4) {
	
	//Então atualizamos o label valor com o novo texto.
	document.getElementById('valor').innerHTML = ajax.responseText;
  }
}

</script>

Algumas considerações...
- Eu não coloquei a função que gera a instância do Ajax porque cada programador normalmente tem seu método de verificar os browsers, e então gerar o Ajax, mas caso precise dela também, é só me falar.

Espero que tenha ajudado. Abraço!

Marcio Toloi

Edição feita por: Marcio Toloi, 18/01/2007, 21:15.

[newDev]

Marcio, nem sei como te agradecer cara, você não sabe o como isso me ajudou!!

Mas em todo caso, muito obridado , se precisar de algo, farei o possível para ajudar.

Até mais!

- Eu não coloquei a função que gera a instância do Ajax porque cada programador normalmente tem seu método de verificar os browsers, e então gerar o Ajax, mas caso precise dela também, é só me falar.

Poderia me passar algo?



[editado]
Dei uma olhada em umas apostilas e fiz a minha própria instância, mais uma vez obrigado pela ajuda!
[/editado]

[Marcio Toloi]

Olá de novo.... então, demorei um pouco na resposta, mas aqui vai a função que eu utilizo para instanciar o Ajax.

//
// Define a list of Microsoft XML HTTP ProgIDs.
//
var XMLHTTPREQUEST_MS_PROGIDS = new Array(
  "Msxml2.XMLHTTP.7.0",
  "Msxml2.XMLHTTP.6.0",
  "Msxml2.XMLHTTP.5.0",
  "Msxml2.XMLHTTP.4.0",
  "MSXML2.XMLHTTP.3.0",
  "MSXML2.XMLHTTP",
  "Microsoft.XMLHTTP"
);

//
// Retorna um objeto do tipo XMLHttpRequest.
//
function instanciaAjax()
{
  var httpRequest = null;

  // Cria a instância apropriada para o browser.
  if (window.XMLHttpRequest != null)
	httpRequest = new window.XMLHttpRequest();
  else if (window.ActiveXObject != null)
  {
	// Senão, cria uma instância para IE.
	var success = false;
	for (var i = 0; i < XMLHTTPREQUEST_MS_PROGIDS.length && !success; i++)
	{
	  try
	  {
		httpRequest = new ActiveXObject(XMLHTTPREQUEST_MS_PROGIDS[i]);
		success = true;
	  }
	  catch (ex)
	  {}
	}
  }
  
  // Exibe um erro caso nenhuma das instâncias tenha sido criada.
  if (httpRequest == null)
	alert("Error in HttpRequest():\n\n"
	  + "Cannot create an XMLHttpRequest object.");

  return httpRequest;
}

Essa implementação foi publicada no site www.brainjar.com, o qual recomendo que acesse. Não possui muito conteúdo, mas os que tem, estão minunciosamente explicados.

Abraço!