Programming Forums > Web Development and Design > JavaScript and Client-Side Browser Scripting

organizedchaos · Feb 9th, 2009, 2:51 PM

Hi! How do I compare user input from the values in my array and get its index?

Arla · Feb 9th, 2009, 5:40 PM

Just loop through the Array from 0 to N (where N is the size of the array) and when you find a match, you know the index.

At least that's a way to do it (don't know Javascript so can't say explicitly how to do it in Javascript)

organizedchaos · Feb 10th, 2009, 1:17 PM

wow, thanks!

csrocker101 · May 27th, 2009, 1:26 PM

This is pretty sloppy but you'll get the general idea....Something like:

(Toggle Plain Text)

function searchArray()
{
    var array = new Array(1,2,3,4,5,6);
    
   //matchValue would probably come from a field input
    var matchValue = 3;
    var i;    

    for(i = 0; i < array.length; i++)
    {
          if(matchValue == array[i])
          {
              //exit the loop or call another method
              matchExists();
          }
     } 
}
function matchExists()
{
        //A match exists!!!
}

csrocker101 · May 27th, 2009, 3:08 PM

If you want the index:

(Toggle Plain Text)

var i

Would be the index at which the value is located.

essential · May 29th, 2009, 5:40 AM

Here's another DEMO of comparing userInput against your array lists.

 javascript Syntax (Toggle Plain Text) 
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="xhtml10" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>DANIuser :: essential</title>
<style type="text/css">
/* <![CDATA[ */
html, body {
  background-color : #ccc;
  color : #405060;
  font : normal normal normal 95%/1.4 "Trebuchet MS", "Bernard MT Condensed", Tahoma, Verdana, Helvetica, Arial, sans-serif;
  min-height : 600px;
  text-align : center;
  height : auto;
  width : auto; }
 
body .m-title {
  background-color : #444;
  border-top : 2px solid #000;
  border-bottom : 2px solid #000;
  color : #757575;
  margin-top : 0;
  padding : .100em 1em .100em 1em;
  text-align : left;
  width : auto; }
 
div#main {
  background-color : #f0f0f0;
  margin : 0 auto;
  height : inherit !important;
  padding : 0;
  width : 100%; }
 
div.tube {
  border : 1px solid;
  background-color : inherit;
  height : inherit !important;
  clear : both;
  padding : 1em;
  margin : 0;
  overflow : hidden; }
 
iframe {
  display : block;
  border : 1px solid #405060;
  min-height : 600px;
  width : 100%; }
 
div#demo {
  background-color : #ccc; 
  margin-top : 2em;
  min-height : 30px;
  padding : 0 1em 0 1em;
  white-space : nowrap; }
/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[
var uInput;
var makeMatch = [ "Blue", "Red", "Green", "Yellow" ];
var myArray = [ ];
var check = function() { 
   uInput = (( document.getElementById ) ? document.getElementById("txt") : (( document.all ) ? document.all.txt : document.layers.txt )).value;
   for ( var x = 0; x < makeMatch.length; x++ ) {
   myArray[ makeMatch[ x ] ] = makeMatch[ x ];
   }  
   if ( myArray[ uInput ] ) {
      alert("Matched found: \u0022" + myArray[ uInput ] + "\u0022"); 
   } else {
   alert("Sorry, no match found!");
   }
};
// ]]>
</script>
</head>
<body>
<div id="main">
<div id="content" class="tube">
<h2 class="m-title">Javascript Live Help!</h2>
<div id="demo">
<input type="text" id="txt" name="txt" value="" /> <button id="btn" name="btn" onclick="check();">Try Match</button></div>
</div>
</div>
</body>
</html>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="xhtml10" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>DANIuser :: essential</title>
<style type="text/css">
/* <![CDATA[ */
html, body {
  background-color : #ccc;
  color : #405060;
  font : normal normal normal 95%/1.4 "Trebuchet MS", "Bernard MT Condensed", Tahoma, Verdana, Helvetica, Arial, sans-serif;
  min-height : 600px;
  text-align : center;
  height : auto;
  width : auto; }

body .m-title {
  background-color : #444;
  border-top : 2px solid #000;
  border-bottom : 2px solid #000;
  color : #757575;
  margin-top : 0;
  padding : .100em 1em .100em 1em;
  text-align : left;
  width : auto; }

div#main {
  background-color : #f0f0f0;
  margin : 0 auto;
  height : inherit !important;
  padding : 0;
  width : 100%; }

div.tube {
  border : 1px solid;
  background-color : inherit;
  height : inherit !important;
  clear : both;
  padding : 1em;
  margin : 0;
  overflow : hidden; }

iframe {
  display : block;
  border : 1px solid #405060;
  min-height : 600px;
  width : 100%; }

div#demo {
  background-color : #ccc; 
  margin-top : 2em;
  min-height : 30px;
  padding : 0 1em 0 1em;
  white-space : nowrap; }
