Ask your JavaScript questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

enter data in form "#playerInfo" and push members with those form values. JavaScript

  • SOLVED

There is an error in the code below. I want the user to enter data in the form "#playerInfo" and push members with those form values. I have more than one form on the page.

// 2. assign a function to handle the submit event
form.addEventListener( 'submit', function( evt ) { // Uncaught TypeError: Cannot read property 'addEventListener' of null

JS:

// 1. find the form on the page by id
let form = document.querySelector( '#playerInfo' );

// 2. assign a function to handle the submit event
form.addEventListener( 'submit', function( evt ) { // Uncaught TypeError: Cannot read property 'addEventListener' of null

// 3. use the event object passed here to prevent loading a new page
evt.preventDefault();

// 4. get the values you need from the form object
let SM_name = form["name"].value;
let SM_cccr_expires = form["cccr_expires"].value;
let SM_uscf_rating = form["uscf_rating"].value;
let SM_uscf_id = form["uscf_id"].value;
let SM_uscf_exp = form["uscf_exp"].value;

// 5. handle your data
members.push({
ID: SM_uscf_id,
Name: SM_name,
Rate: SM_uscf_rating,
Exp: SM_uscf_exp
});

console.log( members );
});

END JS

HTML:

<form id="playerInfo" action="#">
<label>player name</label><input type="text" name = "name" />
<label>CCCR mbr. expires</label><input type="text" id="cccr_expires" name="cccr_expires" />
<label>rating</label><input type="text" name="uscf_rating" />
<label>USCF ID#</label><input type="text" name="uscf_id" />
<label>expires</label><input type="text"name="uscf_exp" />
<button type="submit">Submit</button>
</form>

Answers (2)

2019-01-07

Rainner Lins answers:

The error means the JS code (step 1) is not able to find the HTML form. Make sure the JS code runs after the HTML has been loaded on the page. You can do this by loading your JS scripts at the bottom of your HTML page, or by wrapping the JS code above in another event listener that waits for the document to be loaded:

EDIT: Changed document for window.


window.addEventListener( 'load', function() {

// YOUR FORM CODE GOES HERE.

});

2019-01-07

Arnav Joy answers:

what error you are geeting?
if you stie live? if yes please show us url.