[Resolvido] Loop pegando dados do formulário...

Eduardo Villa · Março 25, 2010

Tenho uma dúvida quanto a LOOP...

Preciso pegar os dados de um formulário dinamicamente.

Dei uma lida em getElementsByTagName(), mas não consegui adaptar...

Tenho está função que está funcionando perfeitamente, mas os itens estão fixos.

No caso até &funcao=inserir será dinâmico, pois poderá receber outros valores como INSERIR, EDITAR e EXCLUIR

function f_ajx(){
	var url = id('form_ajax').action;
	xmlRequest.open("POST", url, true);
	xmlRequest.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
	
	var dados = 
		   'login='+id('login').value+
           	   '&senha='+id('senha').value+
           	   '&funcao=inserir';		   
	xmlRequest.send(dados);
	xmlRequest.onreadystatechange = function(){
		id("conteudo").innerHTML = xmlRequest.responseText;
	}
}

William Bruno · Março 25, 2010

exemplo:

<html>
<head>
<script type="text/javascript">
function form2Qs( id_form )
{
	var form = document.getElementById( id_form );
	var inputs = form.getElementsByTagName('input');
	
	var qs = '?';
	for( var i=0; i<inputs.length; i++ )
	{
		qs += inputs[i].name+'='+inputs[i].value+'&';
	}
	return qs;
}
window.onload = function()
{
	alert( form2Qs('fm-ajx') );
	alert( form2Qs('fm-ajx2') );
}
</script>
</head>
<body>
	<form action="" method="" id="fm-ajx">
		<input type="text" name="nome" value="William" />
		<input type="text" name="sobrenome" value="Bruno" />
		<input type="text" name="status" value="ocupado" />
	</form>
	<form action="" method="" id="fm-ajx2">
		<input type="text" name="forum" value="iMasters" />
		<input type="text" name="sub" value="Javascript / DHTML" />
		<input type="text" name="membro" value="moderador" />
		<input type="text" name="cor" value="vermelho" />
	</form>
</body>
</html>

fiz aqui, pq tava sem sono

Eduardo Villa · Março 25, 2010

lá vai eu de novo...

está aparecendo uma tela branca escrito: "ERRO"

function f_ajx(){
	var url = id('form_ajax').action;
	xmlRequest.open("POST", url, true);
	xmlRequest.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
	
			var form = document.getElementById('form_ajax');
			var inputs = form.getElementsByTagName('input');
			
			var dados = '?';
			for( var i=0; i<inputs.length; i++ ){
				dados += inputs[i].name+'='+inputs[i].value+'&';
			}
			return dados;
		window.onload = function(){
			alert( form2Qs('form_ajax') );
		}
	/*var dados = 
			   'login='+id('login').value+
           	   '&senha='+id('senha').value+
           	   '&funcao=inserir';*/		   
	xmlRequest.send(dados);
	xmlRequest.onreadystatechange = function(){
		id("conteudo").innerHTML = xmlRequest.responseText;
	}
}

William Bruno · Março 25, 2010

hein?! oO

não mescle as funções.. use elas separadamente..

Eduardo Villa · Março 25, 2010

mas como vou separar se a parte que recebe os dados (var dados=...) fica dentro da outra...

William Bruno · Março 25, 2010

chame a função form2Qs() dentro da f_ajx(), não precisa redeclarar ou deixar o alert ali... muito menos o window.onload !

básico cara...

Eduardo Villa · Março 25, 2010

ok consegui fazer mas o &funcao não está recebendo o valor como no caso abaixo...

var dados = 
     'login='+id('login').value+
     '&senha='+id('senha').value+
     '&funcao=inserir';*/

fiz assim:

function f_ajx(){
	var url = id('form_ajax').action;
	xmlRequest.open("POST", url, true);
	xmlRequest.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
	
	function form2Qs(form_ajax){
        var form = document.getElementById(form_ajax);
        var inputs = form.getElementsByTagName('input');
        
        var dados = '?';
        for( var i=0; i<inputs.length; i++ ){
                dados += inputs[i].name+'='+inputs[i].value+'&';
        }
        return dados;
	}		   
	
	xmlRequest.send(dados);
	xmlRequest.onreadystatechange = function(){
		id("conteudo").innerHTML = xmlRequest.responseText;
	}
}

William Bruno · Março 25, 2010

a idéia era esta:

