Login post not sent

Hello!

I would like to create a Wi-Fi hotspot for a Mikrotik router.
The user enters his name, email address and interests from a drop-down list in the login form.
The form sends the password and username required for entry hidden.
I would send the entered data to a database via ajax, and I would enter the hidden login data in the action.
The problem is that until you log in to the network, you will not reach the database where I would send the extra data.
After submitting the form, you just enter the network, there will be an Internet connection, but the values will not be entered into the database.
What is the solution for the data to be included in the database and for the username and password required for login to be sent?

<html>
  <head>
    <!-- <meta
      http-equiv="refresh"
      content="0; url=login?username=vendeg&password=123"
    />
 
    <meta http-equiv="refresh" content="0; " /> -->
    <meta charset="UTF-8" />
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="expires" content="-1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> -->
    <script src="jquery.min.js"></script>
    <title>Duna Autó internet - Log in</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <div class="ie-fixMinHeight">
      <div class="main">
        <div class="wrap animated fadeIn">
          <form method="POST" action="login">
            <img class="logo" src="img/da_logo.png" alt="" />
            <h1>BEJELENTKEZÉS</h1>
            <table>
              <tr>
                <td style="border-bottom: none">
                  <input
                    type="hidden"
                    name="username"
                    placeholder="username"
                    id=""
                    value="vendeg"
                  />
                </td>
              </tr>
              <tr>
                <td style="border-bottom: none">
                  <input
                    type="hidden"
                    name="password"
                    placeholder="jelszo"
                    id=""
                    value="123"
                  />
                </td>
              </tr>
              <tr>
                <td>
                  <label for="name">Név:</label><br />
                  <input
                    type="text"
                    name="name"
                    placeholder="Kiss Gábor"
                    id="name"
                    required
                  />
                </td>
              </tr>
              <tr>
                <td>
                  <label for="email">E-mail cím:</label><br />
                  <input
                    type="email"
                    name="email"
                    placeholder="pelda@gmail.com"
                    id="email"
                    required
                  />
                </td>
              </tr>
              <tr>
                <td>
                  <label for="marka">Márka érdeklődés</label><br />
                  <select name="marka" id="marka" required>
                    <option value="abarth">Abarth</option>
                    <option value="citroen">Citroën</option>
                    <option value="cura">Cupra</option>
                    <option value="dacia">Dacia</option>
                    <option value="fiat">Fiat</option>
                    <option value="honda">Honda</option>
                    <option value="hyundai">Hyundai</option>
                    <option value="kia">Kia</option>
                    <option value="lada">Lada</option>
                    <option value="lancia">Lancia</option>
                    <option value="mitsubishi">Mitsubishi</option>
                    <option value="nissan">Nissan</option>
                    <option value="peugeot">Peugeot</option>
                    <option value="renault">Renault</option>
                    <option value="seat">Seat</option>
                    <option value="skoda">Skoda</option>
                    <option value="subaru">Subaru</option>
                    <option value="suzuki">Suzuki</option>
                    <option value="volvo">Volvo</option>
                    <option value="volkswagen">Volkswagen</option>
                  </select>
                </td>
              </tr>
              <tr>
                <td>
                  <input
                    type="submit"
                    name="submit"
                    value="KÜLDÉS"
                    id="submit"
                  />
                </td>
              </tr>
            </table>
          </form>
        </div>
      </div>
    </div>
    <script>
      $(document).ready(function () {
        $("#submit").click(function () {
          var name = $("#name").val();
          var email = $("#email").val();
          var marka = $("#marka").val();
 
          if (name == "" || email == "" || marka == "") {
            alert("A összes mező kitötlése kötelező.");
            return false;
          }
 
          $.ajax({
            type: "POST",
            url: "url/data.php",
            data: {
              name: name,
              email: email,
              marka: marka,
            },
            cache: false,
            success: function (data) {
              
            },
            error: function (xhr, status, error) {
              console.error(xhr);
            },
          });
        });
      });
    </script>
  </body>
</html>

Use walled garden.

We can set the path of database in walled garden, and it’s work.
But the code is above is not good, because the input values not entered into the database.
The code is tested in local server, but not work with this router.
It is compatible ajax and jquery, or could you help what is the problem, this code?

I can not debug the code, but

Do not use local version of the file, or you can broken dipendencies.
Add https://ajax.googleapis.com/ on walled garden and use online version.
Check what are the other site involved.

