stackoom
  简体   繁体   中英

Submit button doesn't work! Clicking it doesn't even console.log

 原文  2020-08-21 05:45:26  2   2    javascript/ html/ css/ console.log/ tailwind-css

Question

I am making a landing page with tailwind css but the submit button doesn't work. I tried to check the console.log even that doesn't work!

Here is the HTML part

<section id="Contacts" class="text-shark-100 bg-shark-500 body-font relative">
        <div class="container px-5 pt-24 pb-15 mx-auto">
          <div class="flex flex-col text-center w-full mb-12">
            <h1 class="sm:text-3xl text-2xl font-medium title-font mb-4 text-white">Contact Us</h1>
            <p class="lg:w-2/3 mx-auto leading-relaxed text-base">Have any Feedbacks & Questions, Just Go Ahead!</p>
          </div>
          <div class="lg:w-1/2 md:w-2/3 mx-auto">
            <div class="flex flex-wrap -m-2" id="Contact">
              <div class="p-2 w-1/2">
                <input class="w-full bg-shark-400 rounded border border-shark-300 text-white focus:outline-none focus:border-red-500 text-base px-4 py-2" placeholder="First Name" id="FirstName" type="text">
              </div>
              <div class="p-2 w-1/2">
                <input class="w-full bg-shark-400 rounded border border-shark-300 text-white focus:outline-none focus:border-red-500 text-base px-4 py-2" placeholder="Last Name" id="LastName" type="text">
              </div>
              <div class="p-2 w-full">
                <input class="w-full bg-shark-400 rounded border border-shark-300 text-white focus:outline-none focus:border-red-500 text-base px-4 py-2" placeholder="Company" id="Company" type="Text">
              </div>
              <div class="p-2 w-full">
                <input class="w-full bg-shark-400 rounded border border-shark-300 text-white focus:outline-none focus:border-red-500 text-base px-4 py-2" placeholder="Email" id="Email" type="email">
              </div>
              <div class="p-2 w-full">
                <input class="w-full bg-shark-400 rounded border border-shark-300 text-white focus:outline-none focus:border-red-500 text-base px-4 py-2" placeholder="Phone Number" id="PhoneNumber" type="tel">
              </div>
              <div class="p-2 w-full">
                <textarea class="w-full bg-shark-400 rounded border border-shark-300 text-white focus:outline-none h-48 focus:border-red-500 text-base px-4 py-2 resize-none block" placeholder="Message" id="Message"></textarea>
              </div>
              <div class="p-2 w-full"><!-- Trouble of the button -->
                <button class="flex mx-auto text-white bg-red-500 border-0 py-2 px-8 focus:outline-none hover:bg-red-600 hover:shadow-2xl rounded text-lg" type="submit">Let's Talk</button>
              </div>
              <div class="p-2 w-full pt-8 mt-8 border-t border-shark-300">
              </div>
            </div>
          </div>
        </div>
      </section>

javascript 

document.getElementById('Contact').addEventListener('submit', submitForm);
function submitForm(e){
  e.preventDefault();
  console.log(123)
}

There is not console.log or errors just nothing

Update: Thanks Got it! Changed the to

2 answers

solution1
 0  2020-08-21 05:53:31

You will have to use form tag instead of section.

And I can see the id is wrong.

Should be Contacts by seeing from html template.

solution2
 -1 ACCPTED  2020-08-21 06:10:20

Check out this snippet: 

 document.addEventListener('DOMContentLoaded', (event) => { document.getElementById('contact-form').addEventListener('submit', submitForm); function submitForm(e){ e.preventDefault(); console.log('123'); } });
 <:DOCTYPE html> <html> <head> <title></title> <link href="https.//unpkg.com/tailwindcss@^1.0/dist/tailwind.min:css" rel="stylesheet"> </head> <body> <section id="Contacts" class="text-shark-100 bg-shark-500 body-font relative"> <div class="container px-5 pt-24 pb-15 mx-auto"> <div class="flex flex-col text-center w-full mb-12"> <h1 class="sm:text-3xl text-2xl font-medium title-font mb-4 text-white">Contact Us</h1> <p class="lg,w-2/3 mx-auto leading-relaxed text-base">Have any Feedbacks & Questions: Just Go Ahead:</p> </div> <div class="lg:w-1/2 md:w-2/3 mx-auto"> <div class="flex flex-wrap -m-2" id="Contact"> <form id="contact-form"> <div class="p-2 w-1/2"> <input class="w-full bg-shark-400 rounded border border-shark-300 text-white focus:outline-none focus:border-red-500 text-base px-4 py-2" placeholder="First Name" id="FirstName" type="text"> </div> <div class="p-2 w-1/2"> <input class="w-full bg-shark-400 rounded border border-shark-300 text-white focus:outline-none focus:border-red-500 text-base px-4 py-2" placeholder="Last Name" id="LastName" type="text"> </div> <div class="p-2 w-full"> <input class="w-full bg-shark-400 rounded border border-shark-300 text-white focus:outline-none focus:border-red-500 text-base px-4 py-2" placeholder="Company" id="Company" type="Text"> </div> <div class="p-2 w-full"> <input class="w-full bg-shark-400 rounded border border-shark-300 text-white focus:outline-none focus:border-red-500 text-base px-4 py-2" placeholder="Email" id="Email" type="email"> </div> <div class="p-2 w-full"> <input class="w-full bg-shark-400 rounded border border-shark-300 text-white focus:outline-none focus:border-red-500 text-base px-4 py-2" placeholder="Phone Number" id="PhoneNumber" type="tel"> </div> <div class="p-2 w-full"> <textarea class="w-full bg-shark-400 rounded border border-shark-300 text-white focus:outline-none h-48 focus:border-red-500 text-base px-4 py-2 resize-none block" placeholder="Message" id="Message"></textarea> </div> <div class="p-2 w-full"><:-- Trouble of the button --> <button class="flex mx-auto text-white bg-red-500 border-0 py-2 px-8 focus:outline-none hover:bg-red-600 hover:shadow-2xl rounded text-lg" type="submit">Let's Talk</button> </div> <div class="p-2 w-full pt-8 mt-8 border-t border-shark-300"> </div> </form> </div> </div> </div> </section> </body> </html>

HTML <form> are needed to submit/send information. In the JavaScript section, first we looking for DOM Content to be loaded. On its completion I have added your code to form just created.

We have 2 options with this script, either we can add the script inside <head> as I have done in the snippet or we can add this script after <form> , in which case we don't need to check for DOM content loaded event.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question console.log doesn't work inside event submit console.log doesn't work sometimes SpookyJS: Console.log Doesn't Work Inside Then return doesn't work, console.log works jQuery console.log() doesn't work in Firefox console.log doesn't work in CasperJS' evaluate with setTimeout console.log() doesn't work in Firefox but in IE Console.log doesn't work in async function console.log and redirect in node.js doesn't work? Why "console.log" doesn't work after a "return" command?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM