How to make a single button on and off and click send value in URL

Asked

Viewed 1,562 times

0

In the code below each I have two Forms one to send the value 1 and one to send 0 and both Forms send this value via GET

When I send the GET PUMP STATUS N°1::="motor": receives the return of the PLC

PUMP STATUS N°1::=true

PUMP STATUS N°1::=false

Bind

/index2.html?" engine"=1

Hang up

/index2.html?" engine"=0

How do I make a single send button via GET and change the button text to On and Off ?

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="utf-8">
        <title>Liga Desliga</title>
    </head>
    <body>

        <form>
            <p>
                <input type="submit" value="LIGA">
                <input type="hidden" name='"motor"' value ="1">
            </p>
        </form>

        <form>
            <p>
                <input type="submit" value="DESLIGA">
                <input type="hidden" name='"motor"' value ="0">
            </p>
        </form>

        STATUS BOMBA N°1::="motor":

    </body>
</html>
javascript html jquery
  • 1

    You can do it on the client, but I’d do it on the server side. Javascript would be a bit boring because every time the page will be loaded, javascript will also be reloaded.

  • @Francisco I know that when I send the value I get a RETURN on this variable inside the html STATUS PUMP N°1::="engine": True or False ai can make the logic.

  • I didn’t understand kk. I would have put the example of this in your question?

  • @Francisco this html page is inserted inside a PLC, this is instead of hosting in a hosting, I host in the PLC and this PLC has database, so when I send a command I get a response and this reply I get in this tag "engine" understood this to mean that the input name gets a value. got it ?

  • @Francisco the name='"motor"' picks up the value coming from the PLC ai this gets STATUS PUMP N°1::=true or STATUS PUMP N°1::=false

  • What language would that be?

  • The programming inside the CLP is LADDER is a language where the programmer drags and drops the logic https://www.citisystems.com.br/linguagem-ladder/ now the CLP is very interesting the methodology regarding the variables of capture and sending, nothing abnormal, but catches agent by surprise, You have to study hard to understand. check out a tutorial on the Siemens S7 1200 https://www.dmcinfo.com/latest-thinking/blog/id/8567/siemens-s7-1200-web-server-tutorial-from-getting-started-to-html5-user-defined-pages

Show 2 more comments

1 answer

1


If it is possible to add a script on the page, you can try something like the one developed in the code below:

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="utf-8">
        <title>Liga Desliga</title>
        <script>
            var motorStatus = parseInt(decodeURIComponent(window.location.search.substr(1)).split('=')[1] || 0);

            window.onload = function(){
                if(motorStatus == 0){
                    document.querySelector('form[name="controlador"] input[type="submit"]').value = 'LIGA';
                    document.querySelector('form[name="controlador"] input[type="hidden"]').value = '1';
                } else{
                    document.querySelector('form[name="controlador"] input[type="submit"]').value = 'DESLIGA';
                    document.querySelector('form[name="controlador"] input[type="hidden"]').value = '0';
                }
            }
        </script>
    </head>
    <body>
        <form name="controlador">
            <input type="submit" value="LIGA">
            <input type="hidden" name='"motor"' value ="1">
        </form>
        STATUS BOMBA N°1::="motor":
    </body>
</html>

Browser other questions tagged javascript html jquery

You are not signed in. Login or sign up in order to post.