Thank you for your help, maybe I have solved the jquery problem, but I got a mixed content problem.

Mixed Content: The page at ‘https://hotspot.dunaauto.hu/login?dst=http%3A%2F%2Fwww.msftconnecttest.com%2Fredirect’ was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint ‘http://195.228.50.35:11260/hotspot/data.php’. This request has been blocked; the content must be served over HTTPS

In local I didn’t get error, only if I running the code on the router.

You have “the mixed-content problem” becuase you have your hotspot login page page loaded ‘securely’ over HTTPS, but the login page is making an AJAX call to an insecure HTTP endpoint http://195.228.50.35:11260/hotspot/data.php. Make the AJAX call to a secure HTTPS end point , i.e. https://195.228.50.35:11260/hotspot/data.php, instead.


<script src="jquery.min.js"></script>
>

By the way, are you in July 2022 using jquery version 1.11.0 that was released in 2014 ([jQuery 1.11.1 and 2.1.1 Released - Posted on May 1, 2014](https://blog.jquery.com/2014/05/01/jquery-1-11-1-and-2-1-1-released/)) 🤔? Jquery is currently at version 3.6.0 released in March 2021 ([jQuery 3.6.0 Released! - Posted on March 2, 2021](https://blog.jquery.com/2021/03/02/jquery-3-6-0-released/))!  Jquery <3.5.0 has Cross-site Scripting (XSS) vulnerabilities reported since April 2020: [snyk: jquery vulnerabilities](https://snyk.io/vuln/npm:jquery).
Perhaps you copied some example code from one of those web dev tutorials or open-source repositories you found online? The tutorials have their value, but most of those examples, in particular, don't really follow production best practice and may have flaws that aren't suited for producton: [Code Tutorials Spread Application Flaws Far and Wide - Posted April 18, 2017](https://securityledger.com/2017/04/tutorials-spread-application-flaws-far-and-wide/). Not to discourage you, but I'd advise against copying code blindly if you don't know/understand what you are doing. Perhaps engage an experienced developer to get it done for you. Trust me, 'been there, done that' (i.e. made those mistakes)!

#Ratatouille
Thanks your answear.

Yes, I guessed that this was the cause of the error, but I don’t think it solves the problem if I simply use https instead of http. Does the ajax endpoint have to set a certificate before? The system administrator manages the exchange of files, so I cannot set it directly.
Yes, I also used sample codes, but since the first post I have changed the script.
I am currently using jquery version 3.4.2.
Unfortunately, I’m still learning Ajax, so I roughly understand the gist of it. I can see where the requests refer to and how I get answers.
But now this security problem is bothering me, I don’t understand servers even more, and our own system administrator doesn’t help enough.
Do you suggest I should have to use <3.5.0 version from jquery, with Cross-site Scripting (XSS) and it will solve my problem?

Well, obviously HTTPS requires an SSL certificate. My assumption was that you had a valid CA-issued certificate, and all you had to do is change to HTTPS and replace the hostname in the URL with a valid hostname for that SSL certificate.


Sorry to disappoint you, but I wouldn’t use AJAX (or jquery) for a new web dev project in 2022:
AJAX: With interactive websites and modern web standards, Ajax is gradually being replaced by functions within JavaScript frameworks and the official Fetch API Standard.
The XMLHttpRequest API - Fetching data from the server - Learn web development | MDN: Sometimes, especially in older code, you’ll see another API called XMLHttpRequest (often abbreviated as “XHR”) used to make HTTP requests. This predated Fetch, and was really the first API widely used to implement AJAX. We recommend you use Fetch if you can: it’s a simpler API and has more features than XMLHttpRequest.
Using the Fetch API - Web APIs | MDN: The Fetch API provides a JavaScript interface for accessing and manipulating parts of the HTTP pipeline, such as requests and responses. It also provides a global fetch() method that provides an easy, logical way to fetch resources asynchronously across the network. This kind of functionality was previously achieved using XMLHttpRequest. Fetch provides a better alternative that can be easily used by other technologies such as Service Workers. Fetch also provides a single logical place to define other HTTP-related concepts such as CORS and extensions to HTTP.
The fetch specification differs from jQuery.ajax() in the following significant ways:…

Anyway, this is a Mikrotik/RouterOS forum, not a web dev forum.