Capturar ação de botão de formulário (button) html para chamar função javascript

MaryDelBrollo · Novembro 26, 2018

Prezados,

Estou desenvolvendo uma aplicação web para gerenciamento de acesso ao almoxarifado do pequeno negócio de uma pessoa sem muitos recursos da comunidade aqui. Com conhecimentos de html5, css3 e um pouco de php, consegui fazer toda a parte de registros e a interface web de controle, no entanto, não entendo nadinha de javascript e "travei" no código para finalizar o projeto.

Tenho esse script encontrado de fonte aberta na internet, mas não consigo adaptá-lo:

       var led_controle = function(status) {
            var xmlhttp = new XMLHttpRequest();
            var set_status = "http://192.168.1.35/?function=" + status;
            xmlhttp.open("GET", set_status);
            xmlhttp.send();
        }

           // Acessa os botões e passa as nossas diretivas de ligar ou desligar o relé
        var led = function() {
           var on = document.querySelector(".on");
                on.onclick = function() {
                   led_controle("led13_on");
                }

                 var off = document.querySelector(".off");
                    off.onclick = function() {
                       led_controle("led13_off");
                    }
        }

        window.onload = function() {
           // Chama a função led
           led();
        }
   </script>

</head>

<body>

</body>

</html>

O código acima funciona perfeitamente. Ele aciona um sketch armazenado em um esp8266 e, através deste, aciona via relé de comando a porta do almoxarifado.

O problema consiste que AO INVÉS do conteúdo do "body" acima, eu preciso capturar a ação do "button" dos forms contidos no "body" abaixo:

<body>

    <form method="post" action="pagina.php">
      <fieldset>
          <p class="center">
          <input type="hidden" name="funcionario" value="entrada-almoxarifado"></input>
          <button class="btn" style="width: 250px;" type="submit" value="submit">entrar</button>
          </p>
      </fieldset>
   </form>

</body>

</html>

Já tentei várias e várias sugestões encontradas na internet, mas como não sei adaptar os códigos encontrados, não tem dado certo. Alguém poderia me explicar detalhadamente como modificar o script contido no head da minha página, parte por parte, para que o mesmo continue executando sua função só que capturando a ação do "button" do formulário?

Agradeço de coração quem puder se dispor a ajudar.

Sds,

Mary

gsinhorini · Novembro 30, 2018

Olá Mary, muito bom dia!

Quando eu quero colocar um ação em um botão html normalmente utilizo ou de uma class ou do id do botão.

Se serão vários botões com a mesma função ai você utiliza o class.

Se foi somente um botão único utiliza o id.

ex Class

<button type="button" class="btn nome-class" data-nome = "valor que quer passar"> button </button>

<script type="text/javascript">
	$('.nome-class').on('click', function () {
      var variavel = $(this).attr("data-nome");
		// Assim você pega a contida informação no data-nome que quer.
	});
</script>

ex id

<button type="button" class="btn " id="nome" data-nome = "valor que quer passar"> button </button>

<script type="text/javascript">
	$('#nome').on('click', function () {
      var variavel = $(this).attr("data-nome");
		// Assim você pega a contida informação no data-nome que quer.
	});
</script>

Omar~ · Novembro 30, 2018

@MaryDelBrollo Não entendi qual é/são os botões que você quer capturar dados.

Certo, na lógica você quer capturar os que estão nos forms.

Mas veja, mesmo que pegue esse valor, você está executando o formulário, logo os dados deixaram de existir quando o form for validado.

Sobre o seu código...

O ajax está bom, ele redireciona para o endereço e envia um valor GET['function']

Só essa parte aconselho que fosse assim: xmlhttp.open("GET", set_status, true);

Para deixar a requisição síncrona.

A função led()

Isso aqui por exemplo var on = document.querySelector(".on");

O javascript irá percorrer o DOM em busca do primeiro elemento que contenha a class on exemplo:

<button class="on"></button>

Então esse seria o alvo da função que chama outra função

Ou seja podemos otimizar tudo para uma única camada

Spoiler


<button class="on">Esse é o on</button>
<button class="off">Esse é o off</button>

<script>
    document.querySelector('.on').addEventListener('click', led, false);
    document.querySelector('.off').addEventListener('click', led, false);

    function led(e) {
        var alvo = e.target, status;
        if (alvo.classList.contains('on')) {
            // Isso que dizer que para entrar nessa condição o gatilho que disparou
            // o evento para essa função tem que conter a class "on"
            status = 'led13_on';
        } else {
            // Então se quem disparou o evento não tem a class "on"
            status = 'led13_off';
        }
        led_controle(status); // Chama a função enviando como parâmetro o status
    }
</script>

Obs.:: Como a função led não se dispara sozinha ela pode está em arquivos JS ou na HEAD do documento

Independente o código que você postou está funcional (por isso não entendi onde quer chegar), só que como você está buscando por elementos DOM é ideal que a função/evento que o usa, venha depois do elemento se criado pelo browser, ou seja adicionando o script depois do elemento, normalmente o uso mais coeso é por scripts assim no final do BODY

A confusão aqui são os forms que não tem haver diretamente com o perguntado.

Então fico no aguardo se a ação dos botões ON/OFF deve interagir com os formulários.

Entrar

Arquivado

Capturar ação de botão de formulário (button) html para chamar função javascript

Pergunta

MaryDelBrollo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

2 respostas a esta questão

Recommended Posts

gsinhorini 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Omar~ 87

Compartilhar este post

Link para o post

Compartilhar em outros sites

Sistema não funciona corretamente

Fazer busca no Banco de dados usando vários critério

Ler campos com caracteres especiais no xml

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante