Button does not point to another page

Question

Button does not point to another page

Navigation

#1 by (1 votes)
#2 by (0 votes)

2

I have a button that when clicked on it, localStorage takes its id, there it plays the id to the other page, but when I click on the button it is not pointing to the other page, it is only changing the url to the name of the page that is more "button = 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}')

    }

api javascript html ajax

asked by anonymous 27.02.2018 / 19:27

2 answers

1

I was able to put 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, not the same.

27.02.2018 / 20:46

Exchanging contents of a div by an html file Event when user closed the tab / page

score 0 · Accepted Answer

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

Remove the element form from your code and should work correctly:

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 inside a button element .