When ever I submit my form I get the form data in my URL instead of it posting to my backend

Question

I am having an issue when I submit my form it puts all of the form data into my URL instead of sending it to my backend. I'm not sure what the issue is at first I thought it was because I didn't have a method="post" in the form tag but that didn't fix my issue because it tried to send the form data to localhost:3000/register instead of localhost:5000/register. Any help would be appreciated.

Bellow is my current Frontend code.

import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom'
import '../css/register.css';
import {IoMdArrowRoundBack} from 'react-icons/io'
import { useState } from 'react'
import axios, { Axios } from 'axios';


const Register = () => {

    const [emailReg, setEmailReg] = useState("");
    const [usernameReg, setUsernameReg] = useState("");
    const [passwordReg, setPasswordReg] = useState("");

    const register = () => {
        Axios.post('http://localhost:5000/register', {
            email: emailReg,
            username: usernameReg, 
            password: passwordReg, 
        }).catch(function (error) {
            console.log(error);
        });
    };

    return (
        <div className='background-image'>

            <div className='back-button'>
                <Link to='/'>
                    <IoMdArrowRoundBack id='back-arrow' />
                    <h3>Home</h3>
                </Link>
            </div>

        <div className="container-wrapper">
            <div className="container">

            <h1>Create Account</h1>

                <div className="wrapper">
                    <form>
                        <div className="textarea" id="email">
                         <input 
                            type="email" 
                            onChange={(e) => {
                                setEmailReg(e.target.value);
                            }} 
                            name="email" 
                            id="authentactor-email" 
                            placeholder="Email" 
                            defaultValue="" 
                            required 
                          />
                        </div>

                        <div className="textarea" id="username">
                          <input 
                            type="text" 
                            onChange={(e) => {
                                setUsernameReg(e.target.value);
                            }}
                            name="name" 
                            id="authentactor-text" 
                            placeholder="Username" 
                            defaultValue="" 
                            required 
                          />
                        </div>

                        <div className="textarea" id="password">
                          <input 
                            type="password" 
                            onChange={(e) => {
                                setPasswordReg(e.target.value);
                            }}
                            name="password" 
                            id="authentactor-password" 
                            placeholder="Password" 
                            defaultValue="" 
                            required 
                          />
                        </div>

                        <div id="button-wrapper">
                            <button id="button" onClick={register}>Create Account</button>
                        </div>
                    </form>


                    <div className='bottom-text-wrapper'>
                        <h4>Already have an account?   <Link to='/login'>Login Here</Link></h4>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
    )
}

export default Register

Answer 1

According to HTML Living Standard

The missing value default and invalid value default are the Submit Button state.

You can find more information on this question but basically adding type="button" to your Create Account button should do the job.

(so something like <button id="button" type="button" onClick={register}>Create Account</button>)

Answer 2

I figured it out for some reason I can't have the "name" tag in my input fields like it is below.

  <div className="textarea" id="password">
      <input 
        type="password" 
        onChange={(e) => {
            setPasswordReg(e.target.value);
        }}
        name="password" 
        id="authentactor-password" 
        placeholder="Password" 
        defaultValue="" 
        required 
      />
    </div>

<div id="button-wrapper">
    <button onClick={register} id="button">Create Account</button>
</div>

As soon as I removed the "name" tags I was able to POST my form to the backend and I only get a question mark in my url now instead of all the form data. To fix the question mark I had to set button type="button".

correct code below.

  <div className="textarea" id="password">
      <input 
        type="password" 
        onChange={(e) => {
            setPasswordReg(e.target.value);
        }} 
        id="authentactor-password" 
        placeholder="Password" 
        defaultValue="" 
        required 
      />
    </div>

<div id="button-wrapper">
    <button type="button" onClick={register} id="button">Create Account</button>
</div>