Enviar dados do form ao PHP/MySQL via Jquery

ZUCOLLI · Outubro 7, 2011

Boa noite estou tentando fazer inclusões na tabela do banco de dados enão sei o que estou fazendo de errado.

Alguém pode me ajudar?

Obrigado.

ZUCOLLI

Segue os códigos:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Teste Post Jquery</title>

<script src="js/jquery-1.6.3.min.js" type="text/javascript"></script>

<script type="text/javascript">

function addUser() {
nome = $('#nome').val()
username = $('#username').val()
senha = $('#senha').val()

$.post('data.php',{nome: nome, username: username, senha: senha}, function(data){

	alert(data)

	if(data == 0) {
	alert('user add ok')
	}
	else {
	alert('erro ao adicionar user')
	}
});
}

</script>


</head>

<body>

<form id="add" name="add" method="post">
   <label>Nome: </label>
   <input id="nome" name="nome" type="text" />

   <label>Username: </label>
   <input id="username" name="username" type="text" />

   <label>Senha: </label>
   <input id="senha" name="senha" type="text" />

   <button id="bntAdd" onclick="return addUser()">Add User</button>
</form>

</body>
</html>

PHP


<?php
// extrai os dados do post
extract($_POST);
// monta a instrucao SQL
$strSql = "insert into user (nome,username,senha) values ('$nome','$username','$senha')";
// conexao com o banco
$con = mysql_connect('localhost', 'zucolli', 'cazzac');
// seleciona o bd
mysql_select_db('nuato', $con);
// executa a query
$query = mysql_query("$strSql");
// verifica status da query
if($query)
{
// se bem sucedida
echo 0;
}
else
{
// mal sucedida
echo 1;
}

 print_r($_POST); 
?>

jpraminelli · Outubro 7, 2011

aparece algum erro na tela, ja olhou no firebug pra ver o retorno do ajax ?

ZUCOLLI · Outubro 7, 2011

Não aparece nada de erro. só alguns alertas.

gremio10 · Outubro 7, 2011

<script type="text/javascript">

$( ".addUser" ).click( function() {

       $.post( 'data.php', $( this ).parent( "form" ).serialize(), function( data ){

               alert(data)

               if( data == 0 ) {
                    alert( 'user add ok' );
               }
               else 
               {
                    alert( 'erro ao adicionar user' );
               }
       } );
       return false;

} );

</script>

<input type="submit" value="Cadastrar" class="addUser" />

No php:

$query = mysql_query("$strSql");

$query = mysql_query( $strSql ) or die( mysql_error() );

e tira o print_r

:D

ZUCOLLI · Outubro 17, 2011

Boa noite...

Após percorrer diversas páginas e páginas de informação, cheguei em mais uma dúvida e peço ajuda:

Eu até consegui enviar os dados do formulário para o PHP e até cadastrou no MySql, só que o browser fica na página PHP e não retorna a variável para a página HTML (que na verdade é um PHP), para ser inserida na DIV #insere_aqui.

A idéia seria ter um form para cadastrar um usuário no banco de dados e na mesma página sem dar refresh retornar a mensagem de usuário cadastrado.

Obrigado.

ZUCOLLI

HTML

<?php include("/cabecalho-doc-meta-utf-8.inc.php"); ?>

<script src="js/jquery-1.6.3.min.js" type="text/javascript"></script>
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/ChunkFive_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1',{ textShadow: '1px 1px #fff'});
Cufon.replace('h2',{ textShadow: '1px 1px #fff'});
Cufon.replace('h3',{ textShadow: '1px 1px #000'});
Cufon.replace('.back');
</script>

