Validating textfield input from javascript array

Question

I have written this small script. Can someone help me fix this

I have a problem in mathcing the values of the array against the user input from the textfield.

I am not sure, whether I need to use a for loop, but the logic seems to be very simple to achieve without for loops.

Thanks in advance

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">

var zone1 = new Array("london", "manchester", "spain", "paris");
var zone2 = new Array("newyork", "toronto", "los angeles", "vancouver");
var zone3 = new Array("delhi", "seoul", "moscow", "dhaka");

function validateForm()
{
var x=document.forms["myForm"]["fname"].value;

 if (x==zone1)
  {
  alert("You are in Europe");
  return false;
  }

  else if (x==zone2)
  {
  alert("You are in North America");
  return false;
  }

  else if (x==zone3)
  {
  alert("You are in Asia");
  return false;
  }

  else{
      alert("try again");
      return false;

  }




}
</script>
</head>

<body>
<form name="myForm" action="" onsubmit="return validateForm()" method="post">
Enter your City: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>

</html>

see this link related to [comparing arrays](http://stackoverflow.com/questions/27030/comparing-arrays-of-objects-in-javascript) — Vishal, Aug 17 '12 at 12:06

Asciiom · Accepted Answer · 2012-08-17T15:43:17.027

0

Something like this should work (untested, but shows you the idea):

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">

var zone1 = new Array("london", "manchester", "spain", "paris");
var zone2 = new Array("newyork", "toronto", "los angeles", "vancouver");
var zone3 = new Array("delhi", "seoul", "moscow", "dhaka");

var zones = {};
var zoneLabels = {};

zoneLabels.europe = "Europe";
zoneLabels.northamerica = "North America";
zoneLabels.asia = "Asia"; 

zones.europe = zone1;
zones.northamerica = zone2;
zones.asia = zone3;


function validateForm(){
    var x=document.forms["myForm"]["fname"].value;

    for (i in zones){
        var zone = zones[i];
        for(j in zone){
            if( x == zone[j]){
                alert("you are in " + zoneLabels[i]);
                return false;
            }
        }
    }

    alert("try again");
    return false;
}
</script>

<title>test</title>
</head>

<body>
<form name="myForm" action="" onsubmit="return validateForm()" method="post">
    Enter your City: <input type="text" name="fname">
    <input type="submit" value="Submit">
</form>
</body>

</html>

if you want to map the continent properties of the zones object to custom labels, you could define a second object (I edited the code above)

UPDATE:

If you want to add more zones, you should add a new zone array:

var zone4 = new Array("canberra","perth");

Add this to the zones object:

zones.australia = zone4;

And add an entry to the zoneLabels object:

zoneLabels.australia = "Australia";

edited Aug 17 '12 at 15:43

answered Aug 17 '12 at 11:26

Asciiom

9,867
7
38
57

OK so, are you actually trying to compare two arrays like `(array1 == array2)` as in this line `if(if x == zone[j])`. – Vishal Aug 17 '12 at 12:04
x contains the value retrieved from the form textfield, not an array. And zone[j] contains an zone array element (city string). (the two if words should be only one of course, fixed) – Asciiom Aug 17 '12 at 12:08
so you're comparing a single value to whole array? please see this question on [comparing arrays](http://stackoverflow.com/questions/27030/comparing-arrays-of-objects-in-javascript) – Vishal Aug 17 '12 at 12:09
No I'm not. I compare zone[j], which is an element from one of the zone arrays (string), to x, which is a string value retrieved from the form. So I compare two strings, no arrays. – Asciiom Aug 17 '12 at 12:12
@JeroenMoons thanks for your reply. It is something similar to what I need. Much appreciate your quicker response. I think you missed a } at the end. However, when I add for arrays, which is my requirement it doesnt seem to work. – user1606726 Aug 17 '12 at 13:34
No problem. I missed a } indeed, I fixed that. What do you mean with "doesn't" work exactly? Do you get an error? – Asciiom Aug 17 '12 at 13:38
@JeroenMoons when I add four arrays, the logic isn't working. Would you post one with four arrays. Thanks in advance – user1606726 Aug 17 '12 at 14:27

score 0 · Answer 2 · answered Aug 17 '12 at 12:20

Possible solution.

var zones = {
    "london" : "Europe",
    "newyork" : "North America",
    "delhi" : "Asia"
}

function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if( zones[ x ] ) {
        alert( "You are in " + zones[ x ] );
    } else {
        alert( "try again" );
    }
}

You only return false in your function so I am guessing this is by design. I took that out as a function without a return statement returns undefined which is a falsy value.

Validating textfield input from javascript array

2 Answers2