How to go to a link with using Javascript?

Question

Hello I have this code using javascript & html :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Signup Form</title>

  <!-- css -->
  <link rel="stylesheet" href="style.css">
  <style>
    .box {
      max-width: 500px;
      margin-left: auto;
      margin-right: auto;
    }
  </style>

  <!-- js -->
  <script src="https://unpkg.com/vue"></script>
</head>
<body>

  <div class="hero is-fullheight is-info is-bold">
  <div class="hero-body">
  <div class="container">
    <h1 class="title has-text-centered">Test</h1>
    <div class="box">

      <!-- our signup form ===================== -->
      <form id="signup-form" @submit.prevent="processForm">
        <!-- name -->
        <div class="field">
          <label class="label">Username</label>
          <input 
            type="text"
            class="input" 
            name="name"
            v-model="name">
        </div>

        <!-- email -->
        <div class="field">
          <label class="label">Password</label>
          <input 
            type="password" 
            class="input" 
            name="email" 
            v-model="email"
            @blur="validateEmail">

          <p class="help is-danger" v-if="errors.email">
            Please enter a valid email.
          </p>
        </div>

        <!-- submit button -->
        <div class="field has-text-right">
          <button type="submit" class="button is-danger">
            Log In           
          </button>
        </div>
      </form>

    </div>
  </div>
  </div>
  </div>


  <script>

    var app = new Vue({
      el: '#signup-form',
      data: {
        name: '',
        email: '',
        errors: {
          name: false,
          email: false
        }
      },
      methods: {
        processForm: function() {
          console.log({ name: this.name, email: this.email });
          onclick="test.html"; 

        },
        validateEmail: function() {
          const isValid = window.isValidEmail(this.email);
          this.errors.email = !isValid;
        }
      }
    });

    function isValidEmail(email) {
      var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      return re.test(email);
    }
  </script>
</body>
</html>

And I would want that when I click on the button I can go to the page by the name of test.html I tried to use href = "test.html but it does not work. I think I have to write it in Javascrit but even using action = "test.html" it does not work...

Could you help me please ?

Thank you very much!

Have you tried `
` where you add the `action="test.html"` to the `form` (and not `button`) — Asons, Jun 08 '18 at 16:45
Do note that your `test.html` needs to be able to process your `form` fields, and that should be done server side to enable a reasonable login safety. — Asons, Jun 08 '18 at 16:47
Possible duplicate of [Adding an onclick function to go to url in JavaScript?](https://stackoverflow.com/questions/13071967/adding-an-onclick-function-to-go-to-url-in-javascript) — Roddy of the Frozen Peas, Jun 08 '18 at 22:58
Note that, since you're using vue.js your `processForm` will need to send the vue model `data:` to the server or otherwise save it somehow (SessionStorage maybe?) because when you do `window.location = "test.html";` as in aStewartDesign's answer, the whole JS environment that your code is executing in will be thrown away as the new page is loading. — Stephen P, Jun 08 '18 at 23:24
@RoddyoftheFrozenPeas This question is not a duplicate of the linked Q because using Vue.js completely changes how handlers are attached to elements. Because of that I've added the `vue.js` tag to the question. — Stephen P, Jun 08 '18 at 23:29

score 0 · Answer 1 · answered Jun 08 '18 at 22:53

It seems like what you're trying to do is redirect to a new page. Try:

window.location = "test.html";

instead of:

onclick="test.html";

to my knowledge, all onclick="test.html" does is create a variable "onclick" with the string value "test.html". Setting window.location with the URL you would like to redirect to will navigate the user to that URL. More on window.location here: https://developer.mozilla.org/en-US/docs/Web/API/Window/location

How to go to a link with using Javascript?

1 Answers1