-1

I have a form on my site, and I need to change the response just for people who enter one of a few zip codes. I'm trying to set the code up to check the first 3 digits of the entered zip code against the objects saved in my array. It's not finished yet, but I'm testing it as I go along and right now I'm trying to get the zipValue to show in the console once someone clicks off of the zip field, but I'm not having any luck getting it to work. This is what I have so far - 

let inLA = false;
var zipsLA = ["700, 701, 703, 704, 705, 706, 707, 708, 710, 711, 712, 713, 714"];
const $zipField = document.getElementById('formFieldZip')
const $zipValue = document.getElementById('formFieldZip').value

$zipField.addEventListener('blur', function(){
    console.log(zipValue);
});

My eventual hope is that if the first 3 digits of the entered zip code match an entry in the array, it will set 'inLA' to true.

Edit: Fiddle link: https://jsfiddle.net/zdy9sgbn/

Molly Campbell
  • 339
  • 2
  • 6
  • 15
  • Do you have a fiddle that illustrate the example? – practice2perfect Aug 24 '17 at 02:54
  • 2
    Please try to improve your question. Do you have any idea what are you doing? let vs var?, Array definition is not realy an array (only one element). leading $-sign at variables... why? addEventListener at an undefined object ($zipField unequal zipField)... Check your code and please remove these kind of errors by yourself. These are parsing errors (your console should show you some errors. Fix them) – Joshua K Aug 24 '17 at 02:54
  • Is the addEventListener inside document.ready ? – practice2perfect Aug 24 '17 at 02:55
  • @practice2perfect Added a fiddle link, I have tried addEventListener in and outside of document.ready, it doesn't seem to make a difference – Molly Campbell Aug 24 '17 at 03:04
  • @practice2perfect why does the addEventListener need to be inside document.ready? Do you see jQuery used in the problem? – Sudhansu Choudhary Aug 24 '17 at 03:07
  • @SudhansuChoudhary the fiddle given has jquery included and the question is also tagged with jquery. So I assume Jquery is used. – practice2perfect Aug 24 '17 at 03:19
  • @JoshuaK I'm not sure what you mean about the array not really being an array. – Molly Campbell Aug 24 '17 at 03:21
  • @MollyCampbell `["700, 701, 703, 704, 705, 706, 707, 708, 710, 711, 712, 713, 714"].length;` results in 1 instead of 13. – Joshua K Aug 24 '17 at 03:24
  • @JoshuaK I see what you mean, thank you – Molly Campbell Aug 24 '17 at 03:26

3 Answers3

1

Try something like this:

let inLA = false;
var zipsLA = ["700", "701", "703", "704", "705", "706", "707", "708", "710", "711", "712", "713", "714"];
const $zipField = document.getElementById('formFieldZip');

$zipField.addEventListener('blur', function(){
    if (zipsLA.indexOf(this.value.slice(0, 3)) != -1) {
     inLA = true;
    } else {
     inLA = false;
    }
    console.log(inLA);
});
<form action="">
  <input type="text" id="formFieldZip">
</form>
nersoh
  • 166
  • 1
  • 6
0

Problem is you take the input value in the beginning(which is undefined). It doesn't get updated in your event listner.

Fetch the value from the input in your eventListener.

Use this,

var inLA = false;
var zipsLA = ["700", "701", "703", "704"];
const $zipField = document.getElementById('formFieldZip');

$zipField.addEventListener('blur', function(){
    console.log($zipField.value);
    (zipsLA.indexOf($zipField.value) > -1) ? console.log('zip matched') : console.log('no match');
});

You have a lot of syntax errors too. See the comments above.

Sudhansu Choudhary
  • 3,095
  • 2
  • 15
  • 28
  • Trying this, thank you. So far it says no match, even though it should match, but it's getting much closer – Molly Campbell Aug 24 '17 at 03:25
  • You don't need to put it in window.onload. You can add a script at the end of the body and put this piece of code there. If you are using jQuery, add the code inside document.ready. – Sudhansu Choudhary Aug 24 '17 at 03:28
0

The problem is you are trying to access the DOM elements before it is loaded.

The fiddle shows you are using onLoad where you should be using ready

Updated your fiddle as well https://jsfiddle.net/zdy9sgbn/1/ 

$( document ).ready(function() {
    const $zipField = document.getElementById('formFieldZip')
    const $zipValue = document.getElementById('formFieldZip').value

    $zipField.addEventListener('blur', function(){
      console.log($zipField.value);
    });
});

Once the DOM is ready, you can query the elements in DOM and you can add event listeners to it.

If you are looking for a pure JS alternative for jquery's document ready, you can use this solution here.

practice2perfect
  • 471
  • 4
  • 18