Receive data in Javascript

Question

I have a very vile doubt about Javascript, but I believe they will understand me, since I am new to the language.

Following:

I created an html page where the user will have 5 service options to choose from, right? Right!

When the user clicks on the chosen service he will be directed to the next page, which will be the same regardless of the user’s choice. And this is where my doubt comes in.

I want to know how to show on the next page only the choice that the user selected. I know how to do this in PHP, where I get with the $_POST['nome_do_campo_html'] and assign to a variable, but I need to do this in Javascript.

Answer 1

Grab the URL using:

var url = window.location;

Then use the split to separate by ?. Separates the domain from the parameters.

Then make a split in the result [1], now with & to have each of the separate parameters. Something like this:

var parametrosDaUrl = url.split("?")[1];
var listaDeParametros = parametrosDaUrl.split("&");

Answer 2

I based a little on the reply of @Sergiobarros.

This solution will, before taking the parameters of the URL, take the fragment from it, then take the list of parameters, and finally build a parameter object. All parameters will be saved to this object if the query ? exists.

At the end, to read the URL parameters just index the object params, just like you index $_POST in PHP!

params["nome_do_campo_html"];
params.nome_do_campo_html;

---

var url = location.href;

// Ignora o fragmento da URL
var noFrag = url.split('#')[0];

// Pega a lista de parâmetros
var query = noFrag.split('?')[1];

// Cria um objeto
// para guardar os parâmetros
var params = {};

// Checa se a lista de parâmetros
// existe
if (query) {
    // Faz a separação dos parâmetros
    let offParams = query.split('&');

    // Vamos iterar os parâmetros!
    for (let param of offParams) {
        // Checa se o parâmetro não está vázio
        if (param.length) {
            // Pega a índice do '='
            let assignIndex = param.indexOf('=');
            let key, value;

            // Checa se o '=' existe
            if (assignIndex >= 0) {
                // Pega o nome do parâmetro
                key = param.substring(0, assignIndex);
                // Pega o valor (depois de '=')
                value = param.substring(assignIndex + 1) || true;
            } else {
                // O nome do parâmetro...
                // realmente pertence à @param.
                key = param;
                // O valor padrão será true
                value = true;
            }

            // Por fim guardamos o parâmetro
            // no objeto params
            params[key] = value;
        }
    }
}

Ah! And another alternative is to use the interface URLSearchParams to interpret the URL query and use the method URLSearchParams#get to read a parameter:

var noFrag = location.href.split('#')[0];
var urlQuery = noFrag.split('?')[1];

if (urlQuery) {
    var searchParams = new URLSearchParams(urlQuery);

    // Exemplo de uso !
    var myParam = searchParams.get('nome');
}

This interface is implemented in current browsers.