How to redirect based on user input javascript-CodePudding

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>

CodePudding user response：

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

CodePudding user response：

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 type="button" onclick="valform()">next</button>.

should be:

<button 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.

CodePudding user response：

JS is case sensitive so valForm both places
Inputs have value so var firstVal = document.getElementById("nextId").value;
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>