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

CodePudding user response：

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>)

CodePudding user response：

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>

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.

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>