解决类型错误:事件未定义

Question

我试图获取用户的邮政编码来请求当地的代表。出于故障排除目的，我正在尝试记录邮政编码和 url(包括邮政编码(的控制台。

$(document).ready(function() {
      //Wait until user submits postal code (ie. K2H6G7)
      $("form").on("submit", function(event) {
          var request = new XMLHttpRequest();
          event.preventDefault();
          var searchWord = $("#search").val(); //Take postalcode and apply to url
          var url = "https://represent.opennorth.ca/postcodes/" + searchWord + "/?format=apibrowser";
          console.log(searchWord);
          console.log(url) request.open('GET', url, true);
          request.onreadystatechange = function() {
            if (request.readyState === 4) {
              if (request.status === 200) {
                //Connect to API, create cards for each politician instance
                var data = JSON.parse(this.response);
                data.representatives_centroid.forEach(representatives_centroid => {
                  const card = document.createElement('div');
                  card.setAttribute('class', 'card');
                  const img = document.createElement('img');
                  img.src = representatives_centroid.photo_url;
                  const p1 = document.createElement('p');
                  p1.textContent = `$ {
              representatives_centroid.party_name
            }
            $ {
              representatives_centroid.elected_office
            }
            $ {
              representatives_centroid.first_name
            }
            $ {
              representatives_centroid.last_name
            }
            `
                  const p2 = document.createElement('p');
                  p2.textContent = `$ {
              representatives_centroid.district_name
            }
            ` //Add data to card
                  container.appendChild(card);
                  card.appendChild(img);
                  card.appendChild(p1);
                  card.appendChild(p2);
                });
              } else {
                console.log('error');
              }
            }
          }
          request.send();
        }
        ());
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="form">
  <form type="text" class="form-inline" role="form">
    <label for="address" name="postalcode">Enter an address or postal code</label>
    <input id="search" placeholder="Enter an address or postal code" type="text">
    <button id="go">
    <span class="glyphicon glyphicon-search"></span> Find
  </button>
  </form>
</div>

我收到的错误消息是"类型错误：事件未定义"。我错过了一些明显的东西吗？

Answer 1

更改右括号

$(document).ready(function() {   
//Wait until user submits postal code (ie. K2H6G7)
$("form").on("submit", function(event) {
    var request = new XMLHttpRequest();
    event.preventDefault();
    var searchWord = $("#search").val();   //Take postalcode and apply to url
    var url = "https://represent.opennorth.ca/postcodes/" + searchWord + "/?format=apibrowser";
    console.log(searchWord);
    console.log(url)
    request.open('GET', url, true);
    request.onreadystatechange = function() {
        if (request.readyState === 4) {
            if (request.status === 200) {
                //Connect to API, create cards for each politician instance
                var data = JSON.parse(this.response);
                data.representatives_centroid.forEach(representatives_centroid => {
                    const card = document.createElement('div');
                    card.setAttribute('class', 'card');
                    const img = document.createElement('img');
                    img.src = representatives_centroid.photo_url;
                    const p1 = document.createElement('p');
                    p1.textContent = `${representatives_centroid.party_name} ${representatives_centroid.elected_office} ${representatives_centroid.first_name} ${representatives_centroid.last_name}`
                    const p2 = document.createElement('p');
                    p2.textContent = `${representatives_centroid.district_name}`
                    //Add data to card
                    container.appendChild(card);
                    card.appendChild(img);
                    card.appendChild(p1);     
                    card.appendChild(p2);
                });
        } else {
                console.log('error');
        }
    }
}
request.send();
//THESE //
 // Change from }());  to });
});
});

Answer 2

我不确定，但是表单中的类型是什么？

type="text" 用于输入，我认为您需要一个 action="/route/" 类型的状态才能发生事件并可以阻止它。

问候。-