CODEWITHSUNDEEP
javascripthtmlforms
Joana Oliveira
Joana Oliveira

Reputation: 85

How is my form working on my local repository and not on Github?

I've asked a related question earlier today and thought I had solved it but something is wrong.

I updated the changes that I did on my local repository (that is supposedly working) to github. What is happening is that when I open the browser through my local repository the code and form works as its supposed to - the user data is printed in the console and once they click on the submit button there's an alert saying 'Thank you'. But this is not happening on the website it self. What I get is an error on the console saying :"Uncaught TypeError: Cannot read property 'addEventListener' of null".

So I'm not sure how to solve this and how I get an error on the Github repository and not on my local one if the code is up to date, so they should have the same results.

Here is the website: https://giacomosorbi.github.io/joanaoli09-module-i/contact.html and the entire code https://github.com/GiacomoSorbi/joanaoli09-module-i

For a quick view, here's the HTML and JavaScript code

               <h1>
                I'd love to chat with you about your upcoming project.
              </h1>
              <div class="intro-text">
                Fill out the form bellow to get in touch. Either for a budget information or to book a meeting to discuss
                any ideas that you might have, you can contact me for any
                clarification you need. I'll get back to you in 2-3 days.
              </div>
              <div class="row open-form">
                <div class="open-btn">
                  <button id="show-modal"><strong>Open Form</strong></button>
                </div>
              </div>
    <div class="modal modal--hidden">
      <div class="modal_content">
        <div class="close">
          <i class="fas fa-times" onclick="closeMe()"></i>
        </div>
        <h1>Ask away</h1>
        <form id="submit">
          <input type="text" placeholder="Name" name="name" />
          <input type="email" id="email" placeholder="Email" name="email"/>
          <input type="text" placeholder="Subject" name="subject" />
          <textarea placeholder="Message" name="message"></textarea>
          <button class="submit">Submit</button>
        </form>
     </div>
   </div>
<script src="./JavaScript/action_page.js"></script>

document.getElementById("show-modal").addEventListener("click", function() {
  document.querySelector(".modal").style.display = "flex";
});

function closeMe() {
  document.querySelector(".modal").style.display = "none";
}

document.querySelector("#show-modal").addEventListener("submit", event => {
  event.preventDefault();
  toggleModal();
  let formData = new FormData(document.querySelector("#show-modal"));
  console.log(
    "Name:" + formData.get("name"),
    "Email:" + formData.get("email"),
    "Subject:" + formData.get("subject"),
    "Message:" + formData.get("message")
  );
  alert("Thank you for your message!");
});

Upvotes: 0

Views: 142

Answers (1)

AmitJS94
AmitJS94

Reputation: 1212

The button in the form should have type="submit"

submit event listener should be on the form, not on the modal.

$("#submit").on("submit", function(event){
 event.preventDefault();
 toggleModal();
 let formData = new FormData(document.querySelector("#show-modal"));
 console.log(
  "Name:" + formData.get("name"),
  "Email:" + formData.get("email"),
  "Subject:" + formData.get("subject"),
  "Message:" + formData.get("message")
);
alert("Thank you for your message!");
 return true;
})

Upvotes: 2

Related Questions