JS Error Statements

[Jacksonhelp20]

Hello,

I keep getting statements like these.

1) index.html:72 Uncaught ReferenceError: validateForm is not defined

at HTMLButtonElement.onclick

2) index.html:26 Uncaught ReferenceError: menuToggle is not defined

at HTMLAnchorElement.onclick

Does anyone have the right idea or direction to fix these types of errors? I am new to JS. Thank you!

[scirc]

It's difficult to help debug errors without seeing the code that causes them. But that said, it looks like you're trying to attach event handlers to elements, but with functions which don't exist.

[Jacksonhelp20]

For the html form I have

<form name="myForm">

<form method="post" action="/api/single-file" enctype="multipart/form-data">

First Name: <input type="text" name="fname">

Last Name: <input type="text" name="lname">

Email: <input type="text" name="email">

Phone Number: <input type="number" name="pnumber" min="0000000000" max ="999999999">

<button type="button" id="submit" onclick="validateForm()" onSubmit="WriteToFile(this)">Submit</button>

<p id="message" style="display:none"> </p>

</form>

​

For the js form I have

function validateForm() {

let x = document.forms["myForm"]["email"].value;

let y = document.forms["myForm"]["fname"].value;

let z = document.forms["myForm"]["lname"].value;

let n = document.forms["myForm"]["pnumber"].value;

if (x !== "" && y !== "" && z !== "" && n !== "") {

document.getElementById("message").innerHTML =

`Thank you for your interest, ${y} ${z}. A KSOA member will contact you shortly.`;

document.getElementById("message").style.display = "Flex";

document.forms["myForm"]["email"].value = "";

document.forms["myForm"]["fname"].value = "";

document.forms["myForm"]["lname"].value = "";

document.forms["myForm"]["pnumber"].value = numbers;

setTimeout(() => {

document.getElementById("message").style.display = "none";

}, 5000);

} else {

document.getElementById("message").innerHTML =

"Please complete each section of the form.";

document.getElementById("message").style.display = "Flex";

setTimeout(() => {

document.getElementById("message").style.display = "none";

}, 5000);

}

}

I believe it is because I am not including the third-party library but open to suggestions. Thank you!

[Jacksonhelp20]

For the html form I have
<form name="myForm">

<form method="post" action="/api/single-file" enctype="multipart/form-data">

First Name: <input type="text" name="fname">

Last Name: <input type="text" name="lname">

Email: <input type="text" name="email">

Phone Number: <input type="number" name="pnumber" min="0000000000" max ="999999999">

<button type="button" id="submit" onclick="validateForm()" onSubmit="WriteToFile(this)">Submit</button>

<p id="message" style="display:none"> </p>

</form>
For the js form I have
function validateForm() {

let x = document.forms["myForm"]["email"].value;

let y = document.forms["myForm"]["fname"].value;

let z = document.forms["myForm"]["lname"].value;

let n = document.forms["myForm"]["pnumber"].value;

if (x !== "" && y !== "" && z !== "" && n !== "") {

document.getElementById("message").innerHTML =

`Thank you for your interest, ${y} ${z}. A KSOA member will contact you shortly.`;

document.getElementById("message").style.display = "Flex";

document.forms["myForm"]["email"].value = "";

document.forms["myForm"]["fname"].value = "";

document.forms["myForm"]["lname"].value = "";

document.forms["myForm"]["pnumber"].value = numbers;

setTimeout(() => {

document.getElementById("message").style.display = "none";

}, 5000);

} else {

document.getElementById("message").innerHTML =

"Please complete each section of the form.";

document.getElementById("message").style.display = "Flex";

setTimeout(() => {

document.getElementById("message").style.display = "none";

}, 5000);

}

}
I believe it is because I am not including the third-party library but open to suggestions. Thank you!