Make an HTML button redirect me to another page

Question

How do I make this button redirect me to another page?

<button type="submit" onclick="register()">Create new account</button>

Here is the function that the button is using:

function register() {
    let object = {
        "username": document.getElementById("username").value,
        "password": document.getElementById("password").value
    };

    let json = JSON.stringify(object);
    let xhr = new XMLHttpRequest();
    xhr.open("POST", '/api/user/new', false)
    xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8');
    xhr.send(json);

    if (xhr.status != 200) {
        alert("Something went wrong!");
    } else if (xhr.status == 200){
        alert("Success!");
    }
}

I want the button to redirect me to 'index.html' file

Does this answer your question? [Javascript Button Redirect](https://stackoverflow.com/questions/12521491/javascript-button-redirect) — tomleb, Oct 17 '21 at 12:35
how do I add anything to onclick if Im already using register()? — Tomek Nowak, Oct 17 '21 at 12:39
[Like this](https://stackoverflow.com/questions/3910736/how-to-call-multiple-javascript-functions-in-onclick-event) — tomleb, Oct 17 '21 at 12:40

score 1 · Accepted Answer · answered Oct 17 '21 at 13:34

1

Try wrapping button in form tag like this:

<form action="index.html">
    <button type="submit" onclick="register()">Create new account</button>
</form>

answered Oct 17 '21 at 13:34

gierol

144
4

score 0 · Answer 2 · answered Oct 17 '21 at 12:39

0

It seems this has already been answered in quite extensive way: How do I redirect to another webpage?

to sum up: there is a number of ways to achieve that:

// window.location
window.location.replace('http://www.example.com')
window.location.assign('http://www.example.com')
window.location.href = 'http://www.example.com'
document.location.href = '/path'

// jQuery
$(location).attr('href','http://www.example.com')
$(window).attr('location','http://www.example.com')
$(location).prop('href', 'http://www.example.com')

If You want to go there after successful call of the function - put one of these instead of "alert("Success!");"

answered Oct 17 '21 at 12:39

Miłosz

637
1
7
13

1

instead of being redirected to the page i want, I get a notification asking if I want to open this file with xdg-open – Tomek Nowak Oct 17 '21 at 12:48
Can You paste the code? Which one did You choose? – Miłosz Oct 17 '21 at 12:49
I tried with each of these, I just swapped the alert with document.location.href = 'src/main/resources/templates/register.html' – Tomek Nowak Oct 17 '21 at 12:50

score 0 · Answer 3 · answered Oct 17 '21 at 13:31

<form action="/action_page.php" method="get">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <button type="submit">Submit</button>
  <button type="submit" formaction="/action_page2.php">Submit to another page</button>
</form>

Example A form with two submit buttons. The first submit button submits the form data to "action_page.php", and the second submits to "action_page2.php":

Definition and Usage The formaction attribute specifies where to send the form-data when a form is submitted. This attribute overrides the form's action attribute.

The formaction attribute is only used for buttons with type="submit".

Please refer this link: https://www.w3schools.com/tags/att_button_formaction.asp

Make an HTML button redirect me to another page

3 Answers3