<script type="text/javascript">
$(document).ready(function() {
$('#nome, #username, #senha').focus(function() {
$(this).val('');
});

var requisitaPost = function () {
	$('#nome, #username, #senha').unbind('focus');
	var nomeEnviado = $('#nome').val();
	var usernameEnviado = $('#username').val();
	var senhaEnviada = $('#senha').val();w
	$.post('cadastra-usuario.php', 
	{ nome: nomeEnviado, username: usernameEnviado, senha: senhaEnviada },
	function(data) {
	$('#insere_aqui').fadeIn(2000).html(data);
	},
	'html');
return false;
};
$('#submit').bind('click', requisitaPost);
})
// ]]>
</script>




   </head>
   <body>
	<div class="wrapper">
       <div id="insere_aqui"></div>
		<div class="content">
		  <div id="form_wrapper" class="form_wrapper">
			  <form class="register" method="post" action="cadastra-usuario.php">
					<h3>Registrar novo usuário</h3>
					<div class="column">
						<div>
							<label>Nome:</label>
							<input type="text" id="nome" name="nome" value="<?php if (!$_POST['nome']) { echo "*"; }else{ echo $_POST['nome']; } ?>"/>
							<span class="error">Isto é um erro. Contacte o administrador.</span>
						</div>
					</div>
					<div class="column">
						<div>
							<label>Username:</label>
							<input type="text" id="username" name="username" value="<?php if (!$_POST['username']) { echo "*"; }else{ echo $_POST['username']; } ?>"/>
							<span class="error">Isto é um erro. Contacte o administrador.</span>
						</div>
						<div>
							<label>Senha:</label>
							<input type="password" id="senha" name="senha" value="<?php if (!$_POST['senha']) { echo "*"; }else{ echo $_POST['senha']; } ?>"/>
							<span class="error">Isto é um erro. Contacte o administrador.</span>
						</div>
					</div>
					<div class="bottom">
						<input name="submit" type="submit"  id="submit" value=" Registrar usuário "/>
						<a href="index.php" rel="login" class="linkform">Faça login aqui!</a>
						<div class="clear"></div>
					</div>

				</form>
				<form class="login active">
					<h3>Login</h3>
					<div>
						<label>Usuário:</label>
						<input type="text" />
						<span class="error">Isto é um erro</span>
					</div>
					<div>
						<label>Senha: <a href="relembrar-senha.html" rel="forgot_password" class="forgot linkform">Esqueceu a senha?</a></label>
						<input type="password" />
						<span class="error">Isto é um erro</span>
					</div>
					<div class="bottom">
						<!--<input type="submit" value="Login">
						</input>-->
						<a href="registrar-usuario.html" rel="register" class="linkform">Você não tem uma conta ainda? Crie a sua!</a>
						<div class="clear"></div>
					</div>
				</form>
				<form class="forgot_password">
					<h3>Reenviar Senha</h3>
					<div>
						<label>Email:</label>
						<input type="text" />
						<span class="error">Isto é um erro. Contacte o administrador.</span>
					</div>
					<div class="bottom">

				<!--		<input type="submit" value="Enviar"></input>-->
						<a href="index.php" rel="login" class="linkform">Faça login aqui!</a>
						<a href="registrar-usuario.html" rel="register" class="linkform">Você não tem uma conta ainda? Crie a sua!</a>
						<div class="clear"></div>
					</div>
				</form>
			</div>
			<div class="clear"></div>
		</div>
	</div>


	<!-- The JavaScript -->
	<script type="text/javascript">
		$(function() {
				//the form wrapper (includes all forms)
			var $form_wrapper	= $('#form_wrapper'),
				//the current form is the one with class active
				$currentForm	= $form_wrapper.children('form.active'),
				//the change form links
				$linkform		= $form_wrapper.find('.linkform');

			//get width and height of each form and store them for later						
			$form_wrapper.children('form').each(function(i){
				var $theForm	= $(this);
				//solve the inline display none problem when using fadeIn fadeOut
				if(!$theForm.hasClass('active'))
					$theForm.hide();
				$theForm.data({
					width	: $theForm.width(),
					height	: $theForm.height()
				});
			});

			//set width and height of wrapper (same of current form)
			setWrapperWidth();

			/*
			clicking a link (change form event) in the form
			makes the current form hide.
			The wrapper animates its width and height to the 
			width and height of the new current form.
			After the animation, the new form is shown
			*/
			$linkform.bind('click',function(e){
				var $link	= $(this);
				var target	= $link.attr('rel');
				$currentForm.fadeOut(400,function(){
					//remove class active from current form
					$currentForm.removeClass('active');
					//new current form
					$currentForm= $form_wrapper.children('form.'+target);
					//animate the wrapper
					$form_wrapper.stop()
								 .animate({
									width	: $currentForm.data('width') + 'px',
									height	: $currentForm.data('height') + 'px'
								 },500,function(){
									//new form gets class active
									$currentForm.addClass('active');
									//show the new form
									$currentForm.fadeIn(400);
								 });
				});
				e.preventDefault();
			});

			function setWrapperWidth(){
				$form_wrapper.css({
					width	: $currentForm.data('width') + 'px',
					height	: $currentForm.data('height') + 'px'
				});
			}

			/*
			for the demo we disabled the submit buttons
			if you submit the form, you need to check the 
			which form was submited, and give the class active 
			to the form you want to show
			*/

		});
       </script>
   </body>
