Ir para conteúdo

POWERED BY:

Arquivado

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

kim.y

Formulário PHP com AJAX

Recommended Posts

Boa tarde galera,

 

estou com a seguinte dúvida, eu fiz um form para inserir dados no meu banco de dados via AJAX, ele insere normalmente porém quando faço o teste no arquivo ajax ele não mostra os alerts que eu fiz para testar a rotina.

 

insert.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="css/css.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
    <script type="text/javascript" src="ajax.js"></script>


    <style>
* {
    box-sizing: border-box;
}

input[type=text], select{
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    resize: vertical;
}

label {
    padding: 12px 12px 12px 0;
    display: inline-block;
}

input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    float: right;
}

input[type=submit]:hover {
    background-color: #45a049;
}

.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}

.col-25 {
    float: left;
    width: 25%;
    margin-top: 6px;
}

.col-75 {
    float: left;
    width: 75%;
    margin-top: 6px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
    .col-25, .col-75, input[type=submit] {
        width: 100%;
        margin-top: 0;
    }
}
</style>
</head>
<body>
<div style="width:50%; margin:140px auto;">
    <?php
        include "navbar.php"
    ?>

<div class="container">
  <form>
    <div class="row">
      <div class="col-25">
        <label for="fname">Login</label>
      </div>
      <div class="col-75">
        <input type="text" id="nome" name="nome" placeholder="Insira seu nome de usuário.." autocomplete="off">
      </div>
    </div>
    <div class="row">
      <div class="col-25">
        <label for="lname">Senha</label>
      </div>
      <div class="col-75">
        <input type="text" id="senha" name="senha" placeholder="Insira sua senha.." autocomplete="off">
      </div>
    </div>
    <div class="row">
      <div class="col-25">
        <label for="lname">Email</label>
      </div>
      <div class="col-75">
        <input type="text" id="email" name="email" placeholder="Insira seu email.." autocomplete="off">
      </div>
    </div>

    <div class="row">
      <input type="submit" id="enviar" value="Enviar" style="margin-top:5px;">
    </div>
  </form>
</div>

ajax.js

$(document).ready(function(){
    $('#enviar').click(function(){
        $.ajax({
            url: 'inserir.php',
            type: 'POST',
            data: 'nome=' + $('#nome').val() + '&senha=' + $('#senha').val() + '&email=' + $('#email').val(),
            success: function(data){        
                alert("YOUR SUCCESS MESSAGE HERE");
            },
            error: function (data) {
                alert("Error");
            }
        });
    });
})

inserir.php

<?php
    $conn = mysqli_connect("localhost", "root","", "banco_teste");
    mysqli_select_db($conn, "banco_teste");

    $nome = $_POST['nome'];
    $senha = $_POST['senha'];
    $email = $_POST['email'];

    $retorno = 'OLÁ MUNDO!!!';

    mysqli_query($conn, "INSERT INTO `usuario`(`nome`, `senha`, `email`) VALUES  ('$nome', '$senha','$email')");

    if(mysqli_affected_rows($conn) != -1){
        $retorno = 'Sucesso!!!';
    }
    else{
        $retorno = 'ERRO!!!';
    }

    echo $retorno;
?>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Eu sempre fico curioso, porque as pessoas usam id e name em forms sem a necessidade? Poderia me esclarecer isso?

Uma vez que ambos são identificadores.

 

Bem com jQuery facilita tudo, então você pode criar variáveis encapsulando para cada input. 

var nome = $('input[name="nome"]').val();
var senha = $('input[name="senha"]').val();
var email = $('input[name="email"]').val();
$.ajax({
    method: 'POST',
    url: 'inserir.php',
    dataType: 'html',
    data: {nome: nome, senha: senha, email: email},
    success: function (data) {
    // Post success
    }
});

Tem uma jeito mais simples veja:

Spoiler

<form method="POST" onsubmit="return enviarPost();">
    <input type="text" name="nome" placeholder="Insira seu nome de usuário..">
    <input type="text" name="senha" placeholder="Insira sua senha..">
    <input type="text" name="email" placeholder="Insira seu email..">
    <input type="submit" value="Enviar">
</form>

A função


function enviarPost() {
    $.ajax({
        method: 'POST',
        url: 'inserir.php',
        dataType: 'html',
        data: $('form').serialize(),
        success: function (data) {
            // Post success
        }
    });
    return false;
}

 

 

O método serialize da jQuery já vai enviar todos os valores que estiverem em inputs que estejam identificados com NAME para o arquivo que colocar em url

Compartilhar este post


Link para o post
Compartilhar em outros sites
5 horas atrás, Omar~ disse:

Eu sempre fico curioso, porque as pessoas usam id e name em forms sem a necessidade? Poderia me esclarecer isso?

Uma vez que ambos são identificadores.

 

Bem com jQuery facilita tudo, então você pode criar variáveis encapsulando para cada input. 

 

