解决TypeError：事件未定义

Question

I am attempting to take a user's postal code to request the representatives of the locality. For troubleshooting purposes, I am attempting to log the console of both the postal code and the url including the postal code.

 $(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> 

The error message I receive is "TypeError: event is undefined". Am I missing something obvious?

Answer 1

I'm not sure but what is that about type in the form?

the type="text" is for inputs, and I think you need an action="/route/" instate of type in order to have an event and could prevent it.

Regards.-

Answer 2

Change your closing brackets

$(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 });
});

});