Button does not direct to another page

Question

I have a button that when clicked on it, the localStorage takes his ID, then plays the id to the other page, but when I click on the button it is not directing to the other page, only changing the url to the name of the page that is more "boot=1".

HTML:

<input id="inicio" type="date">
<input id="fim" type="date">
<button onclick="postData();">gerar</button>

<div id="dados">

JAVASCRIPT:

function postData() {

        var inicio, fim;
        inicio = document.getElementById('inicio').value;
        fim = document.getElementById('fim').value;
        // Default options are marked with *
        fetch('http://api_aqui', {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            body: `inicio=${inicio}&fim=${fim}`
        }).then(response => response.json().then(data => ({
            data: data,
            status: response.status
        })
        ).then(res => { 
            res.data.map(element => {
                console.log(element.PRODUTO)
                console.log(element.ID)
                $('#dados').append(`
                <h3>${element.PRODUTO}</h3>
                <br>
                <form id="form">
                <button onClick="pegar(this);" name="botao" value="${element.ID}" href="pagina.php">pegar</button>
                <form>
                `)
            })
        })

        )

    }

    function pegar(botao) {
        window.localStorage.setItem('produto', `${botao.value}`)

    }

Answer 1

I managed to put the window.open('progress.php'); in the following function:

    function pegar(botao){
    localStorage.setItem('produto', `${botao.value}`)
    window.open('progress.php');
}

But it opens in another browser tab, and not in the same.

Answer 2

The problem is that when you use the element button within an element form it automatically executes the parameter action from the form, sometimes even ignoring the functions assigned to it. However, your form does not have this parameter and by default you are sending it via get to the same page you are, that’s why it appears paginaatual.html?botao=1, where botao is the name of the form button and 1 is the value of it.

Remove the element from your code form and should function properly:

res.data.map(element => {
    console.log(element.PRODUTO)
    console.log(element.ID)
    $('#dados').append(`
    <h3>${element.PRODUTO}</h3>
    <br>
    <button onClick="pegar(this);" name="botao" value="${element.ID}">pegar</button>
    `)
})

One more thing, there is no attribute href within a button element.