I’m pretty new to HTML/CSS/Javascript and I’m trying to create a simple contact form.
I’ve stripped out all of the irrelevant code, and I still get the same error :
ReferenceError : sendMsg is not defined
I am unable to get the function ‘to be seen’ by the form. I’ve even made the function public. I found a link to where the problem was that there was an element with the same name as the function, so I made sure my function name is unique. But still I can’t get it going.
<!DOCTYPE html >
<html lang="en">
<head>
<!-- email from javascript -->
<script type="javascript/text">
// import {GenericEmail} from ../../js/Email/ElasticEmail.js;
public function sendMsg()
{
var regEmail=/^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/g;
var regPhone=/^d{10}$/;
var regName = /d+$/g;
const send = true;
const name = document.forms.ContactForm.ContactName.value;
const telNo = document.forms.ContactForm.ContactTel.value;
const email = document.forms.ContactForm.ContactEmail.value;
const msg = document.forms.ContactForm.ContactMsg.value;
if (name == "" || regName.test(name))
{
send = false;
document.forms.ContactForm.ContactName.placeholder = "Name is required";
}
if (telNo <> "" && regPhone.test(telNo))
{
send = false;
document.forms.ContactForm.ContactTel.placeholder = "Valid phone number required";
}
if (email == "" || regEmail.test(email)
{
send = false;
document.forms.ContactForm.ContactEmail.placeholder = "Email address is required";
}
if (msg.trim().length == 0)
{
send = false;
document.forms.ContactForm.ContactMsg.placeholder = "Say something...";
}
if (send)
{
const sender = new GenericEmail();
const result = sender.SendMail("YourNuttyLady", name, telNo, email, msg);
if (result == "ok")
{
alert("Message was sent !");
}
}
}
</script>
</head>
<body>
<div class="page-wrapper">
<!-- Contact Us -->
<form class="submission-form" name="ContactForm" onsubmit="return sendMsg()" method="POST">
<input type="text" id="first-name" name="ContactName" placeholder="Enter your name"> </br>
<input type="tel" id="phone" name="ContactTel" placeholder="Enter your phone number"> </br>
<input type="email" id ="email" name="ContactEmail" placeholder="Enter your email"></br>
<textarea id="message" name="ContactMsg" placeholder="Enter your message"></textarea>
<input type="submit" id="sendBtn" value="send" name="ContactSend">
</form>
</div>
</div>
</div>
</div>
</body>
</html>
3
Answers
REMOVE the invalid javascript/text type and just have
<script>...</script>
CHECK your syntax. JS uses
!=
and not<>
.Missing
)
betweenregEmail.test(email)
and{
.const send
needs to belet send
since you cannot re-assign to a constStop submission:
to the head of your page
You get this error because when you click on
send
button your page is refresh and all data is lost.You should add this in your
index.html
You have a couple of errors like the MIME type of the script element. That aside, when you have JavaScript placed in the head element (basically before the entire document has been loaded), make sure that the DOM is loaded, listening for the
DOMContentLoaded
event. And then you can use event listeners for both the submit event and when one of the form fields are invalid.Instead of creating your own logic for testing if the form is OK you should use the build in functionality. All form fields that are required need to have the attribute
required
, meaning that the form will not submit if any form fields are invalid. To make the custom message you can modify the default message when the field is invalid and the callback function is called. I placed the message text as andata-*
attribute. You can define a pattern (regex) for each form field (like the ContactName) or just stick to the default (like the ContactEmail that is defined astype="email"
).