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>

you're only retrieving the dom reference, but not the value `document.getElementById("nextId").value`. You are also missing the href part of your `window.location.href`. — Martin, Oct 23 '21 at 19:51
Aside what the others mentioned, you also should be aware of your data types. The value of a input is a string, but you are comparing it to a number. This may work, but you are relying on automatic type conversion. It's better to a) convert explicitly yourself, and b) use strict comparison (`===`) instead of `==`. — RoToRa, Oct 23 '21 at 21:57

score 0 · Accepted Answer · edited Oct 23 '21 at 21:31

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);
    }
  }

Thanks to everybody that answered my question and fixed my problem! I am a student in computer science and this is my first year. I love how this community is supportive and that everybody is passionate about what we do. Anyway thank you and wish me good luck. — steven yee, Oct 24 '21 at 20:40

mplungjan · Answer 2 · 2021-10-25T04:09:39.490

JS is case sensitive so valForm both places
Inputs have value so var firstVal = document.getElementById("nextId").value;
You did not define error
You can cast to number using the unarticulated plus or other methods

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>

Thanks to everybody that answered my question and fixed my problem! I am a student in computer science and this is my first year. I love how this community is supportive and that everybody is passionate about what we do. Anyway thank you and wish me good luck. — steven yee, Oct 24 '21 at 20:40

Martin · Answer 3 · 2021-10-23T21:45:56.773

0

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

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.

edited Oct 23 '21 at 21:45

answered Oct 23 '21 at 20:02

Martin

2,326
1
12
22

Because it is unclear whether it is defined elsewhere yet and OP simply didn't include it. It would be weird to handle a variable randomly that doesn't exist. That's why I note that I will have to assume it's defined elsewhere and explain the error in case it isn't – Martin Oct 23 '21 at 20:08
If it is defined elsewhere outside the function, calling the function with an error will append the error each time. highly unlikely usecase – mplungjan Oct 23 '21 at 20:10
It also seems odd to do any logic revolving around a variable that isn't even defined to begin with. We're not talking about overlooked scoping issues or anything like that. It's just straight up not there. It's not something that hasn't been given any thought either. It's an if statement, alerting the value as well. Either way, OP can elaborate when it comes to it. – Martin Oct 23 '21 at 21:49
Thanks to everybody that answered my question and fixed my problem! I am a student in computer science and this is my first year. I love how this community is supportive and that everybody is passionate about what we do. Anyway thank you and wish me good luck. – steven yee Oct 24 '21 at 20:40

How to redirect based on user input javascript

3 Answers3