/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[
var uInput;
var makeMatch = [ "Blue", "Red", "Green", "Yellow" ];
var myArray = [ ];
var check = function() { 
   uInput = (( document.getElementById ) ? document.getElementById("txt") : (( document.all ) ? document.all.txt : document.layers.txt )).value;
   for ( var x = 0; x < makeMatch.length; x++ ) {
   myArray[ makeMatch[ x ] ] = makeMatch[ x ];
   }  
   if ( myArray[ uInput ] ) {
      alert("Matched found: \u0022" + myArray[ uInput ] + "\u0022"); 
   } else {
   alert("Sorry, no match found!");
   }
};
// ]]>
</script>
</head>
<body>
<div id="main">
<div id="content" class="tube">
<h2 class="m-title">Javascript Live Help!</h2>
<div id="demo">
<input type="text" id="txt" name="txt" value="" /> <button id="btn" name="btn" onclick="check();">Try Match</button></div>
</div>
</div>
</body>
</html>

hope you find it useful...

organizedchaos · Jun 5th, 2009, 4:07 PM

Thanks! That's really helpful.

kn0wl3dg3 · Feb 4th, 2010, 10:04 PM

essential,
Great post!
One Question...
How could you get that to work when the user hits return also, instead of just onclick?

essential · Feb 6th, 2010, 9:56 AM

kn0wl3g3,

I would be willing to help you if you can provide me with a more specific question...

essential

kn0wl3dg3 · Feb 6th, 2010, 11:42 AM

Quote:

Originally Posted by kn0wl3dg3

essential,
Great post!
One Question...
How could you get that to work when the user hits return also, instead of just onclick?

Well, I was playing with the code from your earlier post, and got it to read from an array and direct to a page if a matching .html file is found...
What my question was referring to was that it only works when the user clicks the button with the mouse, instead of hitting return on the keyboard. I found a fix using an onsubmit event also, but was wondering if you had a different solution, since it needs to have the call in two places to do it this way

Feb 9th, 2009, 2:51 PM	#1
organizedchaos Programmer Join Date: Oct 2008 Posts: 35 Rep Power: 0	Compare Input from Array Values Hi! How do I compare user input from the values in my array and get its index?

Feb 9th, 2009, 5:40 PM	#2
Arla Expert Programmer Join Date: Mar 2005 Posts: 778 Rep Power: 6	Re: Compare Input from Array Values Just loop through the Array from 0 to N (where N is the size of the array) and when you find a match, you know the index. At least that's a way to do it (don't know Javascript so can't say explicitly how to do it in Javascript) __________________ I can remember, back in '22 They changed the law - came knocking on the door In that same moment, the broadband seemed to go.. Phones all dead. Gone dizzy in the head..

Feb 10th, 2009, 1:17 PM	#3
organizedchaos Programmer Join Date: Oct 2008 Posts: 35 Rep Power: 0	Re: Compare Input from Array Values wow, thanks!

May 27th, 2009, 3:08 PM	#5
csrocker101 Hobbyist Programmer Join Date: Dec 2006 Posts: 119 Rep Power: 4	Re: Compare Input from Array Values If you want the index: (Toggle Plain Text) var i var i Would be the index at which the value is located.

May 29th, 2009, 5:40 AM	#6
essential Newbie Join Date: Apr 2009 Posts: 6 Rep Power: 0	Re: Compare Input from Array Values Here's another DEMO of comparing userInput against your array lists. javascript Syntax (Toggle Plain Text) <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html id="xhtml10" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <title>DANIuser :: essential</title> <style type="text/css"> /* <![CDATA[ / html, body { background-color : #ccc; color : #405060; font : normal normal normal 95%/1.4 "Trebuchet MS", "Bernard MT Condensed", Tahoma, Verdana, Helvetica, Arial, sans-serif; min-height : 600px; text-align : center; height : auto; width : auto; } body .m-title { background-color : #444; border-top : 2px solid #000; border-bottom : 2px solid #000; color : #757575; margin-top : 0; padding : .100em 1em .100em 1em; text-align : left; width : auto; } div#main { background-color : #f0f0f0; margin : 0 auto; height : inherit !important; padding : 0; width : 100%; } div.tube { border : 1px solid; background-color : inherit; height : inherit !important; clear : both; padding : 1em; margin : 0; overflow : hidden; } iframe { display : block; border : 1px solid #405060; min-height : 600px; width : 100%; } div#demo { background-color : #ccc; margin-top : 2em; min-height : 30px; padding : 0 1em 0 1em; white-space : nowrap; } / ]]> / </style> <script type="text/javascript"> // <![CDATA[ var uInput; var makeMatch = [ "Blue", "Red", "Green", "Yellow" ]; var myArray = [ ]; var check = function() { uInput = (( document.getElementById ) ? document.getElementById("txt") : (( document.all ) ? document.all.txt : document.layers.txt )).value; for ( var x = 0; x < makeMatch.length; x++ ) { myArray[ makeMatch[ x ] ] = makeMatch[ x ]; } if ( myArray[ uInput ] ) { alert("Matched found: \u0022" + myArray[ uInput ] + "\u0022"); } else { alert("Sorry, no match found!"); } }; // ]]> </script> </head> <body> <div id="main"> <div id="content" class="tube"> <h2 class="m-title">Javascript Live Help!</h2> <div id="demo"> <input type="text" id="txt" name="txt" value="" /> <button id="btn" name="btn" onclick="check();">Try Match</button></div> </div> </div> </body> </html> <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html id="xhtml10" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <title>DANIuser :: essential</title> <style type="text/css"> / <![CDATA[ / html, body { background-color : #ccc; color : #405060; font : normal normal normal 95%/1.4 "Trebuchet MS", "Bernard MT Condensed", Tahoma, Verdana, Helvetica, Arial, sans-serif; min-height : 600px; text-align : center; height : auto; width : auto; } body .m-title { background-color : #444; border-top : 2px solid #000; border-bottom : 2px solid #000; color : #757575; margin-top : 0; padding : .100em 1em .100em 1em; text-align : left; width : auto; } div#main { background-color : #f0f0f0; margin : 0 auto; height : inherit !important; padding : 0; width : 100%; } div.tube { border : 1px solid; background-color : inherit; height : inherit !important; clear : both; padding : 1em; margin : 0; overflow : hidden; } iframe { display : block; border : 1px solid #405060; min-height : 600px; width : 100%; } div#demo { background-color : #ccc; margin-top : 2em; min-height : 30px; padding : 0 1em 0 1em; white-space : nowrap; } / ]]> */ </style> <script type="text/javascript"> // <![CDATA[ var uInput; var makeMatch = [ "Blue", "Red", "Green", "Yellow" ]; var myArray = [ ]; var check = function() { uInput = (( document.getElementById ) ? document.getElementById("txt") : (( document.all ) ? document.all.txt : document.layers.txt )).value; for ( var x = 0; x < makeMatch.length; x++ ) { myArray[ makeMatch[ x ] ] = makeMatch[ x ]; } if ( myArray[ uInput ] ) { alert("Matched found: \u0022" + myArray[ uInput ] + "\u0022"); } else { alert("Sorry, no match found!"); } }; // ]]> </script> </head> <body> <div id="main"> <div id="content" class="tube"> <h2 class="m-title">Javascript Live Help!</h2> <div id="demo"> <input type="text" id="txt" name="txt" value="" /> <button id="btn" name="btn" onclick="check();">Try Match</button></div> </div> </div> </body> </html> hope you find it useful...

May 27th, 2009, 1:26 PM	#4
csrocker101 Hobbyist Programmer Join Date: Dec 2006 Posts: 119 Rep Power: 4	Re: Compare Input from Array Values This is pretty sloppy but you'll get the general idea....Something like: (Toggle Plain Text) function searchArray() { var array = new Array(1,2,3,4,5,6); //matchValue would probably come from a field input var matchValue = 3; var i; for(i = 0; i < array.length; i++) { if(matchValue == array[i]) { //exit the loop or call another method matchExists(); } } } function matchExists() { //A match exists!!! } function searchArray() { var array = new Array(1,2,3,4,5,6); //matchValue would probably come from a field input var matchValue = 3; var i; for(i = 0; i < array.length; i++) { if(matchValue == array[i]) { //exit the loop or call another method matchExists(); } } } function matchExists() { //A match exists!!! }

Jun 5th, 2009, 4:07 PM	#7
organizedchaos Programmer Join Date: Oct 2008 Posts: 35 Rep Power: 0	Re: Compare Input from Array Values Thanks! That's really helpful.

Feb 4th, 2010, 10:04 PM	#8
kn0wl3dg3 Information Systems ***** Join Date: Feb 2010 Location: Twin Cities Posts: 29 Rep Power: 0	Re: Compare Input from Array Values essential, Great post! One Question... How could you get that to work when the user hits return also, instead of just onclick?

Feb 6th, 2010, 9:56 AM	#9
essential Newbie Join Date: Apr 2009 Posts: 6 Rep Power: 0	Re: Compare Input from Array Values kn0wl3g3, I would be willing to help you if you can provide me with a more specific question... essential

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Getting char values from an array using pointers	IceCold19	C	2	Jan 6th, 2009 4:29 PM
default values in input box not visible	sk123	HTML / XHTML / CSS	4	Oct 21st, 2008 7:39 PM
Reading character input into an array (raw mode)	shoeyfighter	C	3	Nov 2nd, 2006 3:49 PM
Combining Values in an array	bigmitch	C++	4	Feb 10th, 2006 7:29 AM
Installing IPB 2.03	bh4575	Other Web Development Languages	0	Apr 23rd, 2005 2:36 AM

Programming Forums > Web Development and Design > JavaScript and Client-Side Browser Scripting

Compare Input from Array Values