Pass input value to URL API

Question

Pass INPUT value to URL API

I have an account on an external IP system that has an API that goes through the URL.

For example, if I want to authorize an IP, just type in the browser...

https://MEUSITE.com/proxy/dashboard/api/ips/add/usuarioAPI/SenhaAPI/123.123.123.123

...that it will add the Ip 123... in the database. Because, the user and password are already in the URL.

So I need to create a form like the one below to inform this IP and that when sending it run the URL.

Below is the form:

<form method="get" action="https://MEUSITE.com/proxy/dashboard/api/ips/add/usuarioAPI/SenhaAPI/{IP}">
    <p>Adicionar IP: <input type="text" name="IPadicionar"></p>
    <p><input type="submit" value="Enviar"></p>
</form>

I tried the default way, which was to put the variable at the end of the url - /?Ipadicionar - but it didn’t work. Because, the url has to have only the IP at the end and it can’t have ? or =.

So my question is how do I, when clicking submit, pass only the IP typed in the input to the end of the URL?

Answer 1

You need consume the API using JS, because HTML will not automatically modify data after the page has already been printed, and your API URL does not accept query (?something=123).

For this there are two solutions, starting with the simplest.

1. use JS to modify your action, when entering data into input:

<form id="formAPI" method="get" action="">
    <p>Adicionar IP: <input type="text" id="ipAdd" onchange="ipChange(this)"></p>
    <p><input type="submit" value="Enviar"></p>
</form>
<script>
    function ipChange(elementoIp){
    let urlApi = 'https://MEUSITE.com/proxy/dashboard/api/ips/add/usuarioAPI/SenhaAPI/';
    let elementoForm = document.querySelector('#formAPI');
    elementoForm.action = urlApi + elementoIp.value;
    }
</script>
//Aqui removi o name do seu input para que não fosse adcionado ?campo=algo na URL

The attribute onchangein its input causes the function to be executed when the field is modified and lose focus (by clicking outside the field, or in another element like the button Enviar), at that point the function modifies the action of your FORM.

Obs: this = element that triggered the function, in this case the input.

The second way is more recommended, so the page will not be redirected when sending the request:

2. use JS to consume the API directly:

<div id="minhaAPI">
    <p>Adicionar IP: <input type="text" id="ipAdd"></p>
    <p><input type="submit" onclick="ipChange()" value="Enviar"></p>
</div>
<script>
    function ipChange(){
    let urlApi = 'https://MEUSITE.com/proxy/dashboard/api/ips/add/usuarioAPI/SenhaAPI/';
    let elementoIp = document.querySelector('#ipAdd');
    let urlAdd = urlApi + elementoIp.value;

    fetch(urlAdd).then(function(response) {
      if(response.ok) {
        alert('IP adicionado!');
      } else {
        alert('Houve um erro ao conectar ao servidor!');
      }
    })
    .catch(function(error) {
      alert('Houve um erro na requisição: ' + error.message);
    });
    }
</script>