HTMLHelp Forums [Powered by Invision Power Board]

Posted by: PhilTilson Oct 28 2019, 02:24 PM

Hi -

I am dealing with what should be a relatively simple form. It looks like this:

The functionality is pretty obvious - The Save Settings button should save the values in the five text fields; the other three buttons simply carry out a single function. The page is being served up by an ESP8266 and the results of the form actions are being dealt with in a handleRoot() function.

I have tried what seems like a hundred different ways of getting this to work - without success! The code for this current version is as follows:

CODE

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="refresh" content="15">
    <style type="text/css">
      .button{padding:5px; font-size:14px; width:90px; border-radius:4px; margin-right:10px;}
      .long{width:179px;}
      .controls{margin-left:80px; margin-right:30px; margin-top:20px; width:100px;}
      .val{padding:3px; width:50px; border-style:inset; background-color:white;
        color:black; height:20px; font-family:Arial,Helvetica,sans-serif; font-size:14px; font-weight:bold;}
      h2{margin:0px; color:blue; font-family:Arial,Helvetica,sans-serif;}
      h4{font-size:14px; font-family:Arial,Helvetica,sans-serif; margin:10px;
        margin-top:0px; padding:6px; border:2px; color:black; text-align:center;}
      h4.b{border-style:inset;}
      span.caption{font-family:Arial,Helvetica,sans-serif; font-size:14px; margin-top:0px;
        margin-right:5px; padding:0px; color:black; text-align:right;}
    </style>
  <title>WakeUp Light</title>
  </head>
  <body>
    <div style="background-color:black; width:700px; padding:3px;">
      <div style="background-color:LightCyan; padding:5px;">
        <table style="width:100%;">
          <tr>
            <td style="width:100px;">
              <h2>Timings:</h2>
            </td>
            <td>
              <h2 style="float:right;">@@time@@</h2>
            </td>
          </tr>
        </table>
      </div>
      <div style="background-color:LightCyan; color:white; padding:10px">
        <form id="frmSettings"></form>
        <table style="width:100%; border:none; padding:10px;">
          <tr>
            <td><span class="caption" style="text-align: right;">Time On (Day):</span></td>
            <td><input class="val" type="text" name="DayTimeOn" form="frmSettings" value="@@onDay@@"></td>
            <td><span class="caption" style="text-align: right;">Time On (Night):</span></td>
            <td><input class="val" type="text" name="NightTimeOn" form="frmSettings" value="@@onNight@@"></td>
            <td><span class="caption" style="text-align: right;">Time Off (Night):</span></td>
            <td><input class="val" type="text" name="NightTimeOff" form="frmSettings" value="@@offNight@@"></td>
          </tr>
            <tr><td><br /></td></tr>
          <tr>
            <td><span class="caption" style="color:black;">Day Level</span></td>
            <td><input class="val" type="text" name="DayLevel" form="frmSettings" value="@@dayLevel@@"></td>
            <td><span class="caption" style="color:black;">Night Level:</span></td>
            <td><input class="val" type="text" name="NightLevel" form="frmSettings" value="@@nightLevel@@"></td>
            <td></td>
            <td><input class="button" style="width:120px" type="submit" form="frmSettings" value="Save Settings"></td>
          </tr>
        </table>
        <table style="width:100%; border:none; padding:10px;">
          <tr>
            <td>
              <form method="POST" target="_self">
                <input class="button controls" type="submit" name="btn_DayOn" value="Day On">
              </form>
            </td>
            <td>
              <form method="POST" target="_self">
                <input class="button controls" type="submit" name="btn_NightOn" value="Night On">
              </form>
            </td>
            <td>
              <form method="POST" target="_self">
                <input class="button controls" type="submit" name="btn_AllOff" value="All Off">
              </form>
            </td>
          </tr>
        </table>
      </div>
      <div style="background-color:LightGreen; color:black; width:680px; padding:10px;">
        <table style="width:100%; border:none; padding:10px">
          <tr>
            <td><span class="caption" style="float:left; color:black;">@@response@@</span></td>
            <td><span class="caption" style="float:right; color:black;">@@status@@</span></td>
          </tr>
        </table>
      </div>
    </div>
  </body>
</html>

The results of this version are that clicking on Save Settings does, indeed, have the desired effect. However, when one of the other three buttons is clicked, whilst the required action takes place, my browser then comes up with a "Connection was Reset" message and a Try Again button! Clicking this button does not relaod the page, but just repeats the error. Reloading the page manually brings everything back to normal.

