HTML Form OnSubmit function not defined

AlexC
September 19, 2023
267 views
2 votes
3 Answers

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>

Tags: html javascript

Answers

REMOVE the invalid javascript/text type and just have <script>...</script>
CHECK your syntax. JS uses != and not <>.
Missing ) between regEmail.test(email) and {.
const send needs to be let send since you cannot re-assign to a const
Stop submission:

if (send) { ...  }  
else return false

You need to use a module if you want to import your genericMail – you may get away with adding

<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.min.js
"></script>

to the head of your page

function sendMsg() {

  var regEmail = /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/g;
  var regPhone = /^d{10}$/;
  var regName = /d+$/g;

  let 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 !");
      }
    }
    else return false
  }

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

- KannuMandora
- September 16, 2023 at 4:50 pm
- 0 votes
0
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
```
<form class="submission-form" name="ContactForm" onsubmit="sendMsg(); return false" method="POST">

</form>
```
Login or Signup to reply.

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 an data-* 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 as type="email").

form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .3em;
}

<head>
  <script type="text/javascript">
    // make sure that the DOM is loaded
    document.addEventListener('DOMCOntentLoaded', e => {
      // when the sumit event happens
      document.forms.ContactForm.addEventListener('submit', e => {
        e.preventDefault();
        let form = e.target;
        const sender = new GenericEmail();
        const result = sender.SendMail("YourNuttyLady", form.ContactName.value, form.ContactTel.value, form.ContactEmail.value, form.ContactMsg.value);
        if (result == "ok") {
          alert("Message was sent !");
        }
      });
      // when one or more form fileds are not valid
      document.forms.ContactForm.addEventListener('invalid', e => {
        e.target.setCustomValidity(e.target.dataset.feedback);
      });
    });
  </script>
</head>

<body>
  <div class="page-wrapper">
    <form class="submission-form" name="ContactForm" method="POST">
      <input type="text" name="ContactName" placeholder="Enter your name" data-feedback="Name is required" pattern="w{3,16}" required>
      <input type="tel" name="ContactTel" placeholder="Enter your phone number" data-feedback="Valid phone number" pattern="d{10}" required>
      <input type="email" name="ContactEmail" placeholder="Enter your email" data-feedback="Email address is required" required>
      <textarea name="ContactMsg" placeholder="Enter your message" min="1" required></textarea>
      <button type="submit">Send</button>
    </form>
  </div>
</body>

Please signup or login to give your own answer.

Click here to cancel reply.