Ir ao conteúdo
  • Cadastre-se
Glouk

HTML Ativar alteração em form sem submit

Recommended Posts

Bom dia

 

Estou desenvolvendo uma parte administrativa onde tem os registros de todos os usuários do site. Conforme:

 

Screenshot_1.png.7f6659732a39ce4ea3906808acd7936b.png

 

porém ali no status tem select com as opções (admin, ativo e desativo).

A ideia é que se um usuário estiver desativado, ou qualquer outra coisa, quando eu clicar na opção que eu quero ja sera mudado no banco de dados, sem precisar de um submit. É possivel?

 

Linha da tabela:

                                            <td>
                                                <div class="rs-select2--trans rs-select2--sm" name="sts">
                                                    <select class="js-select2" name="property">
                                                        <option selected="selected">Status</option>
                                                        <option value="3">Admin</option>
                                                        <option value="2">Ativo</option>
                                                        <option value="1">Desativado</option>
                                                    </select>
                                                    <div class="dropDownSelect2"></div>
                                                </div>
                                            </td>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bom dia, @Glouk

 

Sim, é possível. Até onde eu sei, é possível realizar esse tipo de alteração sem envio de um submit através do uso de Ajax, você tem conhecimento em tal? A ideia é, de forma resumida, enviar uma requisição para o backend sem a necessidade de recarregar a página. O próprio jQuery pode te ajudar nesse tipo de requisição, segue um exemplo de requisição, utilizando o jQuery:

 

var loginData = parent.find('input');
$.post('/user/home/', loginData, function(returnData) { 
    if(!returnData.status) {
        parent.find('button').next().html(returnData['msg']);
        parent.find('button').next().addClass('error');
        parent.find('button').next().show();
    } else {
        $(location).attr('href', returnData.redirect_url+'?login=yes');
    }
});

No exemplo acima, estou pegando todos os inputs de uma determinada div e enviando para o backend  na url /user/home/, através da variável loginData, onde o retorno dos dados no backend será atribuído à variável returnData. Se tiver alguma dúvida, consulta a documentação aqui.

 

No seu caso, a ideia é realizar uma requisição ao backend, quando o valor do select for alterado, pelo qu entendi. Deixo o resto com você.

 

Se mesmo assim não conseguir, é só postar aí.

 

Valeu.

Editado por XenoStory
  • Curtir 1
  • Obrigado 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Glouk Basicamente o colega cima já explicou como funciona.

 

Eu só mudaria a função $.post()  pela  $.ajax()  pois a função  $.ajax() pode ter mais de um retorno, no caso se você quer apresentar mensagem de sucesso ou erro.

 

Como é um campo select, eu usaria o evento onchange para mudanças. 

Desta forma:

$(".teste").on("change", function(){
	//Armazena o value do option selecionado
	var valor = $('.teste option:selected').val();
    
	//Testa se escolheu um valor diferente do default
	if(valor != "default"){
		$.ajax({
			url: "ProcessaDados.php",
			dataType: "HTML",
			type: "POST",
			data: {campo_select: valor}
		}).done(function(data){
				alert(data);	
		}).fail(function(data){
			alert(data);
		});     
	}else{
		alert("Selecione uma opção válida");
	} 
});

Vamos linha a linha:

Você atribui a função on() para o campo select.  Nesta função você define o evento, no caso o change.

Depois armazenamos o value do option em uma variável.

Em seguida, criamos uma verificação em IF, onde ele testa se o value é diferente do primeiro, pois o primeiro valor é uma mensagem, no seu caso seria "status" e não "default".

Se for diferente, executa a função $.ajax() onde nesta função recebe alguns parâmetros:

url, para indicar o arquivo php que vai receber o valor do campo selecionado

dataType, para o tipo de documento, 

type, para o tipo de envio (post ou get)

data, é o valor que vai ser emitido.

 

a função done() serve para indicar quando algo for bem sucedido, já a função fail() serve para erros.

 

Detalhe: a variável "data"  que está dentro de function() tanto no done() quando em fail(), são callbacks que vem do seu arquivo php.

 

Por exemplo:

$valor = $_POST["seucampoOPtion"];


$atualiza = mysqli_query($conexao, "update tabela set campo ='$valor'");

if($valor):
   echo "Mudança bem sucedida!";
else:
	echo "Houve um erro ao editar!";
endif;

No caso, o valor de echo contido nesta estrutura, será enviado ao jquery pela variável "data"

E por fim, o bloco do else, mostra uma mensagem que o usuário tem que escolher uma opção válida.. no caso que seja diferente do "status"

 

É por ai...   Boa sorte :thumbsup:

  • Curtir 1
  • Obrigado 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×