</html>

PHP

<?php 
$_POST["nome"] = strip_tags($_POST["nome"]);
$_POST["username"] = strip_tags($_POST["username"]);
$_POST["senha"] = strip_tags($_POST["senha"]);


$erros=0;
$msg="";
if (strlen($_POST['nome'])< 2) {
$erros++;
$msg.="<br /><b>Nome:</b> Digite seu nome ou apelido";
}
if (strlen($_POST['username'])< 2) {
$erros++;
$msg.="<br /><b>Username:</b> Digite seu uusername ou apelido";
}
if (strlen($_POST['senha']) < 6) {
$erros++;
$msg.="<br /><b>Senha:</b> Digite uma senha com 6 dígitos ou mais";
}
if ($erros>0){
$msg="<b style='color:#c30;'>Sua mensagem não foi enviada</b><br />Por favor confira o(s) seguinte(s) campo(s): 	$msg";
echo $msg;

} 

else {

$nome = $_POST["nome"];
$username = $_POST["username"];
$senha = $_POST["senha"];
$data_nasc = date('Y-m-d');

require_once('coneccoes/descricoes_db.php');
$strSql = "insert into usuarios (nome,senha,data_nasc,username) values ('$nome','$senha','$data_nasc','$username')";
mysql_select_db('nuato');
$query = mysql_query("$strSql");

$html = "<p>Olá <b>$nome</b>,<br />\n";
$html.= "Obrigado por se cadastrar!</p>\n";
$html.= "<p>Seu nome de usuário é: <b>$username</b></p>\n";
echo $html;

}
?>

ZUCOLLI · Outubro 26, 2011

Boa tarde Pessoal!

Consegui arrumar este código e deu tudo certo.

Na verdade eu reescrevi e deu certo, acho que devia ter alguma coisa em lugar errado, a lógica continuou a mesma.

Agora estou em outro passo e preciso de ajuda:

No form de login eu faço a verificação num arquivo PHP e se a usuario/senha estiver correto redireciona para a página restrita.

No PHP tem o redirect

header('Location: http://www.example.com/');

só que ele redireciona mas não muda de página.

Pedi para ele escrever o retorno em uma DIV e eis que ele escreveu a página restrita na DIV.

Existe algo que possa fazer para redirecionar direto sem retornar para a página de login?

Obrigado

ZUCOLLI

Jordan Pinheiro_147113 · Outubro 27, 2011

era só (vocÊ esqueceu de declarar as variaveis):

<script type="text/javascript">

function addUser() {
       var nome = $('#nome').val()
       var username = $('#username').val()
       var senha = $('#senha').val()

       $.post('data.php',{nome: nome, username: username, senha: senha}, function(data){

               alert(data)

               if(data == 0) {
               alert('user add ok')
               }
               else {
               alert('erro ao adicionar user')
               }
       });
}

</script>

ZUCOLLI · Outubro 27, 2011

Ok. obrigado.

está parte entendi.

o que vão está fogo é o redirecionamento .

zucolli

Arquivado

Enviar dados do form ao PHP/MySQL via Jquery

Recommended Posts

ZUCOLLI 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

jpraminelli 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

ZUCOLLI 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

gremio10 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

ZUCOLLI 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

ZUCOLLI 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jordan Pinheiro_147113 15

Compartilhar este post

Link para o post

Compartilhar em outros sites

ZUCOLLI 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

lendo RSS com PHP mostrando a imagem de preview

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

Fóruns

Tempo Real

Informação importante