How to send data from html to controller and reload the page

Question

I have written a code for sending data from webpage to controller. I am not a html guy and I have written using some templates. I have created a form and I wanted to send the baudrate value to controller.

<TABLE width=50%>
    <TBODY>
        <TR>
            <TD width=80%>
                <TABLE width=80%>
                    <TBODY>
                        <TD>
                        <FORM name="baudrate" action="baudrate.cgi" method="get">
                            <TABLE width="100%" border="1" cellpadding="2" cellspacing="2">
                                <TBODY>
                                    <TR>
                                        <TD align=center><FONT style="FONT-SIZE: 8pt" face=Arial>&nbsp;<B>Baud Rate:</B></FONT></TD>
                                        <TD align=center height=25><FONT style="FONT-SIZE: 8pt" face=Arial>&nbsp;<!--#p0br--> bits/second</FONT></TD>
                                        <TD><FONT style="FONT-SIZE: 8pt" face=Arial>&nbsp;<select size="1" name="br"><option value="230400">230400</option><option value="115200">115200</option><option value="57600">57600</option><option value="38400">38400</option><option value="19200">19200</option><option value="14400">14400</option><option value="9600">9600</option><option value="4800">4800</option><option value="2400">2400</option><option value="1200">1200</option><option value="600">600</option><option value="300">300</option><option value="110">110</option></select>&nbsp;bits/S<br></FONT></TD>
                                    </TR>
                                    <TR>
                                        <TD></TD>
                                        <TD align="center"><input name="" value="Apply" onclick="window.history.go(0); return false; "type="submit"></TD>
                                    </TR>
                                </TBODY>
                            </TABLE>
                        </FORM>
                        </TD>
                    </TBODY>
                </TABLE>
            </TD>
        </TR>
    </TBODY>    
</TABLE>

In the above code, On clicking the submit I wanted to send the br value to the controller by calling the baudrate.cgi function and I wanted to reload the page. If I give

<TD align="center"><input name="" value="Apply" onclick="window.history.go(0) "type="submit" ></TD>

Then the webpage is able to send to controller and the reload is also happening but it is only happening in microsoft edge browser and in other browsers it is giving error. If I use Then the webpage is not able to send the data to the controller but it is refreshing in all the browsers.

Is there any other way to achieve this ? Can anyone please help me?

Regards, Vibhu.

Answer 1

Use an AJAX request that sends and receives that data through JavaScript. This way you can create your own logic on what will happen when you submit the form. If I understand correctly, you want the following:

submit form -> send data to controller -> get response -> reload page

First of all, remove the onclick event handler. It will interfere with our new listener that will fire a HTTP request to the server. Add a JS file to your HTML or write all JS inside a <script> element. Just put them at the bottom of the page before the closing </body> tag.

So in barebones, your form is like the example below.

<form name="baudrate" action="baudrate.cgi" method="get">

  ...

  <select size="1" name="br">
    <option value="230400">230400</option>
    <option value="115200">115200</option>
    <option value="57600">57600</option>
    <option value="38400">38400</option>
    <option value="19200">19200</option>
    <option value="14400">14400</option>
    <option value="9600">9600</option>
    <option value="4800">4800</option>
    <option value="2400">2400</option>
    <option value="1200">1200</option>
    <option value="600">600</option>
    <option value="300">300</option>
    <option value="110">110</option>
  </select>

  ...

</form>

You'll need to select the form element and add an event listener to it. This is similar to doing onclick but now with the addEventListener method. This method allows you to bind multiple functions to a single event instead just having one.

Listen for the submit event. This event will be triggered whenever a form has been, you guessed it, submitted. An input type="submit" or button type="submit" is required for this to work properly.

Now in the function which you will fire whenever a submit on your form is fired will contain the logic for the AJAX call to the server. You'll need to get the current value of the select name="br" element and send it to the baudrate.cgi controller. So the url for the AJAX call should look something like this: 'baudrate.cgi?br=14400'.

Whenever you send the request, two things can happen. Either you get a response, and hopefully a good one, or you get an error.

In case of a succesful response use location.reload() to reload the page. In case of an error, simply log it and debug your .cgi code to make it work properly.

I suggest that you try the example below. Like I mentioned above, add a .js file to the HTML or paste the JS into a <script> tag. And remember to place it at the bottom of the page.

Let me know if this works out and if it is of any help.

// Select the form element.
const form = document.querySelector('form[name="baudrate"]');

// Listen for when the form submits.
form.addEventListener('submit', function(event) {

  // Cancel the default submit.
  event.preventDefault();

  // Get the value from the select element and add it 
  // to the url to send it to the .cgi file.
  const select = form.elements['br'];
  const url = 'baudrate.cgi?br=' + select.value;

  // Send the data and get a response.
  fetch(url).then(function(response) {
    if (response.status === 200) { // If it is a successful response.
      return response.text();
    }
  }).then(function(text) {
    console.log(text); // Show the response from the server.
    location.reload(); // Reload the page.
  }).catch(function(error) {
    console.log(error); // If anything went wrong, show the error.
  });

});