Question 355598 in Javascript Question posted in
A very good W3school tutorial can be found here.

Submit Button not triggering javascript functions

I have a form and functions don’t work on those buttons. I am using Axios to do the post request. Is it something related to children layouts? Naming the files? It’s the fact of my children layout dont have body or main tags?

main layout

import { Inter } from "next/font/google";
import Head from 'next/head';
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata = {
  title: "Company Dashboard",
  description: "",
};

export default function DashboardLayout({ children }) {
  return (
    <div className="mainContent">
      <Head>
        <title>{metadata.title}</title>
        <meta name="description" content={metadata.description} />
      </Head>
      <header>
        {/* Header content goes here */}
      </header>
      <body>


      <div className="leftMenu">     
        <nav>
                <a href="/"><button>Home</button></a>

                <a href="/admins"><button>Admins</button></a>

                <a href="/employees"><button>Employees</button></a>

                <a href="/clients"><button>Clients</button></a>

                <a href="/cars"><button>Cars</button></a>
        </nav>
      </div>
      <div className="leftContent"></div>
      <div className="middleContent">{children}</div>
      <div className="rightContent"></div>
      
        
      </body>
    </div>
  );
}

code in question

'use client'
import React  from "react";
import axios from 'axios';



export default function employees(){

 
  const formDataClass = {name:'',surname:'',email:''}

  async function login() {
    try {
      const response = await axios.post("URL",formDataClass);
      alert(formDataClass.name);
    } catch (error) {
      console.log(error);
    }
  }


    return(
     
        <div className="content">
        <div><h1>Seja Bem Vindo ao Sistema de Gestão V1.0</h1></div>
        <div className="formulary">
          <div><h3>Formulário de Empregados</h3></div>
          <div>
            <form>
                <input onChange={(e)=>formDataClass.name=e.target.value} placeholder="Insert Your Name"></input>
                <input onChange={(e)=>formDataClass.surname=e.target.value} placeholder="Insert Your Surname"></input>
                <input onChange={(e)=>formDataClass.email=e.target.value} placeholder="Insert your Email"></input>
                <div className="formButtons">
                  <button type="button">Save</button>
                  <button type="button" onClick={login()}>Submit</button>
                  
                </div>
            </form>
          </div>
        </div>

        
      </div>
    );
}

I did try everything and expect the buttons to trigger the axios post

Tags:

2

Answers


  1. 0

    Try one of below?

    <button type="button" onClick={login}>Submit</button>
<button type="button" onClick={() => login()}>Submit</button>
    Login or Signup to reply.
  2. 0

    Since you’re using React you should be using state to manage your form data.

    Your button should be onClick={login} because onClick={login()} assigns the value of the result of calling login to your event handler rather than a reference to the function itself.

    const { useState } = React;

function Example() {

  // Set your state
  const [ form, setForm ] = useState({name:'', surname:'', email:''});

  // When the button is clicked do your axios
  // process (but here I'm just logging the form data)
  function login() {
    console.log(form);
  }

  // When an input value is changed grab its name and value
  // and update the form state object
  function handleChange(e) {
    const { name, value } = e.target;
    setForm(prev => ({ ...prev, [name]: value }));
  }

  // Make sure you give your inputs names, assign the
  // handleClick function to the onClick handler, and
  // make your inputs controllable by assigning their
  // values to their value contained in state
  return (
    <form>
      <input
        name="name"
        value={form.name}
        onChange={handleChange}
        placeholder="Insert Your Name"
      />
      <input
        name="surname"
        value={form.surname}
        onChange={handleChange}
        placeholder="Insert Your Surname"
      />
      <input
        name="email"
        value={form.value}
        onChange={handleChange}
        placeholder="Insert your Email"
      />
      <div className="formButtons">
        <button type="button" onClick={login}>Submit</button>
      </div>
    </form>
  );
}

const node = document.getElementById('root');
const root = ReactDOM.createRoot(node);
root.render(<Example />);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.min.js"></script>
<div id="root"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search