HTML Ativar alteração em form sem submit

[Glouk]

Bom dia

 

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

 

 

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>

 

[XenoStory]

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.

[DiF]

@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 

[Glouk]

Eu resolvi esse problema com uma alternativa em php com o onchange

 

<form method="post">
                          <select name="update" onchange="this.form.submit()">
                            <option selected="selected">Status</option>
                            <option value="3">Admin</option>
                            <option value="2">Ativo</option>
                            <option value="1">Desativado</option>
                          </select>
                      </form>

Não entendo muito sobre ajax, por isso tentei outras alternativas. Mas obrigado!