O método serialize da jQuery já vai enviar todos os valores que estiverem em inputs que estejam identificados com NAME para o arquivo que colocar em url

Eu uso porque vi em um livro que estou lendo sobre ajax, ainda estou iniciando nesse mundo web.

 

Mas bom saber que não tem a necessidade, tive essa dúvida mas parecia ser uma coisa besta, só uma dúvida, qual dos dois é mais utilizado, tem alguma padrão ou tanto faz?

 

Quanto ao código, vou testar aqui, valeu man.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Agora deu certinho!!

 

Só para deixar registrado aqui, eu estava usando o link abaixo e por isso não estava conseguindo fazer como o Omar~ falou.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>

Inseri esse:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

e o código dele rodou certinho, não sei se foi coincidência mas deu certo.

 

Vou dar uma estudada nesse código para tentar entender melhor o que está acontecendo.

 

Valeu Omar~.

Compartilhar este post


Link para o post
Compartilhar em outros sites
5 horas atrás, Omar~ disse:

porque as pessoas usam id e name em forms sem a necessidade? Poderia me esclarecer isso?

 

20 minutos atrás, kim.y disse:

Mas bom saber que não tem a necessidade, tive essa dúvida mas parecia ser uma coisa besta, só uma dúvida, qual dos dois é mais utilizado, tem alguma padrão ou tanto faz?

 

Respondendo:

 

Especificação W3C para o atributo global id:

Citar

The id attribute specifies its element's unique identifier (ID). The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. [...]

An element's unique identifier can be used for a variety of purposes, most notably as a way to link to specific parts of a document using fragment identifiers, as a way to target an element when scripting, and as a way to style a specific element from CSS.

 

Especificação W3C para o atributo name no contexto de um input:

Citar

name - Name of form control to use for §4.10.21 Form submission and in the form.elements API

 

A definição do Form Submission é muito grande para eu colar aqui, mas é explicada aqui: https://www.w3.org/TR/html5/sec-forms.html#forms-form-submission

 

Resumindo: "id" você usa para idenitificar no DOM. Manipular no JS, no CSS e identificar unicamente o elemento.

"name" tem uma semântica completamente diferente: é utilizada como fonte de dados para Submissão de formulários.

Ambos devem ser usados, cada um em seu contexto.

 

Como o envio do formulário está sendo feito manualmente por AJAX, e não pela ordem natural do navegador, você precisa definir os dados que são enviados. Do contrário, essa necessidade não existe, pois o form irá automaticamente carregar os inputs definidos (com tuplas name=value).

 

Sobre isso:

var nome = $('input[name="nome"]').val();
var senha = $('input[name="senha"]').val();
var email = $('input[name="email"]').val();

 

Sem utilizar o serialize, apontado pelo @Omar~, essa sintaxe não estaria suficientemente boa exatamente pela ausência do id.

Faz muito mais sentido (além de ser muito mais rápido para o navegador) trabalhar com ids, utilizando o ID Selector (no caso do jQuery): $( '#meu-elemento' );

Compartilhar este post


Link para o post
Compartilhar em outros sites
3 horas atrás, Matheus Tavares disse:

Resumindo: "id" você usa para idenitificar no DOM. Manipular no JS, no CSS e identificar unicamente o elemento.

"name" tem uma semântica completamente diferente: é utilizada como fonte de dados para Submissão de formulários.

Ambos devem ser usados, cada um em seu contexto.

 

Em tese foi isso que quis me referir que cada coisa é cada coisa, no caso aqui em questão o uso o ID é desnecessário. Usar o ID no input seria uma forma de atacar um input em questão.

No entanto para o uso do serialize com jquery é melhor apontar um ID no form para esse tipo de requisição. Hora que se encapsular simplesmente o form sem aponta-lo e tenha mais de um form na página todos os inputs "NAME" pertencentes ou não ao formulário em questão serão processados, fazendo o uso de algo completamente desnecessário.

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Omar~, eu não disse que você estava errado, apenas complementei seu post.

 

20 minutos atrás, Omar~ disse:

No entanto para o uso do serialize com jquery é melhor apontar um ID no form

É verdade, assim como no exemplo anterior à esse, onde é melhor apontar os IDs dos campos, ao invés de selecioná-los com [name=...].

