mudar a classe do botão.

[Danilo MC 1]

Olá, boa tarde,

amigos preciso da ajuda para uma lista de produtos q tenho em minha loja, pois tenho um botão q quando clico nele, ele adiciona no carrinho de compras e conta no carrinho, assim posso adicionar vários ao carrinho e ele vai contando, porem se clico no msm botão várias vezes ele conta, eu preciso desabilitar o botão após ele ter sido clicado e tbm preciso mudar a imagem dele para o usuario ver q ele foi adicionado.

 

o código é o seguinte.

 

o submit com a class botão q preciso mudar a imagem

<div class="item-btn" >

<ul>

<li >

<a href="index.php?id=<?php echo $id; ?>" class="btn" >

<input type="submit" class="botao" value="" onclick="conta();"> // este item tem q ser desabilitado e trocar a imagem.

</a>

 

 

</li>

<li><a href="index.php?link=3&id=<?php echo $id; ?>" onclick="window.location.reload(false);"><img src="img/btn-informacoes.svg" width="107px" height="auto" /></a></li>

</ul>

 

</div>

 

o javascript q tenho

 

 

function id( el ){

    return document.getElementById( el );

}

function getHTTPObject(){

    if(window.XMLHttpRequest){

        return new XMLHttpRequest();

    }else if(window.ActiveXObject){

        var prefixes = ["MSXML2", "Microsoft", "MSXML", "MSXML3"];

        for(var i = 0; i < prefixes.length; i++){

            try{

                return new ActiveXObject(prefixes[i] + ".XMLHTTP");

            } catch (e) {}

        }

    }

}

 

function disablelink( e ){

    var evt = window.event || e

    if (evt.preventDefault) //supports preventDefault?

        evt.preventDefault()

    else //IE browser

        return false

}

window.onload = function()

{

    var as = id('item').getElementsByClassName('btn');

    

    for( i in as ){

        as[i].onclick = function( event ){

        

            var arq = this.href;

            var xmlHttp = getHTTPObject();

            xmlHttp.open( "GET", arq, true );

            xmlHttp.onreadystatechange = function(){

                if (xmlHttp.readyState == 4){

                    id('result').innerHTML = xmlHttp.responseText;

                }

            }

            xmlHttp.send( null );

            

            return disablelink( event );

            

        }

    }

    

}

 

[Guilherme Luiz 41]

$('button.classeDoSeuBotao').attr('disabled', $(".classeDoSeuBotao").disabled = true);

 

[Danilo MC 1]

Olá Guilherme eu fiz a incrementação mais ainda não funcionou.

 

$('button.botao').attr('disabled', $(".botao2").disabled = true);

 

inseri para chamar as classes criadas no css

 

.botao

{

background: url('../img/btn-addlista.svg') no-repeat;

background-size: 107px;

border: none;

width: 110px;

height: 32px;

margin-top:5px;

cursor:pointer;

}

 

.botao2{

background: url('../img/btn-jaadd') no-repeat;

}

[Wesley Santos 28]

Para alterar a classe de um elemento e mudar seu atributo com JS puro, dessa forma é possível: 

https://jsfiddle.net/wessleysanttos/z594vwe0/

 

Ver se consegue adaptar para sua realidade. 

[Omar~ 87]

Bem vamos lá.

Esse código não tá meio zuado não?

Tipo você tem um <a href=... Dentro desse um submit?

É um link ou um formulário?

 

Se for o caso de formulário pode fazer assim:

<form method="post" onsubmit="return funcao();">

 

A função por sua vez vai validar o post redir os inputs, redimensionar.

Sobre alterar os elementos quando clicados com Javascript

 

2 horas atrás, Guilherme Luiz disse:

$('button.classeDoSeuBotao').attr('disabled', $(".classeDoSeuBotao").disabled = true);

 

Ele tá usando javascript puro, e isso que mostrou usa jquery, não funciona no script dele.

[Danilo MC 1]

Olá Omar~ eu consegui fazer com o seu exemplo o menu mudar de cor, mais ele muda uns 3 ou quatro de uma vez qndo clico em um item. Também mudei a forma como estava o botão de input para button que é o mais correto pois não tem nenhum form nele.

 

os problemas q seguem agora é q a contagem ela segue mesmo após o button mudar de cor e eu não queria q tivesse contagem no meu conte quando o item fosse clicado e tbm quando clicar no button eu quero q mude apenas o item q cliquei e não os outros tbm.

 

segue o código q editei

 

button

<li>

<a href="index.php?id=<?php echo $id; ?>" class="btn" >

<button class="botao" value="" onclick="conta();modifica(<?php echo $id_imovel; ?>);"> </button>

</a>

</li>

 

script

<script>

 

var $cls = document.getElementsByClassName('botao');

var $i;

function modifica(param) {

for ($i = 0; $i < $cls.length; $i++) {

$cls[$i].className = 'botao2';

 

 

}

$cls[param].className = 'botao2';

}

 

 

var vCont = 0;

function conta(){

vCont = vCont + 1;

document.getElementById('contador').value = vCont;

 

}

 

</script>

[Omar~ 87]

Posso dar uma dica?

Deixe seu código mais limpo e eficaz, ao invéns de ficar passando função por função você tem 2 alternativas mais coesas.

 

1 - Usar Javascript orientado a objeto (é bem melhor): https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript

 

2 - Validar tudo em 1 única função que faz tudo.

 

Bem, você tem a função conta();

