How to run a link without the output showing

Question

Hi all I might be way off so please let me know if there is a better way, but I have is some tasmoto sonoff devices and I have this link of code on a button to toggle the light on and off

http://192.168.1.126/cm?cmnd=Power%20toggle'" />

now when I do that I get the output from the command I guess I wouldn't mind the output as a status to know what the light is doing as I would like to show that as well but the output is shown on a different page so I can't use this on a screen as a button yet

HTML code I know its wrong how do I fix it, please

    <html>
    <body>

    <form>
        <input class="MyButton" type="button" value="Office Toggle" onclick="window.location.href='http://192.168.1.126/cm?cmnd=Power%20toggle'" />
        <br>
        <input class="MyButton" type="button" value="Fishtank Toggle" onclick="window.location.href='http://192.168.1.128/cm?cmnd=Power%20toggle'" />


    </form>




}


    </body>
        function togglelight() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      console.log(this.responseText); //To check output while error[Optional]
    }
  };
  xhttp.open("GET", "http://192.168.1.126/cm?cmnd=Power%20toggle", true);
  xhttp.send();

    </html>

I'm Limit · Answer 1 · 2019-08-06T04:50:03.787

0

UPDATE(with more useful): You need to use AJAX to open without redirect to output

With your requirement

var status;

function togglelight(btn, lastip) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      status = this.responseText;
      console.log(status); //To check output [Optional]

      if (status.localeCompare("on")) {
        btn.classList.add("on");
      } else {
        btn.classList.remove("on");
      }
    }
  };
  // You need to used this
  // xhttp.open("GET", "http://192.168.1."+lastip+"/cm?cmnd=Power%20toggle", true); 

  // For Stack overflow Test only
  xhttp.open("GET", "https://raw.githubusercontent.com/limitbrk/Test/master/lighttoggle.txt", true);

  xhttp.send();
}

input.on {
  background-color: #88ff88;
}

input:not(.on) {
  background-color: #ff8888;
}

<input class="MyButton" type="button" value="Office Toggle" onclick="togglelight(this,126)" />
<br>
<input class="MyButton" type="button" value="Fishtank Toggle" onclick="togglelight(this,128)" />

SORRY old answer not matched your question

Use POST method

See different of POST vs GET methods

    <form method="post" action="http://192.168.1.126/cm">
      <input name="cmnd" value="Power toggle">
      <input type="submit">
    </form>

edited Aug 06 '19 at 04:50

answered Aug 06 '19 at 01:46

I'm Limit

889
5
18

Hi mate thanks forthat bu it still went to the next page and i need to use buttons i will be happy to try anything else – Adam Wolarczuk Aug 06 '19 at 01:55
Ok i see maybe you need to used **AJAX** with `XMLHttpRequest` like another answer – I'm Limit Aug 06 '19 at 01:57
Using either POST/GET with form will just direct the request to the action/link attribute of the form. – Francis G Aug 06 '19 at 01:57
Sorry I have update answer. i didnt read question clearly. **SORRY** – I'm Limit Aug 06 '19 at 02:07
you forget closed blanket "}" on function togglelight() – I'm Limit Aug 06 '19 at 03:36
for your required – I'm Limit Aug 06 '19 at 04:14

Abel · Answer 2 · 2019-08-06T03:13:50.513

0

Javascript ajax calls sound like what you are looking for. They allow a page to essentially be loaded without loading to your browser. You can also have operations performed on what would have loaded as that can be accessed by the script makung the call. Some decent pure javascript ajax code:

How to make an AJAX call without jQuery?

    <html>
    <body>

    <form>
        <input class="MyButton" type="button" value="Office Toggle" onclick="togglelight('126')" />
        <br>
        <input class="MyButton" type="button" value="Fishtank Toggle" onclick="togglelight('128')" />


    </form>


    </body>

<script type="text/javascript">
        function togglelight(ipstr) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      console.log(this.responseText); //To check output while error[Optional]
    }
  };
  xhttp.open("GET", "http://192.168.1."+ipstr+"/cm?cmnd=Power%20toggle", true);
  xhttp.send();
}
</script>
    </html>

May your fish be...

edited Aug 06 '19 at 03:13

answered Aug 06 '19 at 01:51

Abel

111
4

hi mate looks like that i am needing i will take a look :) – Adam Wolarczuk Aug 06 '19 at 02:01
Ok i am really dumb when it comes to this how would i get this to work mate, sorry for been so dumb on it – Adam Wolarczuk Aug 06 '19 at 02:31
Your updated code seems be missing script tags. Like the body is declared as a body, your javascript needs to go between . Onclick also needs to call the javascript function. – Abel Aug 06 '19 at 02:51
Your codeshare is missing the close bracket that you corrected before w/ I'm Limit. Try copying the codeblock from my edited answer. – Abel Aug 06 '19 at 03:50

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

0

So you want to run a link/page without leaving a showing its result/s. Why not take a look at the XMLHttpRequest. You can do request without leaving your original page. Here is an example.

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  // check the response status/state
  if (this.readyState == 4 && this.status == 200) {
    //Create a response action here
  }
};
// create a request
xhttp.open("GET", "http://192.168.1.126/cm?cmnd=Power%20toggle", true);
xhttp.send();

Hope this helps you.

Edit

Your code will look like this

function togglelight() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      console.log(this.responseText); //To check output while error[Optional]
    }
  };
  xhttp.open("GET", "http://192.168.1.126/cm?cmnd=Power%20toggle", true);
  xhttp.send();
}

<html>
<body>
  <input class="MyButton" type="button" value="Office Toggle" onclick="togglelight()" />
  <br>
  <input class="MyButton" type="button" value="Fishtank Toggle" onclick="togglelight()" />
</body>
</html>

edited Jun 20 '20 at 09:12

Community

1
1

answered Aug 06 '19 at 01:54

Francis G

1,040
1
7
21

I have added code to main question please let me know what silly mistake i am doing – Adam Wolarczuk Aug 06 '19 at 02:38
on your button why did you call `window.location.href='http://192.168.1.128/cm?cmnd=Power%20toggle'` in the onclick and not the function for the `XMLHttpRequest`? – Francis G Aug 06 '19 at 02:47
I've edited my answer, your code should look like that – Francis G Aug 06 '19 at 03:03
cool do i drop the function under the body area or outside of that – Adam Wolarczuk Aug 06 '19 at 03:07
you forget closed blanket "}" on function togglelight() – I'm Limit Aug 06 '19 at 03:34
cool that worked thanks mate do i just created another funtion for eatch button and you said something aobut been able to how the output as well all i really want to see if on or off or maybe make the button red is off green if on ?? – Adam Wolarczuk Aug 06 '19 at 03:40
I need your return status by default (Or you can use `this.responseText` with If Clause change button color) – I'm Limit Aug 06 '19 at 03:48
can you please give me a hint how to start this plpease please please – Adam Wolarczuk Aug 06 '19 at 04:07
@AdamWolarczuk please mark the answers that solve your problem so this thread can be close – Francis G Aug 06 '19 at 05:17

score 0 · Answer 4 · answered Aug 06 '19 at 02:02

0

May you consider using iframe?

<a href="http://192.168.1.126/cm?cmnd=Power%20toggle" target="hidden_frame">Toggle the Light</a>

<iframe src="" name="hidden_frame" style="display:none;"></iframe>

answered Aug 06 '19 at 02:02

Chaska

3,165
1
11
17

How to run a link without the output showing

4 Answers4

Edit