Jump to content
  • 0
MaryDelBrollo

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

Question

 

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:

 

<html lang="pt-br">
<head>

    <script type='text/javascript'>

        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>

          <p><a class="btn on">ON</a></p>
          <p><a class="btn off">OFF</a></p>

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

 

   <form method="post" action="pagina.php">
      <fieldset>        
          <p class="center">
          <input type="hidden" name="funcionario" value="saida-almoxarifado"></input>
          <button class="btn" style="width: 250px;" type="submit" value="submit">sair</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

 

Share this post


Link to post
Share on other sites

2 answers to this question

Recommended Posts

  • 0

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>

 

Share this post


Link to post
Share on other sites
  • 0

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By violin101
      Caros Amigos,
       
      saudações...
       
      Desculpa a recorrer ao auxílio dos amigos, mas estou com um pequeno problema que não estou conseguindo entender.
       
      A página inicial do meu Sistema tem um CAROUSEL com um SLIDER que deveria iniciar junto com a página. 
      INFELIZMENTE algumas vezes não inicia e para EXECUTAR o o Slider deve pressionar F5.
       
      Algumas vezes quando o Slider inicia depois de um período para o LOOP, não entendo isso.
       
      Abaixo o código do SLIDER.
      /*----------------------------------------*/ /* 01. Main Slider Ativação e Velocidade do Slide /* /* Como consigo resolver esse problema para o Slider INICIAR com um LOOP infinito /* sem ter que ficar atualizando a página ? /* /*----------------------------------------*/ $(".slider_active").owlCarousel({ loop: true, margin: 0, nav: true, autoplay: true, infinite: true, items: 1, autoplayTimeout: 10000, navText: ["<i class='fa fa-caret-left'></i>", "<i class='fa fa-caret-right'></i>"], dots: true, autoHeight: true, lazyLoad: true });  
      Grato,
       
      Cesar
    • By Person
      Estou fazendo um protótipo de e-commerce com aps clássico e sql server, na parte de administração, o usuário administrativo pode alterar o status do pedido,  para isso ele clica no botão de alterar na pagina principal e é redirecionado para um formulário onde tenho as options, para que ele mude o status, coloquei um botão para que ele passe os parâmetros  (id_pedido e id_status_pedido) para a pagina de manutenção, onde é feito o update e o envio de e-mail com as atualizações. Mas quero retirar esse botão e fazer com que, assim que eu clique em uma opção, ele altere, sem eu precisar ser redirecionado para a tela de manutenção, isso com o Ajax se possível.
       
      <body> <% call Abredb() cod = Request.QueryString("cod") evt = Request.QueryString("evt") if cod <> "" then cod = cint(cod) end if if ucase(evt) = "ALT" then sql = "exec SP_TR32_status_frm_SEL" 'Response.Write(sql) 'Response.End() set rs = dbWeb.execute(sql) estrato = rs("id_status_pedido") bot = "Alterar" end if %> <div class="container"> <div class="titulo">Formulario</div> <form action="manu_pedido.asp" method="post" enctype="multipart/form-data"> <div class="detalhes-formulario"> <div class="input-box"> <span class="detalhes">status</span> <select class="form-control" name = "status"> <% do while not rs.eof%> <option value="<%=rs("id_status_pedido")%>"><%=rs("descricao")%></option> <% rs.movenext loop rs.close set rs = nothing %> </select> </div> </div> <button><a href="/treinamento/Thau/mini_mercado/adm/manu_pedido.asp?evt=alt&cod="<%=cod%>"&estrato="<%rs("id_status_pedido")%> </form> </div> <br> </body> <%call Fechadb()%> </html> Abaixo está o código da minha pagina de manutenção, no qual acontece a alteração do status
      <% Function ZerosEsquerda(Num,tam) Dim Zero Num = Trim(Num) Zero = "" For i = Len(Num) To tam - 1 Zero = "0" & Zero Next ZerosEsquerda = Trim(Zero & Num) End Function byteCount = Request.TotalBytes RequestBin = Request.BinaryRead(byteCount) Set UploadRequest = CreateObject("Scripting.Dictionary") BuildUploadRequest RequestBin 'opc = request.QueryString("opc") 'if opc = "" then 'cod = UploadRequest.Item("hfcod").Item("Value") 'botao = UploadRequest.Item("botao").Item("Value") 'estrato = UploadRequest.Item("estrato").Item("Value") 'end if session.LCID = 1046 call Abredb() if botao = "Alterar" then ' ALTERANDO OS DADOS RECEBIDOS NA TABELA sql = "exec SP_TR32_pedido_UPD "&cod&", '"&estrato&"'" 'response.write sql 'response.end dbWeb.execute(sql) str_html = "" str_html = str_html & "<HTML><BODY BGCOLOR=#0000FF>" str_html = str_html & "<h1>produtos</h1>" sql ="SP_TR32_email__itens_sel "&cod&"" set rs = dbWeb.execute(sql) str_html = str_html & "<table>" str_html = str_html & "<thead>" str_html = str_html & " <tr>" str_html = str_html & "<th>Produtos</th>" str_html = str_html & "<th>quantidade</th>" str_html = str_html & " <th>Total</th>" str_html = str_html & "</tr>" str_html = str_html & " </thead>" str_html = str_html & "<tbody>" do while not rs.eof str_html = str_html & "<tr>" str_html = str_html & "<td >"&rs("produto")&"</td>" str_html = str_html & "<td >"&rs("quantidade")&"</td>" str_html = str_html & "<td >"&rs("total")&"</td>" str_html = str_html & "</tr>" rs.movenext loop rs.close set rs = nothing str_html = str_html & " </tbody>" str_html = str_html & "</table>" str_html = str_html & "</BODY></HTML>" sql = "SP_TR32_email_sel "&cod&"" set rs = dbWeb.execute(sql) if estrato<>"" then Set ObjMail = Server.CreateObject("Cdonts.Newmail") objMail.Subject = "Atualização de pedido" objMail.From = "Porto Dourado <contato@email.websupply.com.br>" objMail.To = "request("email")" objMail.BodyFormat = 0 objMail.MailFormat = 0 objMail.Body = "Olá"&" "&rs("nome")&" "&rs("sobrenome")&", </br> Houve uma atualização em seu pedido pedido: "&rs("id_pedido")&" </br> o status mudou para: "&rs("descricao")&" </br> endereço de entrega: "&rs("cep")&", "&rs("rua")&", "&rs("bairro")&", "&rs("numero")&", "&rs("cidade")&", "&rs("Uf")&" </br>Total pedido: "&rs("total_pedido")&" </br> "& str_html &" </br></br>"&" Atentamente,"&" </br> "&"Equipe Porto dourado"&" </br></br> "&"Para entrar em contato com a equipe de suporte, entre em contato com o email ou ligue para nossa central no numero " objMail.Send Set objMail = nothing envio = true %> <script> alert('email com alteração enviado com sucesso!'); </script> <% end if if estrato = 6 then sql = "exec SP_TR32_adm_data_envio_UPD "&cod&"" dbWeb.execute(sql) end if if estrato = 4 then sql = "exec SP_TR32_adm_data_entregue_UPD "&cod&"" dbWeb.execute(sql) end if %> <script> alert("Dados alterado com sucesso!") parent.location = "cst_pedido.asp" </script> <% end if %> <%call Fechadb()%>  
    • By srs1999_
      Tópico
       
      Site em Código
      Sobre desenvolver sites sem o wordpress que ja tá tudo ali feito que seja um site dinâmico ou seja com banco de dados , APIs de pagamento, Painel para o usuário ,  além de todas  as funções que tem no wordpress e você teria propriedade pra explicar sobre detalhes mais técnicos da produção onde no wordpress só quem entende de progrqmação explicaria algum detalhe técnico 
      Então usando basicamente : 
      FRONT END 
      HTML 
       CSS 
      JAVASCRIPT 
      ALGUMA DE BACKEND COMO PHP E BANCO DE DADOS
      Pode se criar sites/sistemas tão bons ou melhores que no wordpress
       
      Fato : o proprio wordpress é feito em php e ate o proprio facebook tbm em php
      Fato 2 :  cerca de 70% dos sites são feitos em Wordpress
       
      Acho esse lance de procurar o caminho mais fácil limita muito a pessoa por exemplo é facil editar imagens no paint bem intuitivo , agora para editar no photoshop com muitas outras possibilidades  acaba sendo importante ir explorando essa elaboração mais difícil  com um mesmo objetivo. No caso do exemplo ( editar imagens )  
       
      Reflexão:
      Vale a pena se dedicar a trabalhar com a ferramenta Wordpress apenas por ser um meio rápido de ganhar dinheiro ?
      Ou trabalhar sem wordpress  usando tudo que exigido pra criar coisas originais mais que não seria tão rápido a produção. Mas creio que além dos sites feitos também geraria a possibildade de vender o sistema web criado para o cliente personalizar .
       
      Você Desenvolveria de que forma :
       Wordpress apenas ?
       
      Conhecer programação pra trabalhar 
      com  Wordpress ?
       
      Produzir tudo só com programação totalmente dinâmico sem  Wordpress?
    • By Joob
      Boas Malta,
       
      Queria ver se me conseguiam ajudar.
      Tenho um Search Bar em Vue,  quando faço uma pesquisa dos ficheiros ou pastas, dá-me sempre como se nada fosse encontrado, ou seja não dá o resultado, imaginemos por exemplo a pasta tem um nome de "Pasta Numero" eu começava a pesquisar com "P" ou com o "N" e supostamente deveria pesquisar tudo o que tem "P" e "N" (pastas e ficheiros).
       
      Resolvido
       
      Obrigado :)
    • By zuuzu
      Olá, estou desenvolvendo uma api para download de fotos/videos/gif, eu consegui fazer tudo certinho, mas na hora de gerar um link de download aleatório ele gera sempre o mesmo, só gera um link diferente se eu reiniciar o servidor, queria que gerasse um link diferente sempre que eu reiniciasse a página, sem precisar reiniciar o servidor. Tem como alguém me ajudar com isso? *A api está sendo desenvolvida para a automatização de download de fotos/videos/gif*

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.