Tente assim: onclick="conta(this);"

Ou seja envio o botão que foi clicado para a função lá tenho o parâmetro que é esse botão onde posso fazer o quem bem entender com ele e ainda trabalhar com o que mais quiser quando aquele botão é clicado:

Citar

function conta(parametro) {

    parametro.style.background = "red";

 

 

E no caso disso:

for ($i = 0; $i < $cls.length; $i++) {

$cls[$i].className = 'botao2';

}

Faz o script percorrer todos os índices e enquanto existir vai modificando, então é isso que faz todos botões ficarem iguais quando a função é ativada:

 

Agora não acionar o mesmo botão 2 vezes.

Eu faria assim porque é mais prático e rápido fazer isso no JS, assim se for o caso de enviar um post via ajax não precisa ficar filtrando dados no script porque os inputs já vão está todos prontos no front é só reaproveitar:

Criaria um botão fake que não executa função alguma e é idêntico ao botão verdadeiro.

No css deixo com propriedade display: none;

Ao clicar no botão real que vai está no mesmo local seto o botão com display none, e o que estava oculto altero sua propriedade para display block.

Assim sendo troco os botões, imperceptível exceto se alguém for inspecionar o código fonte

[Danilo MC 1]

Sua lógica para o Display foi perfeita para mim, consegui aplicar e deu certo, ele muda o botão e para a contagem, mais os índices eu não consegui fazer item por item, pois quando clico em 1 botão ela aplica para todos, eu tentei aplicar uma lógica  q segue abaixo mais não funcionou, mais estou enviando pq meus conhecimentos técnicos do javascript é limitado e com sua ajuda resolvo isso.

 

 

<a href="index.php?id=<?php echo $id; ?>" class="btn" >

<button class="botao" value="" onclick="conta();modifica(this);"> </button>

<button class="botao2" value=""> </button>

</a>

 

<script>

var $cls = document.getElementsByClassName('botao');

var $cls2 = document.getElementsByClassName('botao2');

var $i;

function modifica(parametro) {

for ($i = 0; $i < $cls.length; $i++) {

$cls[$i].style.display = 'none';

$cls2[$i].style.display = 'block';

}

$cls[parametro].style.display = 'none';

$cls2[parametro].style.display = 'block';

}

 

 

</script>

 

[Omar~ 87]

 

Em 15/11/2017 at 23:17, Danilo MC disse:

Sua lógica para o Display foi perfeita para mim, consegui aplicar e deu certo, ele muda o botão e para a contagem, mais os índices eu não consegui fazer item por item, pois quando clico em 1 botão ela aplica para todos, eu tentei aplicar uma lógica  q segue abaixo mais não funcionou, mais estou enviando pq meus conhecimentos técnicos do javascript é limitado e com sua ajuda resolvo isso.

 

Na verdade só disse uma forma de fazer, das inúmeras possibilidades.

Veja criei um exemplo aqui só manipulando o html. Onde tenho vários botões que ao clicar em 1 executo a função, se ele já foi clicado, é verificado seu elemento, e se sim ele não faz nada.

 

Spoiler

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Checagem se o botão já foi clicado</title>
        <script src="VerificarClique.js" type="text/javascript"></script>
        <style>
            button {
                width: 6rem;
                cursor: pointer;
                outline: none
            }
            button.reset {
                padding: .625rem;
                background-color: #bb0;
                border: none
            }
        </style>
    </head>
    <body>
        <button class="botao">Desativado</button>
        <button class="botao">Desativado</button>
        <button class="botao">Desativado</button>
        <button class="botao">Desativado</button>
        <button class="botao">Desativado</button>
        <button class="botao">Desativado</button>
        <button class="botao">Desativado</button>
        <button class="botao">Desativado</button>
        <button class="botao">Desativado</button>
        <button class="botao">Desativado</button>

        <br>
        <button class="reset" onclick="return clickCheck.resetarBotao()">Resetar</button>
        <hr>
        <div id="mostra"></div>

        <script>clickCheck = new VerificarClique();</script>
    </body>
</html>

 

 

Arquivo VerificarClique.js

Spoiler

var VerificarClique = function () {
    var $cliques = 0;
    var $botao = document.getElementsByClassName('botao');
    var $quantBt = $botao.length;
    var $i;

    for ($i = 0; $i < $quantBt; $i++) {
        $botao[$i].onclick = function () {
            if (this.className !== 'botao ativado') {
                recebeValor(this);
            } else {
                return false;
            }
        };
    }

    function recebeValor(parametro) {
        $cliques++;
        parametro.className += ' ativado';
        parametro.style.opacity = '0.5';
        parametro.innerHTML = 'Ativado';

        document.getElementById('mostra').innerHTML = 'Botões que foram clicados: ' + $cliques;
    };

    this.resetarBotao = function () {
        for ($i = 0; $i < $quantBt; $i++) {
            if ($botao[$i].className === 'botao ativado') {
                $botao[$i].className = 'botao';
                $botao[$i].style.opacity = '1';
                $botao[$i].innerHTML = 'Desativado';
            }
        }
        $cliques = 0;
        document.getElementById('mostra').innerHTML = 'Todos botões foram resetados';
    };
};

 

 

Para entender como funciona, use o "Inspecionar Elemento" do navegador, e veja como a função manipula o html.

[Danilo MC 1]

Omar~ serviu perfeito, fiz a adaptação e funcionou muito obrigado. me ajudou muito.