How can I make it so a different result occurs depending on an input?

Question

I have the following code, and I was wondering instead of making it so that if any variable inside the array is entered it will bring you to index.php , I want it so if the first is entered it will bring you to 1.html , if 2 is entered it will bring you to 2.html etc . I s this possible?

The HTML code:

<center>
    <form
     name="myForm"
     onsubmit="return validateForm()"
     method="post"
    >
        <h1 style = "color:white;">Enter code </h1>
        <input type="text" name="value" style="padding: 5px; border-radius: 6px; border: 0px solid transparent;"/>
        <br><br>
        <input type="submit" class = "ex" value="Enter/submit" style="border-radius: 6px; font-size: 18px;display: inline-block; padding: 20px; border: none; background-color: royalblue; color: white;"/>
    </form>
</center>

The JavaScript code:

var cars = ["Saab", "Volvo", "BMW"];
function validateForm() {
    var x = document.forms["myForm"]["value"].value;
    if (cars.indexOf(x) == -1) {
        alert("no car entered");
        return false;
    }

    var x = document.forms["myForm"]["value"].value;
    if (cars.indexOf(x) != -1) {
        window.location.href = "index.php";
        return false;
    }
}

Answer 1

Something like this? Just replace the console.log with the redirect you want.

 const cars = ["Saab", "Volvo", "BMW"] function validateForm() { const inputValue = document.forms["myForm"]["value"].value; if (inputValue === cars[0]) { console.log("Redirect to 1.html"); } else if (inputValue === cars[1]) { console.log("Redirect to 2.html"); } else if (inputValue === cars[2]) { console.log("Redirect to 3.html"); } else { console.log("no car entered") } return false; }

 <form name="myForm" onsubmit="return validateForm()" method="post"> Enter code <input id="formInput" type="text" name="value" /><br> <input type="submit" class="ex" value="Enter/submit" /> </form>

Answer 2

To redirect to a URL of the form 1.html, 2.html and so on we notice that the digit required is the index of the car make within the array. So thw place we want to redirect to is this index.html

Here is code which implements this.

<center>
  <form name="myForm" onsubmit="return validateForm()" method="post">
    <h1 style = "color:black;">Enter code </h1><input type="text" name="value" style="padding: 5px; border-radius: 6px; border: 1px solid red;"/>
    <br><br><input type="submit" class = "ex" value="Enter/submit" style="border-radius: 6px; font-size: 18px;display: inline-block; padding: 20px; border: none; background-color: royalblue; color: white;"/>
  </form>
</center>
<script>
var cars = ["Saab", "Volvo", "BMW"];

function validateForm() {alert(document.forms);alert(document.forms["myForm"]["value"].value);
  var x = document.forms["myForm"]["value"].value;
  if(cars.indexOf(x) == -1){
    alert("no car entered");
    return false;
  }
  else{
    window.location.href = cars.indexOf(x) + ".html";
  }
}
</script>

Notes:

• center is deprecated - use CSS instead
• the code in the question declared x twice
• if...else is used above instead of testing the condition twice
• there seems no point in the final return statement since the user is being redirected
• the border of the input element was set to 0. For this test it has been put at 1px and color red so it can be seen