How to redirect based on user input javascript

Question

I cant find a working way to redirect the users on my website based on what they type on a text field. I have tried using this code bellow but no success. Can someone please guide me.

 function valForm() { var firstVal = document.getElementById("nextId"); if (firstVal.length == 0) { error += "Desk Number is required\\n"; } if (firstVal == 430) { window.location = "https://awebsite"; } if (error) { alert(error); } }

 <input type="text" placeholder="License Plate" class="form-control" id="name-form9-z" /> <div class="ticketId"> <input type="text" placeholder="Ticket ID" class="form-control" id="nextId"> </div> <button class="btn btn-primary display-4" type="button" onclick="valform()">next</button>

Answer 1

First of all, you have a typo in your button tag. Please change valform() to valForm(). And there are some mistakes in your function as well.

• Define variable error before it is used in valForm function.
• var firstVal = document.getElementById("nextId") should be var firstVal = document.getElementById("nextId").value;
• window.location= "https://awebsite" should be window.location.href = "https://awebsite";;

Below is full code.

function valForm() {
    var firstVal = document.getElementById("nextId").value;
    var error = ''
    if (firstVal.length == 0) {
      error += "Desk Number is required\n";
    }

    if (firstVal == 430) {
      window.location.href = "https://awebsite";
    }

    if (error) {
      alert(error);
    }
  }

Answer 2

1. JS is case sensitive so valForm both places
2. Inputs have value so var firstVal = document.getElementById("nextId").value;
3. You did not define error

The window.location is however ok to use without the .href but it is recommended to use location.href or window.location.href just to get used to the .href if you ever want to READ the string

I suggest you use a submit event instead and use addEventListener to not have inline event handlers. I wrapped the elements in a form tag to use the form's submit event

 document.getElementById("myForm").addEventListener("submit", function(e) { e.preventDefault(); // stop submission let error = ""; var firstVal = document.getElementById("nextId").value; console.log(firstVal) if (firstVal.length == 0) { error += "Desk Number is required\\n"; } if (firstVal == 430) { window.location = "https://awebsite"; } if (error) { alert(error); } })

 <form id="myForm"> <input type="text" placeholder="License Plate" class="form-control" id="name-form9-z" /> <div class="ticketId"> <input type="text" placeholder="Ticket ID" class="form-control" id="nextId"> </div> <button class="btn btn-primary display-4">next</button> </form>

Answer 3

As of right now, you are only holding a DOM reference of the input value.

var firstVal = document.getElementById("nextId"); .

You have yet to get the value.

var firstVal = document.getElementById("nextId").value; .

Also note that you are missing a camel-case notation in your function call. JavaScript is case sensitive.

<button class="btn btn-primary display-4" type="button" onclick="valform()">next</button> .

should be:

<button class="btn btn-primary display-4" type="button" onclick="valForm()">next</button>

Full code:

 function valForm() { var firstVal = document.getElementById("nextId").value; if (firstVal.length == 0) { error += "Desk Number is required\\n"; } if (firstVal == 430) { window.location.href = "https://awebsite"; } if (error) { alert(error); } }

 <input type="text" placeholder="License Plate" class="form-control" id="name-form9-z" /> <div class="ticketId"> <input type="text" placeholder="Ticket ID" class="form-control" id="nextId"> </div> <button class="btn btn-primary display-4" type="button" onclick="valForm()">next</button>

I will have to assume that error is defined somewhere outside of the code you provided, otherwise it will throw an error of error being undefined.

Answer 4

I have fixed all the things you told me was not good but my button still does not redirect me to an other page when I type the good value. Any other suggestions?