I am aware that some of the construction of the page is less than optimum(!) but this is the closest I have got to something that works.

Can anyone please suggest why I am getting the error described - and how to avoid it? Many thanks in anticipation.

Posted by: Liam Quinn Oct 28 2019, 05:42 PM

The 3 buttons that don't work are each in their own form, with no "action" attribute. I would have expected an "action" attribute for each <form> tag.

If you don't want the form to actually submit to the server, you would need your JavaScript to block the form submission. Using event.preventDefault() on the form submit event would be one approach for that.

Posted by: PhilTilson Oct 29 2019, 06:01 AM

QUOTE(Liam Quinn @ Oct 28 2019, 10:42 PM)

The 3 buttons that don't work are each in their own form, with no "action" attribute. I would have expected an "action" attribute for each <form> tag.

If you don't want the form to actually submit to the server, you would need your JavaScript to block the form submission. Using event.preventDefault() on the form submit event would be one approach for that.

But that's the point! Those three buttons DO work as they should - but after about a second or two I get this:

If only I could stop this from happening, the page would be doing exactly what I want (except for the updating of the time field every second, but that's for another day!)

Posted by: pandy Oct 29 2019, 09:21 AM

So what do those buttons do before you get the error message? I don't see how anything more than reloading the page could happen.

Alas I don't understand why you get the error message.

Posted by: PhilTilson Oct 29 2019, 12:12 PM

QUOTE(pandy @ Oct 29 2019, 02:21 PM)

So what do those buttons do before you get the error message? I don't see how anything more than reloading the page could happen.

Alas I don't understand why you get the error message.

Yes, I'm sorry - I should have posted a bit of code! The handleRoot routine did look like this:

CODE

void handleRoot() {

  String genout;
  String webPage = settingsPage;

  if(server.argName(0)=="btn_DayOn") {
    dayOn();
    return;
  }
  if(server.argName(0)=="btn_NightOn") {
    nightOn();
    return;
  }
  if(server.argName(0)=="btn_AllOff") {
    allOff();
    return;
  }
  if(server.arg(0) != "") {
    tOnDay = server.arg(0);
    tOnNight = server.arg(1);
    tOffNight = server.arg(2);
    dayLevel = server.arg(3);
    nightLevel = server.arg(4);
    saveSettings(dayLevel,nightLevel,tOnDay,tOnNight,tOffNight);
  }

  webPage.replace("@@time@@",dtg);
  webPage.replace("@@onDay@@",tOnDay);
  webPage.replace("@@onNight@@",tOnNight);
  webPage.replace("@@offNight@@",tOffNight);
  webPage.replace("@@dayLevel@@",dayLevel);
  webPage.replace("@@nightLevel@@",nightLevel);
  webPage.replace("@@response@@",strResponse);
  webPage.replace("@@status@@",strStatus);

  server.send(200,"text/html",webPage);
}

which is when I got the errors. However, I removed the 'return' commands and made the questions into if-else elements like this:

CODE

void handleRoot() {

  String genout;
  String webPage = settingsPage;

  if(server.argName(0)=="btn_DayOn") {
    dayOn();
  }
  else if(server.argName(0)=="btn_NightOn") {
    nightOn();
  }
  else if(server.argName(0)=="btn_AllOff") {
    allOff();
  }
  else if(server.arg(0) != "") {
    tOnDay = server.arg(0);
    tOnNight = server.arg(1);
    tOffNight = server.arg(2);
    dayLevel = server.arg(3);
    nightLevel = server.arg(4);
    saveSettings(dayLevel,nightLevel,tOnDay,tOnNight,tOffNight);
  }

  webPage.replace("@@time@@",dtg);
  webPage.replace("@@onDay@@",tOnDay);
  webPage.replace("@@onNight@@",tOnNight);
  webPage.replace("@@offNight@@",tOffNight);
  webPage.replace("@@dayLevel@@",dayLevel);
  webPage.replace("@@nightLevel@@",nightLevel);
  webPage.replace("@@response@@",strResponse);
  webPage.replace("@@status@@",strStatus);

  server.send(200,"text/html",webPage);
}

and everything now works as it should! Now to work out how to update the time, response and status fields as they change. I feel some Javascript coming on...

Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ Problems with from submitting data

Posted by: PhilTilson Oct 28 2019, 02:24 PM

Posted by: Liam Quinn Oct 28 2019, 05:42 PM

Posted by: PhilTilson Oct 29 2019, 06:01 AM

Posted by: pandy Oct 29 2019, 09:21 AM

Posted by: PhilTilson Oct 29 2019, 12:12 PM