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

Please note the [`center` tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center) is now deprecated (its gone the way of the [`marquee` tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee)). [Use CSS instead](https://stackoverflow.com/questions/9500025/css-replacement-for-div-align-center). — costaparas, Feb 15 '21 at 11:55

score 0 · Answer 1 · answered Feb 14 '21 at 21:04

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>

score 0 · Answer 2 · answered Feb 14 '21 at 21:34

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

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

2 Answers2