Jump to content

The Right Word Redirects to Corresponding Page


Macchiato

Recommended Posts

I'd like to achieve the following with javascript:When you type any of the following words into the inputbox and click the submit button you'll be redirected to the corresponding page:tree => tree.phpchocolate => chocolate.phpbird => bird.phpcandle => candle.phpapple => apple.phpHowever if you type a different word than the above, you'll get a warning message.

<div id="main">  <form action="">    <ul>      <li><input class="inputbox" type="text" name="TypeWord" value="" placeholder="Type a word here"/></li>      <li><input class="button" type="submit" name="Submit" value="Submit word"/></li>    </ul>  </form></div><div id="warning">  <p style="visibility:hidden;">Oops, wrong word, please try again.</p></div>

 

Does anyone know of a javascript that can do this?

 

Link to comment
Share on other sites

You can use Array.indexOf to check if an item is in an array:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOfSo, you can create an array with the approved words, get the word they entered, use indexOf to check if it's in the list (and redirect if it is), or show an error message.

Link to comment
Share on other sites

var KeywordForm ={    urlList:{        tree:true,        chocolate:true,        candle:true,        apple:true    },    submitValid:false,    warning:undefined,    onBlur:function (ele){        this.submitValid= this.urlList[ele.value] === true;        this.warning.visibility = this.submitValid            ?"hidden"            :"visible";    },    onSubmit:function(){        return this.submitValid;    }};window.onload = function(){    KeywordForm.warning = document.getElementById("warning").firstElementChild.style;    document.getElementById("keyword_Input").onblur = function(){KeywordForm.onBlur(this);};    document.getElementById("keyword_Submit").onsubmit = function(){KeywordForm.onSubmit(this);};    };
<div>  <form action="">    <ul>      <li>       <input id="keyword_Input" class="inputbox" type="text" name="TypeWord" value="" placeholder="Type a word here"/>      </li>      <li>       <input id="keyword_Submit" class="button" type="submit" name="Submit" value="Submit word"/>      </li>    </ul>  </form></div><div id="warning">  <p style="visibility:hidden;">Oops, wrong word, please try again.</p></div>
The form will only be submitted if the input was valid (case-sensitive, no whitespace, etc.), there would still need to be server-side scripting to properly re-direct to the right page, but since you're already using PHP thats a no-brainer script. Edited by Hadien
  • Like 1
Link to comment
Share on other sites

Another version. Uses an alert instead of "warning" div and has no submit button. Note that to change the visibility of an element it needs to have an id, so the <p> in your code should have id="warning" not the enclosing div. Is it necessary to allow wrong guesses? If not then a select dropdown would be a better option.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><script type="text/javascript">var validFiles = ["tree", "chocolate", "bird", "candle", "apple"];function processWord() {  var theWord = inputForm.elements["TypeWord"].value;  if (validFiles.indexOf(theWord) == -1) {    alert("Oops, wrong word, please try again.");  } else {    var newWindow = window.open(theWord + ".php");  }}</script></head><body><div id="main">  <form name="inputForm">    <ul>      <li><input class="inputbox" type="text" name="TypeWord" value="" onchange="processWord()" placeholder="Type a word here"/></li>    </ul>  </form></div></body></html>
  • Like 1
Link to comment
Share on other sites

...
...
The form will only be submitted if the input was valid (case-sensitive, no whitespace, etc.), there would still need to be server-side scripting to properly re-direct to the right page, but since you're already using PHP thats a no-brainer script.

 

 

Your answer is quiete thorough, thanks Hadien :good:

Edited by Macchiato
Link to comment
Share on other sites

 

Another version. Uses an alert instead of "warning" div and has no submit button. Note that to change the visibility of an element it needs to have an id, so the <p> in your code should have id="warning" not the enclosing div. Is it necessary to allow wrong guesses? If not then a select dropdown would be a better option.

...

 

Yes, it is necessary to allow wrong guesses. Thank you for your version John :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...