Используйте запрос AJAX, который отправляет и получает эти данные через JavaScript. Таким образом, вы можете создать свой собственный лог c о том, что произойдет, когда вы отправите форму. Если я правильно понимаю, вам нужно следующее:
submit form -> send data to controller -> get response -> reload page
Прежде всего удалите обработчик события onclick. Это будет мешать нашему новому слушателю, который будет запускать HTTP-запрос к серверу. Добавьте файл JS к вашему HTML или запишите все JS внутри элемента <script>. Просто поместите их внизу страницы перед закрывающим тегом </body>.
Таким образом, в barebones ваша форма похожа на приведенный ниже пример.
<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>
Вам нужно будет выбрать элемент form и добавьте к нему прослушиватель событий. Это похоже на выполнение onclick, но теперь с методом addEventListener. Этот метод позволяет вам связать несколько функций с одним событием, вместо того, чтобы иметь только одно.
Прослушивание события submit. Это событие будет запускаться всякий раз, когда форма была, как вы уже догадались, отправлена. Для правильной работы требуется input type="submit" или button type="submit".
Теперь в функции, которую вы будете запускать при каждом запуске submit в вашей форме, будет содержаться лог c для AJAX звонок на сервер. Вам необходимо получить текущее значение элемента select name="br" и отправить его на контроллер baudrate.cgi. Таким образом, URL для вызова AJAX должен выглядеть примерно так: 'baudrate.cgi?br=14400'.
Каждый раз, когда вы отправляете запрос, могут произойти две вещи. Либо вы получите ответ, и, надеюсь, хороший, либо получите ошибку.
В случае успешного ответа используйте location.reload() для перезагрузки страницы. В случае ошибки просто зарегистрируйте его и отладьте код .cgi, чтобы он работал правильно.
Я предлагаю вам попробовать приведенный ниже пример. Как я уже говорил выше, добавьте файл .js в HTML или вставьте JS в тег <script>. И не забудьте разместить его внизу страницы.
Дайте мне знать, если это сработает и поможет ли это.
// 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.
});
});