I'm new at this so please forgive any mistakes.. I am trying to get this form to submit but it won't return anything in the console.. is it because my entire html file is in a return statement from a js function? I assumed it would work because I imported a .css file and it translated just fine, but how do I get the submit button to return something in the console? I've attempted both querySelector and getElementbyID but when I press submit, it won't output anything.

import React from "react";
import './css/Contact.css';

function Contact(){
    return (
        <div className="contact-container">
          <div className="top">
            <form action="Contact" className="contactForm" id="contactForm">
            <div><input type="text" className="name" id="name" placeholder="Enter your name"></input></div>
            <div><input type="text" className="email" id="email" placeholder="Enter your email"></input></div>
            <div><input type="text" className="message" id="message" placeholder="Enter your message"></input></div>
            <button type="submit" id = "submit">Submit</button>
            </form>
          </div>
          <div className="bottom">
            <h1>Get in touch!</h1>
            <h2>Hi there! We look forward to connecting with you!</h2>
            <h3>If you would like to get in touch please contact us at [email protected] or fill out the contact form displayed on your screen. </h3>
           </div>
   
          <script src="./contactDB.js"></script>   
          </div>   
          
      );
}

export default Contact;

Firebase File

import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";

const firebaseConfig = {
    ...
  };

  // Initialize Firebase
  const app = initializeApp(firebaseConfig);
  const analytics = getAnalytics(app);
  
  // Refernece contactInfo collections
  let contactInfo = firebase.database().ref("infos");
  
  // Listen for a submit
  document.querySelector("contactForm").addEventListener("submit", submitForm);
  
  function submitForm(e) {
    e.preventDefault();
  
    //   Get input Values
    let name = document.querySelector("name").value;
    let email = document.querySelector("email").value;
    let message = document.querySelector("message").value;
    console.log(name, email, message);
  
    saveContactInfo(name, email, message);
    document.querySelector("contactForm").reset();
  }
  
  // Save infos to Firebase
  function saveContactInfo(name, email, message) {
    let newContactInfo = contactInfo.push();
  
    newContactInfo.set({
      name: name,
      email: email,
      message: message
    });
  }

CodePudding user response：

you should add "onSubmit" attribute to the form tag and pass the function you want to execute to it, for example:

function Contact(){

const submitHandler = () => {
   e.preventDefault();

console.log("form submitted");
};

    return (
        <div className="contact-container">
          <div className="top">
            <form onSubmit={submitHandler} className="contactForm" id="contactForm">
            <div><input type="text" className="name" id="name" placeholder="Enter your name"></input></div>
            <div><input type="text" className="email" id="email" placeholder="Enter your email"></input></div>
            <div><input type="text" className="message" id="message" placeholder="Enter your message"></input></div>
            <button type="submit" id = "submit">Submit</button>
            </form>
          </div>
          <div className="bottom">
            <h1>Get in touch!</h1>
            <h2>Hi there! We look forward to connecting with you!</h2>
            <h3>If you would like to get in touch please contact us at [email protected] or fill out the contact form displayed on your screen. </h3>
           </div>
   
          <script src="./contactDB.js"></script>   
          </div>   
          
      );
}

CodePudding user response：

you need to pass in a call back function will be triggered onsubmit.

CodePudding user response：

First, to give an element a class name you have to type the attribute like this =

<element ></element>

second, when you make a type="submit" button in a form when you click on it it reloads and sends the data it doesn't have time to print something in the console the solution for this is to make the type of the button "button" or to make use the preventDefault() method like this:

const myForm = document.forms[0];

    myForm.onsubmit = (e) => {
          e.preventDefault()
    }