function form2Qs( form_ajax )
{
	var form = document.getElementById( form_ajax );
	var inputs = form.getElementsByTagName('input');

	var dados = '?';
	for( var i=0; i<inputs.length; i++ )
	{
		dados += inputs[i].name+'='+inputs[i].value+'&';
	}
	return dados;
}
function f_ajx()
{
	var url = id('form_ajax').action;
	xmlRequest.open("POST", url, true);
	xmlRequest.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

	var dados = form2Qs('form_ajax');// AQUI eu chamei a outra funcao

	xmlRequest.send(dados);
	xmlRequest.onreadystatechange = function()
	{
		id("conteudo").innerHTML = xmlRequest.responseText;
	}
}

você possui um input com name="funcao" ?

se nao, crie mais um paramtro na funcao form2Qs() para ser o valor da variavel funcao

Eduardo Villa · Março 25, 2010

Willian quando esperei você, fui tentando e consegui fazer assim:

será que mais pra frente poderá dar algum erro no sistema?

ai no form coloquei um INPUT hidden:

<input id="funcao" name="funcao" type="hidden" value="inserir" />

function f_ajx(){
	var url = id('form_ajax').action;
	xmlRequest.open("POST", url, true);
	xmlRequest.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
	
	function form2Qs(form_ajax){
        var form = document.getElementById(form_ajax);
        var inputs = form.getElementsByTagName('input');
        
        var dados = '?';
        for( var i=0; i<inputs.length; i++ ){
                dados += inputs[i].name+'='+inputs[i].value+'&funcao='.value;
        }
        return dados;
	}

	xmlRequest.send(dados);
	xmlRequest.onreadystatechange = function(){
		id("conteudo").innerHTML = xmlRequest.responseText;
	}
}

William Bruno · Março 25, 2010

bacana! com o hidden funciona tb

apenas considere melhor declarar as functions separadamente, como mostrei ali acima.

Eduardo Villa · Março 25, 2010

Muito obrigado meu amigo...

E desculpe te encher.

Mudei como você falou e coloquei assim:

var dados = form2Qs('form_ajax')+
	    '&funcao='.value;

Eduardo Villa · Março 31, 2010

Olá William,

Depois que funcionou a primeira vez tudo o sistema que abre na <DIV> do outro post e o LOOP.

Parou de funcionar do nada... Agora o formulário não abre mais na <DIV ID=CONTEUDO></DIV>

Obs: Se você puder abrir o POST novamente, para poder me ajudar...

William Bruno · Março 31, 2010

? não entendi nada.

Funciona uma vez, e não funciona mais ?

ou parou de funcionar tudo ?

Eduardo Villa · Março 31, 2010

kkkk

desculpe é qu está meio corrido aqui...

a ACTION do formulário não está mais sendo aberta dentro da <DIV>...

Eduardo Villa · Março 31, 2010

kkkk

desculpe é qu está meio corrido aqui...

a ACTION do formulário não está mais sendo aberta dentro da <DIV>...

De acordo com um outro post que vi do mesmo assunto que o meu, resolvi fazer algumas alterações e já estou alterando quanto a deixar o <A HREF='#'></A>

Segue abaixo os códigos...

FUNCOES.JS

var xmlhttp = getXmlHttpRequest();
function getXmlHttpRequest(){
	if(window.XMLHttpRequest){
		return new XMLHttpRequest();
	}else if(window.ActiveXObject){
		try{
			return new ActiveXObject("Msxml2.XMLHTTP");
		}catch (e){
			try{
				return new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (e){}
		}
	}
}
function Pag(_strNomePagina){
	xmlhttp.open("GET", _strNomePagina, true);
	xmlhttp.setRequestHeader("Content-Type", "text/html; charset=iso-8859-1");
	xmlhttp.setRequestHeader("Cache-Control", "no-store, no-cache, must-revalidate");
	xmlhttp.setRequestHeader("Cache-Control", "post-check=0, pre-check=0");
	xmlhttp.setRequestHeader("Pragma", "no-cache");
	xmlhttp.onreadystatechange = function(){
		if(xmlhttp.readyState==4){
			document.getElementById('conteudo').innerHTML = xmlhttp.responseText;
		}
	}
	xmlhttp.send(null);
}
function form2Qs(form_ajax){
	var form = document.getElementById(form_ajax);
	var inputs = form.getElementsByTagName('input');
	var textarea = form.getElementsByTagName('textarea');
	
	var dados = '?';
    for( var i=0; i<inputs.length; i++ ){
    	dados += inputs[i].name+'='+inputs[i].value+
				 textarea[i].name+'='+textarea[i].value+
				 '&funcao='.value;
    }
    return dados;
}
function f_ajx(){
	var url = id('form_ajax').action;
	xmlRequest.open("POST", url, true);
	xmlRequest.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
	
	var dados = form2Qs('form_ajax');// AQUI eu chamei a outra funcao
	
	xmlRequest.send(dados);
	xmlRequest.onreadystatechange = function(){
		id("conteudo").innerHTML = xmlRequest.responseText;
	}
}
function id(el){
	return document.getElementById(el);
}

NOTICIAS.PHP

<script language="javascript" src="../js/funcoes.js" type="text/javascript"></script>

if($funcao == "editar"){
	$id = $_GET["id"];
	$query = mysql_query("SELECT * FROM noticias WHERE id='$id'");
    $editarnoticias = mysql_fetch_array($query);
	echo "
	<form action='processa_noticias.php' id='form_ajax' method='post' target='conteudo'>
	<fieldset>
	<legend><span class='nome_tabela'> Editar Notícia - Nº".$id."</span> </legend>
	<input id='funcao' name='funcao' type='hidden' value='alterar' />
        <input id='id' name='id' type='hidden' value='".$id."' />
	<table width='90%'  border='0' cellspacing='2' cellpadding='2'>
	    <tr>
		<td width='13%' class='dados'>Título</td>
		<td width='87%'><input class='dados_resp' id='titulo' maxlength='60' name='titulo' type='text' value='".$editarnoticias['titulo']."' size='50' /></td>
	    </tr>
	    <tr>
		<td></td>
		<td><input class='botao' name='Submit'  onclick=\"f_ajx()\" type='submit' value='Salvar Dados' /></td>
	    </tr>
	</table>
  </fieldset>
</form>";
}

PROCESSA_NOTICIAS.PHP

<?php 
    echo $_POST['id']."<br />".$_POST['titulo'];
?>

William Bruno · Abril 1, 2010

	<td><input class='botao' name='Submit'  onclick=\"f_ajx()\" type='submit' value='Salvar Dados' /></td>

poxa cara... fica dificil te ajudar assim..

pq você voltou a usar o type="submit" ??

não lembra ?

http://forum.imasters.com.br/index.php?/topic/388297-conteudo-abre-na-div-com-get/page__view__findpost__p__1511781

precisa usar type="button" para disparar a função ajax, em vez de submeter o form pelo HTML !!

a menos que você saiba oque está fazendo, e seja capaz de impedir que o type="submit" trabalhe.. volte a usar o button!

Eduardo Villa · Abril 1, 2010

nossa que vergonha cara...

coloquei assim, mas não está funcionando a ação do botão!!!

<input class='botao' onclick='f_ajx()' type='button' value='Salvar Dados' />

William Bruno · Abril 1, 2010

a adaptação que você fez para textarea na função form2Qs() está errada.

O correto seria criar outro loop, e só ai então concatenar com o que o loop anterior(dos inputs), retornar.

debug a função, para ver se chegou a chamar pelo menos:

function f_ajx(){
        alert( 'Chamou a função!' );// se esse alert aparecer, o erro está em outro lugar
        var url = id('form_ajax').action;

Eduardo Villa · Abril 1, 2010

ok...

consegui fazer o LOOP do TEXTAREA.

mas quando vou recuperar os dados com o POST quando coloco VAR_DUMP($_POST) mostra todos, e quando coloco $_POST['id'] não mostra nada.

function form2Qs(form_ajax){
    var form = document.getElementById(form_ajax);
    var inputs = form.getElementsByTagName('input');
        
    var dados = '?';
    for( var i=0; i<inputs.length; i++ ){
        dados += inputs[i].name+'='+inputs[i].value;
    }
    return dados;
}
function form3Qs(form_ajax){
    var form = document.getElementById(form_ajax);
    var textareas = form.getElementsByTagName('textarea');
        
    var dados = '?';
    for( var i=0; i<textareas.length; i++ ){
        dados += textareas[i].name+'='+textareas[i].value;
    }
    return dados;
}
function f_ajx(){
    var url = id('form_ajax').action;
    xmlRequest.open("POST", url, true);
    xmlRequest.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        
    var dados = form2Qs('form_ajax')+form3Qs('form_ajax')+
				'&funcao='.value;
      
    xmlRequest.send(dados);
    xmlRequest.onreadystatechange = function(){
    	id("conteudo").innerHTML = xmlRequest.responseText;
	}
}

William Bruno · Abril 1, 2010

quando coloco VAR_DUMP($_POST) mostra todos, e quando coloco $_POST['id'] não mostra nada.

??

cara, mostra exatamente como você fez.. se não fica dificil adivinhar.. a essa altura, posso até começar a achar que você esqueceu de colocar o echo..

Arquivado

[Resolvido] Loop pegando dados do formulário...

Recommended Posts

Eduardo Villa 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eduardo Villa 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eduardo Villa 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eduardo Villa 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eduardo Villa 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eduardo Villa 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eduardo Villa 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eduardo Villa 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eduardo Villa 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eduardo Villa 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eduardo Villa 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501