Help - Search - Members - Calendar
Full Version: Problems with from submitting data
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
PhilTilson
Hi -

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

Click to view attachment

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.
Liam Quinn
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.
PhilTilson
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:

Click to view attachment

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!)
pandy
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.
PhilTilson
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... smile.gif
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2020 Invision Power Services, Inc.