The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Problems with from submitting data, Cannot get what should be a straightforward form to work!
PhilTilson
post Oct 28 2019, 02:24 PM
Post #1





Group: Members
Posts: 3
Joined: 28-October 19
Member No.: 27,025



Hi -

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

Attached Image

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.

This post has been edited by PhilTilson: Oct 28 2019, 02:25 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Liam Quinn
post Oct 28 2019, 05:42 PM
Post #2


WDG Founder
***

Group: Root Admin
Posts: 52
Joined: 2-August 06
From: Canada
Member No.: 1



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
PhilTilson
post Oct 29 2019, 06:01 AM
Post #3





Group: Members
Posts: 3
Joined: 28-October 19
Member No.: 27,025



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:

Attached Image

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!)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 29 2019, 09:21 AM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,456
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
PhilTilson
post Oct 29 2019, 12:12 PM
Post #5





Group: Members
Posts: 3
Joined: 28-October 19
Member No.: 27,025



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 10th December 2019 - 03:16 AM