Ir para conteúdo

POWERED BY:

Arquivado

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

Marcos Barbosa

Usando o metodo POST numa função JavaScript

Por , em Javascript

Recommended Posts

Marcos Barbosa    1

Marcos Barbosa
Postado

Uso uma função em JavaScript que serve para eu abrir qualquer arquivo dentro de uma DIV chamada conteudo, funciona perfeitamente com o metódo GET, então comecei a pesquisar sua utilização com o metódo POST, cheguei até o site http://www.openjs.com/articles/ajax_xmlhttp_using_post.php.

Baseado nele eu fiz a função:

abrirPag_Post

function abrirPag_Post(formulario, valor){
	
	var url = valor;
	
	// getElementById - paga o valor do campo. - indicação e exemplos - http://www.codigofonte.net/dicas/javascript/717_estruturas-de-condicao-de-javascript
	// elements - Permite aceder o valor de um elemento - indicação e exemplos - http://translate.google.com.br/translate?hl=pt-BR&sl=en&u=http://www.javascriptkit.com/jsref/elements.shtml&ei=sHcOTLiKMsP68Aad08DWCA&sa=X&oi=translate&ct=result&resnum=1&ved=0CBwQ7gEwAA&prev=/search%3Fq%3Delements%255Bi%255D%26hl%3Dpt-BR%26prmd%3Dv
	
	valorCampo = document.getElementById(formulario);
 
	xmlRequest.open("POST",url,true);
    
	
	xmlRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	xmlRequest.setRequestHeader("Content-length", params.length);
	xmlRequest.setRequestHeader("Connection", "close");
	
        // uso o for para ler todos os inputs do formulário e enviar um arquivo (bem imagino está correto) 
	for (i=0; i < valorCampo.elements.length; i++){

		params += valorCampo.elements[i].value;
	}
	
	xmlRequest.onreadystatechange = mudancaEstado;
	xmlRequest.send(params); 

}

Tenho um local onde chamo essa função e estou fazendo assim:

 

resultado.php

  <script language="javascript" src="instrucao.js"></script>

  // no form desse arquivo estou chamando a função e passando os parametros.
  <?php
    echo "<form name='frm_resultado' method='post' action='abrirPag_Post('frm_resultado', 'frm_resultado1.php')'> ";       
  ?>

  <input type='submit' name='enviar' value='Enviar' />

Quando clico no botão enviar, está ocorrendo o erro:

