Jump to content
Sign in to follow this  
Macchiato

The Right Word Redirects to Corresponding Page

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?

 

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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 :)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...