Is my javascript is connected to HTML correctly and triggering?

Question

I have my form setup with id="contactForm". When I write $("#contactForm").submit(function(event){...} in the corresponding JS file, nothing in it even seems to be triggering.

Whats wrong here?

$("#contactForm").submit(function(event) {
  // cancels the form submission
  event.preventDefault();
  console.log("submit hit");
  alert("Submitted");
});

<script src="js/jquery-3.2.1.min.js"></script>
^ I use this in production, not a CDN 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="modal-body">
<form role="form" action="form-process.php" method="POST" id="contactForm">
  <div class="input-group mb-3">
    <label for="name"></label>
    <div class="input-group-prepend"> <span class="input-group-text">Name</span> </div>
    <input type="text" class="form-control" id="name" aria-label="First and last name.">
    <div class="invalid-feedback">Required</div>
    <div class="valid-feedback"></div>
  </div>
  <div class="input-group mb-3">
    <div class="input-group-prepend"> <span class="input-group-text">Email</span> </div>
    <input type="email" class="form-control" aria-label="Email address." id="email">
  </div>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Subject</button>
      <div class="dropdown-menu"> <a class="dropdown-item" href="#">Music</a> <a class="dropdown-item" href="#">Programming</a> <a class="dropdown-item" href="#">Just saying hi!</a> </div>
    </div>
    <input type="text" class="form-control" aria-label="Subject" id="subject">
  </div>
  <div class="input-group">
    <div class="input-group-prepend mb-3"> <span class="input-group-text">Message</span> </div>
    <textarea class="form-control" id="message" aria-label="Email message."></textarea>
  </div>
</form>
<button class="btn btn-outline-primary" id="form-submit" type="submit" data-dismiss="modal">Send</button>
</div>
<script src="js/email.js"></script>
^ This has the contents of the form logic

Here's the link to the live site.

Please include all relevant code here in a [mcve]. External links for code should only be used for demonstration purposes. — Patrick Evans, Jun 20 '18 at 20:47
Could you post the code, rather than have us search through your website to try and figure out where its located and where is the issue? — , Jun 20 '18 at 20:47
step 1: verify that what you think you're getting, is what you're getting. Use `console.log` to print what `$("#contactForm")` gives you. Is that actually the form? If not, you've solved part of your own problem on your own. If it is, that's good information to add to the question, because it means the problem is not with element selection. — Mike 'Pomax' Kamermans, Jun 20 '18 at 20:47
Could be that you are returning false or an the script run into an exception, on the function, which stops the execution of the submit event. Also, if there are two elements with the same id, the code wouldn't work. — Uriel Bertoche, Jun 20 '18 at 20:49

showdev · Answer 1 · 2018-06-20T21:16:01.127

It seems that your submit button is outside of the <form>.
It needs to be within the <form> tags in order to submit the form and fire the submit event.

(The button still closes the modal because of data-dismiss="modal".)

$("#contactForm").submit(function(event) {
  // cancels the form submission
  event.preventDefault();
  console.log("submit hit");
  alert("Submitted");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form role="form" action="form-process.php" method="POST" id="contactForm">
  <div class="input-group mb-3">
    <label for="name"></label>
    <div class="input-group-prepend"> <span class="input-group-text">Name</span> </div>
    <input type="text" class="form-control" id="name" aria-label="First and last name.">
    <div class="invalid-feedback">Required</div>
    <div class="valid-feedback"></div>
  </div>
  <div class="input-group mb-3">
    <div class="input-group-prepend"> <span class="input-group-text">Email</span> </div>
    <input type="email" class="form-control" aria-label="Email address." id="email">
  </div>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Subject</button>
      <div class="dropdown-menu"> <a class="dropdown-item" href="#">Music</a> <a class="dropdown-item" href="#">Programming</a> <a class="dropdown-item" href="#">Just saying hi!</a> </div>
    </div>
    <input type="text" class="form-control" aria-label="Subject" id="subject">
  </div>
  <div class="input-group">
    <div class="input-group-prepend mb-3"> <span class="input-group-text">Message</span> </div>
    <textarea class="form-control" id="message" aria-label="Email message."></textarea>
  </div>
  <button class="btn btn-outline-primary" id="form-submit" type="submit" data-dismiss="modal">Send</button>
</form>

If interested, also see Submit form using a button outside the tag.

I made the change to put my button inside
. It seems submit() is still not working. I am using jquery 3.2.1 and linking the file at the beginning of . Any more suggestions? — Noah, Jun 21 '18 at 02:58
You may want to put your JavaScript just before the end of the ``, use `async`/`defer`, or execute code after the DOM is ready. See [Where should I put — showdev, Jun 21 '18 at 16:43
I now have it inside at the bottom. The email.js file is still not firing. Chrome JS debugger gives me this error though: `GET blob:http://noahnethery.com/49de1942-e40a-4b67-8898-7954147d3444 0 ()` — Noah, Jun 21 '18 at 17:28
Please create a [working example](https://stackoverflow.com/help/mcve) to help demonstrate the problem. The code seems to be working in my example above, but there may be something unknown involved in your code that's causing a problem. — showdev, Jun 21 '18 at 17:38
I've updated it to match closer my HTML document. If I need to post the entire document, I'll do that next if an error can't be found. Thanks! — Noah, Jun 21 '18 at 18:19

score 0 · Answer 2 · answered Jun 20 '18 at 21:07

0

The button #form-submit which submits the form needs to be inside the <form></form> block. Try fixing that and it will work fine.

answered Jun 20 '18 at 21:07

Arvind Mahto

1
1

Is my javascript is connected to HTML correctly and triggering?

2 Answers2