Formulário PHP com AJAX

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**

>

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.

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~.

>

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](https://api.jquery.com/id-selector/) (no caso do jQuery): $( '#meu-elemento' );

>

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.

@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ê.