Foi esse exemplo e as dúvidas do autor do tópico que motivou minha resposta, mas eu entendi o que você quis dizer e concordo com você. :smiley:

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por violin101
      Caros amigos, saudações.
       
      Por favor, me permita tirar uma dúvida com os amigos.

      Tenho um Formulário onde o Usuário digita todos os Dados necessários.

      Minha dúvida:
      --> como faço após o usuário digitar os dados e salvar, o Sistema chamar uma Modal ou mensagem perguntando se deseja imprimir agora ?

      Grato,
       
      Cesar
    • Por Carcleo
      Tenho uma abela de usuarios e uma tabela de administradores e clientes.
      Gostaria de uma ajuda para implementar um cadastro
       
      users -> name, login, passord (pronta) admins -> user_id, registratiom, etc.. client -> user_id, registratiom, etc...
      Queria ajuda para extender de user as classes Admin e Client
      Olhem como estáAdmin
      <?php namespace App\Models; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Database\Eloquent\Model; class Admin extends User {     use HasFactory;            protected $fillable = [         'name',         'email',         'password',         'registration'     ];      private string $registration;     public function create(         string $name,          string $email,          string $password,         string $registration     )     {         //parent::create(['name'=>$name, 'email'=>$email, 'password'=>$password]);         parent::$name = $name;         parent::$email = $email;         parent::$password = $password;         $this->registration = $registration;     } } User
      <?php namespace App\Models; // use Illuminate\Contracts\Auth\MustVerifyEmail; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Foundation\Auth\User as Authenticatable; use Illuminate\Notifications\Notifiable; use Illuminate\Database\Eloquent\Relations\BelongsToMany; class User extends Authenticatable {     /** @use HasFactory<\Database\Factories\UserFactory> */     use HasFactory, Notifiable;     static string $name;     static string $email;     static string $password;     /**      * The attributes that are mass assignable.      *      * @var list<string>      */     protected $fillable = [         'name',         'email',         'password',     ];          /**      * The attributes that should be hidden for serialization.      *      * @var list<string>      */     protected $hidden = [         'remember_token',     ];     /**      * Get the attributes that should be cast.      *      * @return array<string, string>      */     protected function casts(): array     {         return [             'email_verified_at' => 'datetime',             'password' => 'hashed',         ];     }          public function roles() : BelongsToMany {         return $this->belongsToMany(Role::class);     }       public function hasHole(Array $roleName): bool     {                 foreach ($this->roles as $role) {             if ($role->name === $roleName) {                 return true;             }         }         return false;     }         public function hasHoles(Array $rolesName): bool     {                 foreach ($this->roles as $role) {             foreach ($rolesName as $rolee) {             if ($role->name === $rolee) {                 return true;             }          }         }         return false;     }         public function hasAbility(string $ability): bool     {         foreach ($this->roles as $role) {             if ($role->abilities->contains('name', $ability)) {                 return true;             }         }         return false;     }     } Como gravar um Admin na tabela admins sendo que ele é um User por extensão?
      Tentei assim mas é claro que está errado...
      public function store(Request $request, Admin $adminModel) {         $dados = $request->validate([             "name" => "required",             "email" => "required|email",             "password" => "required",             "registration" => "required"         ]);         $dados["password"] =  Hash::make($dados["password"]);                  $admin = Admin::where("registration",  $dados["registration"])->first();                  if ($admin)              return                    redirect()->route("admin.new")                             ->withErrors([                                 'fail' => 'Administrador já cadastrados<br>, favor verificar!'                   ]);                            $newAdmin = $adminModel->create(                                    $dados['name'],                                    $dados['email'],                                    $dados['password'],                                    $dados['registration']                                 );         dd($newAdmin);         $adminModel->save();         //$adminModel::create($admin);                  return redirect()->route("admin.new")->with("success",'Cadastrado com sucesso');     }  
    • Por violin101
      Caros amigos, saudações.
       
      Gostaria de tirar uma dúvida com os amigos, referente a PDV.
       
      Estou escrevendo um Sistema com Ponto de Vendas, a minha dúvida é o seguinte, referente ao procedimento mais correto.

      Conforme o caixa vai efetuando a venda, o Sistema de PDV já realiza:
      a baixa direto dos produtos no estoque
      ou
      somente após concretizar a venda o sistema baixa os produtos do estoque ?
       
      Grato,
       
      Cesar
       
    • Por violin101
      Caros amigos do grupo, saudações e um feliz 2025.
       
      Estou com uma pequena dúvida referente a Teclas de Atalho.

      Quando o Caps Lock está ativado o Comando da Tecla de Atalho não funciona.
      ou seja:
      se estiver para letra minúscula ====> funciona
      se estiver para letra maiúscula ====> não funciona
       
      Como consigo evitar essa falha, tanto para Letra Maiúscula quanto Minúscula ?

      o Código está assim:
      document.addEventListener( 'keydown', evt => { if (!evt.ctrlKey || evt.key !== 'r' ) return;// Não é Ctrl+r, portanto interrompemos o script evt.preventDefault(); });  
      Grato,
       
      Cesar
    • Por violin101
      Caros amigos, saudações.
       
      Por favor, poderiam me ajudar.

      Estou com a seguinte dúvida:
      --> como faço para para implementar o input código do produto, para quando o usuário digitar o ID o sistema espera de 1s a 2s, sem ter que pressionar a tecla ENTER.

      exemplo:
      código   ----   descrição
           1       -----   produto_A
       
      Grato,
       
      Cesar
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.