The requested URL /teste/admin/abrirPag_Post( was not found on this server.

 

Se eu passar os parametros no input

<?php
echo"
 <input type='submit' name='enviar' value='Enviar' onclick='abrirPag_Post('frm_resultado','frm_resultado1.php')'/>
";
?>

Ñ acontece nada, ele fica na mesma página.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

faça algo como:

echo '<form name="frm_resultado" method="post" action="" onsubmit="funcao_envia_form_ajax()">';
lembrando de dar um return false; para o default do submit não ocorrer.

 

aqui tem um exemplo de formulário via POST com AJAX

http://forum.imasters.com.br/index.php?/topic/393224-fazer-tudo-na-div-idconteudo/page__view__findpost__p__1536024

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marcos Barbosa    1

Marcos Barbosa
Postado

Willian, eu analisei o exemplo que você indicou, mas ainda ñ consegui atingir um objetivo, quando eu clico bo botão de enviar, é como se ñ acontecesse nada, ele fica na mesma página. Vou postar a forma que fiz e agradeço se você puder me indicar onde estou errando:

 

instrucao.js

function f_ajx(form,valor)
{
	var url = valor;
	var frm = document.getElementById(form)
	var inputs = frm.getElementsByTagName('input')
	
	var dados = "";
	for (var i = 0; i < inputs.length; i++)
	{
		dados += inputs[i].name+"="+inputs[i].value+"&";
	}
	

	xmlRequest.open("POST",url,true);
	xmlRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	
	xmlRequest.send(dados);
	xmlRequest.onreadystatechange = function(){
		id("conteudo").innerHTML = xmlRequest.responseText;
	}
	
}
	
function id(el)
{	return document.getElementById(el); }

frm_resultado.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php include("conexao.php"); 
	  include("rotinas.php");
?>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        
		<title>Untitled Document</title>
        <style type="text/css">
		<!--
		-->
		</style>
		<link href="estilos.css" rel="stylesheet" type="text/css" />

		<script language="javascript" src="ajax.js"></script>
		<script language="javascript" src="instrucao.js" type="text/javascript"></script>
        
	</head>
	<body>
       <table width="63%" height="149" border="1" align="center" cellpadding="0" cellspacing="0" bgcolor="#E0FFFF">
       <tr>
		<td>

		<form action = "#" method="post" onsubmit="f_ajx('frm_resultado','form_resultado1.php')"> 
      


		  <table width="87%" height="122" border="0" align="center" cellpadding="0" cellspacing="0">
		   
		    <tr>
		      <td align="right"><strong>Data Exame:</strong></td>
		      <td width="71"><strong>
		        <input name="txt_dataexame" type="text" id="txt_dataexame" size="10" maxlength="10" onkeypress="formatar(this, '##/##/####');" value="<?php $txt_dataexame; ?>" />
		      </strong></td>
		      <td width="57" align="right"><strong>Hora</strong></td>
		      <td width="163"><input name="txt_horaexame" type="text" id="txt_horaexame" size="8" maxlength="8" value="<?php $txt_horaexame; ?>" /></td>
	        </tr>
		    <tr>
                  
                  <td align="center" colspan="8">

                  	<input type='button' name='enviar' value='Enviar' />
                  </td>
                  
		  </tr>
	      </table>
          
		</form></td>
        </tr>
        </table>
        
	</body>
</html>

 

 

faça algo como:

echo '<form name="frm_resultado" method="post" action="" onsubmit="funcao_envia_form_ajax()">';
lembrando de dar um return false; para o default do submit não ocorrer.

 

aqui tem um exemplo de formulário via POST com AJAX

http://forum.imasters.com.br/index.php?/topic/393224-fazer-tudo-na-div-idconteudo/page__view__findpost__p__1536024

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Então cara, se você usar um input type="button", você deve invocar a rotina ajax apartir dele

você só aplicaria no onsubmit do form, se você tivesse usando um input type="submit", por isso mencionei o return false;

 

outro 'erro', foi ter esquecido que essa implementação depende que o form tenha um ID definido. No teu html não tinha.

exemplo:

<html>
<head>
<script type="text/javascript">
function GetXMLHttp(){
	var xmlHttp;
	try{
		xmlHttp = new XMLHttpRequest();
	}
	catch(ee){
		try{
				xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
		}catch(e){
			try{
				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
			}catch(e){
				xmlHttp = false;
			}
		}
	}
	return xmlHttp;
}
var xmlHttp = GetXMLHttp();
function f_ajx( form, valor )
{
	var inputs = id( form ).getElementsByTagName('input')
	
	var dados = "";
	for (var i = 0; i < inputs.length; i++)
	{
		dados += inputs[i].name+"="+inputs[i].value+"&";
	}
	
	alert( dados );

	xmlHttp.open( "POST", id( form ).action, true );
	xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	
	xmlHttp.send(dados);
	xmlHttp.onreadystatechange = function(){
			id("conteudo").innerHTML = xmlHttp.responseText;
	}
}   
function id( el ){
	return document.getElementById( el ); 
}
</script>
</head>
<body>

		<form action="form_resultado1.php" method="post" id="frm_resultado">
			
			<strong>Data Exame:</strong>
			<input name="txt_dataexame" type="text" id="txt_dataexame" size="10" maxlength="10" value="00/00/0000" />

			<strong>Hora</strong>
			<input name="txt_horaexame" type="text" id="txt_horaexame" size="8" maxlength="8" value="00:00:00" /></td>

			<input type="button" name="enviar" value="Enviar" onclick="f_ajx('frm_resultado')" />
		</form>
		<div id="conteudo"></div>

</body>
</html>
simplifiquei o teu html, pq não consigo trabalhar com <table> assim..

 

form_resultado1.php

<?php

	var_dump( $_POST );

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