英文:
page refreshes instead of submitting form when submit button is clicked
问题
I am having an issue with my react.js / bootstrap app where my new users form is not submitting. I originally used e.preventDefault(), but this caused my form to not validate, so I removed it. Now, my form validates, however, when I click my submit button, the page refreshes and the form is not actually submitted. Any help would be SO appreciated!!
import React from 'react';
import { useState } from 'react';
import axios from '../../api/axios';
import Form from 'react-bootstrap/Form';
import UserList from './UserList';
function UserForm({ user, setUser }) {
const [errMsg, setErrMsg] = useState("");
const changeVal = async (key, value) => {
setUser(user => ({ ...user, [key]: value }));
}
/*Determines whether the user being created is an admin*/
let [isAdmin, setAdmin] = useState("true");
/*Determines whether the user being created is a driver*/
let [isDriver, setDriver] = useState("false");
const handleForm = async (e) => {
// e.preventDefault();
if (!user.employee_id) { //If the employee ID is blank, a new user is being added.
try {
const newUser = {
is_admin: isAdmin, is_driver: isDriver, employee_first_name: user.employee_first_name, employee_last_name: user.employee_last_name,
employee_username: user.employee_username, employee_contact_no: user.employee_contact_no,
employee_street_address: user.employee_street_address, employee_password: 'testing123', employee_city: user.employee_city, employee_state: user.employee_state, employee_zip_code: user.employee_zip_code,
employee_email: user.employee_email
};
let data = JSON.stringify(newUser);
console.log(data);
const response = await axios.post('/employee', data, {
headers: {
'Content-Type': 'application/json'
}
}
);
//fetchItem();
} catch (err) {
setErrMsg(JSON.stringify(err));
return;
}
} else {
try {
const newUser = {
employee_id: user.employee_id, is_admin: isAdmin, is_driver: isDriver, employee_first_name: user.employee_first_name, employee_last_name: user.employee_last_name,
employee_username: user.employee_username, employee_password: user.employee_password, employee_contact_no: user.employee_contact_no,
employee_street_address: user.employee_street_address,
employee_city: user.employee_city, employee_state: user.employee_state, employee_zip_code: user.employee_zip_code,
employee_email: user.employee_email
};
let data = JSON.stringify(newUser);
console.log(data);
const response = await axios.put('/employee', data, {
headers: {
'Content-Type': 'application/json'
}
}
);
//fetchItem();
} catch (err) {
setErrMsg(JSON.stringify(err));
return;
}
}
}
return (
<React.Fragment>
{!errMsg ? <>
<div className="form-container">
<div className='employee-id'>
<label htmlFor='ID'>EMPLOYEE #</label>
<input className="form-control" id="ID" readOnly value={user.employee_id}></input>
</div>
<form onSubmit={handleForm} className='employee-details' data-transport-order="form">
<div className='form-group'>
<label htmlFor='UserFName'>* FIRST NAME</label>
<input type="text" className="form-control" id="employee_first_name" required value={user.employee_first_name} onChange={(e) => changeVal(e.currentTarget.id, e.currentTarget.value)}></input>
<label htmlFor='UserLName'>* LAST NAME</label>
<input className="form-control" id="employee_last_name" required value={user.employee_last_name} onChange={(e) => changeVal(e.currentTarget.id, e.currentTarget.value)}></input>
<label htmlFor='Username'>* USERNAME</label>
<input className="form-control" id="employee_username" required value={user.employee_username} onChange={(e) => changeVal(e.currentTarget.id, e.currentTarget.value)}></input>
<label htmlFor='UserPassword'>PASSWORD</label>
<input className="form-control" id="UserPassword" readOnly></input>
<label htmlFor='UserContactNo'>* CONTACT #</label>
<input className="form-control" id="employee_contact_no" required value={user.employee_contact_no} onChange={(e) => changeVal(e.currentTarget.id, e.currentTarget.value)}></input>
<label htmlFor='UserAddress'>STREET ADDRESS</label>
<input className="form-control" id="employee_street_address" value={user.employee_street_address} onChange={(e) => changeVal(e.currentTarget.id, e.currentTarget.value)}></input>
<label htmlFor='UserCity'>CITY</label>
<input className="form-control" id="employee_city" value={user.employee_city} onChange={(e) => changeVal(e.currentTarget.id, e.currentTarget.value)}></input>
<label htmlFor='UserState'>STATE</label>
<input className="form-control" id="employee_state" value={user.employee_state} onChange={(e) => changeVal(e.currentTarget.id, e.currentTarget.value)}></input>
<label htmlFor='UserZip'>ZIP CODE</label>
<input className="form-control" id="employee_zip_code" value={user.employee_zip_code} onChange={(e) => changeVal(e.currentTarget.id, e.currentTarget.value)}></input>
<label htmlFor='UserEmail'>EMAIL</label>
<input type="email" placeholder="example@gmail/yahoo.com" pattern=".+@(gmail|yahoo)\.com" className="form-control" id="employee_email" value={user.employee_email} onChange={(e) => changeVal(e.currentTarget.id, e.currentTarget.value)}></input>
</div>
<div key={`default-checkbox`} className="mb-3" >
<Form.Check
type={'checkbox'}
onChange={() => {
if (isAdmin === "false" && isDriver === "true"){ //If the checkbox is already checked, user is Admin.
setDriver("false");
setAdmin("true");
}
else { //If the checkbox is already checked, user is Driver.
setDriver("true");
setAdmin("false");
}}
}
id={`default-checkbox`}
label={`Is Driver`}
/>
</div>
<button type="submit" className={"btn btn-primary"}>SAVE</button>
<button type="reset" className={"btn btn-primary"} onClick={() =>window.location.reload()}>BACK</button>
</form>
</div>
</> : <>
<h1>{errMsg}</h1>
</>}
</React.Fragment>
)
}
export default UserForm;
EDIT: With the comment suggestions, I changed the button's code to:
<button type="submit" className={"btn btn-primary"}>SAVE</button>
And the form's code to:
<form onSubmit={handleForm} className='employee-details' data-transport-order="form">
But the page is still refreshing 
Thank you for any help!!
英文:
I am having an issue with my react.js / bootstrap app where my new users form is not submitting. I originally used e.preventDefault(), but this caused my form to not validate, so I removed it. Now, my form validates, however, when I click my submit button, the page refreshes and the form is not actually submitted. Any help would be SO appreciated!!
import React from 'react';
import { useState } from 'react';
import axios from '../../api/axios';
import Form from 'react-bootstrap/Form';
import UserList from './UserList';
function UserForm({ user, setUser }) {
const [errMsg, setErrMsg] = useState("");
const changeVal = async (key, value) => {
setUser(user => ({ ...user, [key]: value }));
}
/*Determines whether the user being created is an admin*/
let [isAdmin, setAdmin] = useState("true");
/*Determines whether the user being created is a driver*/
let [isDriver, setDriver] = useState("false");
const handleForm = async (e) => {
// e.preventDefault();
if (!user.employee_id) { //If the employee ID is blank, a new user is being added.
try {
const newUser = {
is_admin: isAdmin, is_driver: isDriver, employee_first_name: user.employee_first_name, employee_last_name: user.employee_last_name,
employee_username: user.employee_username, employee_contact_no: user.employee_contact_no,
employee_street_address: user.employee_street_address, employee_password: 'testing123', employee_city: user.employee_city, employee_state: user.employee_state, employee_zip_code: user.employee_zip_code,
employee_email: user.employee_email
};
let data = JSON.stringify(newUser);
console.log(data);
const response = await axios.post('/employee', data, {
headers: {
'Content-Type': 'application/json'
}
}
);
//fetchItem();
} catch (err) {
setErrMsg(JSON.stringify(err));
return;
}
} else {
try {
const newUser = {
employee_id: user.employee_id, is_admin: isAdmin, is_driver: isDriver, employee_first_name: user.employee_first_name, employee_last_name: user.employee_last_name,
employee_username: user.employee_username, employee_password: user.employee_password, employee_contact_no: user.employee_contact_no,
employee_street_address: user.employee_street_address,
employee_city: user.employee_city, employee_state: user.employee_state, employee_zip_code: user.employee_zip_code,
employee_email: user.employee_email
};
let data = JSON.stringify(newUser);
console.log(data);
const response = await axios.put('/employee', data, {
headers: {
'Content-Type': 'application/json'
}
}
);
//fetchItem();
} catch (err) {
setErrMsg(JSON.stringify(err));
return;
}
}
}
return (
<React.Fragment>
{!errMsg ? <> {
<div className="form-container">
<div className='employee-id'>
<label htmlFor='ID'>EMPLOYEE #</label>
<input className="form-control" id="ID" readOnly value={user.employee_id}></input>
</div>
<form className='employee-details' data-transport-order="form">
<div className='form-group'>
<label htmlFor='UserFName'>* FIRST NAME</label>
<input type="text" className="form-control" id="employee_first_name" required value={user.employee_first_name} onChange={(e) => changeVal(e.currentTarget.id, e.currentTarget.value)}></input>
<label htmlFor='UserLName'>* LAST NAME</label>
<input className="form-control" id="employee_last_name" required value={user.employee_last_name} onChange={(e) => changeVal(e.currentTarget.id, e.currentTarget.value)}></input>
<label htmlFor='Username'>* USERNAME</label>
<input className="form-control" id="employee_username" required value={user.employee_username} onChange={(e) => changeVal(e.currentTarget.id, e.currentTarget.value)}></input>
<label htmlFor='UserPassword'>PASSWORD</label>
<input className="form-control" id="UserPassword" readOnly></input>
<label htmlFor='UserContactNo'>* CONTACT #</label>
<input className="form-control" id="employee_contact_no" required value={user.employee_contact_no} onChange={(e) => changeVal(e.currentTarget.id, e.currentTarget.value)}></input>
<label htmlFor='UserAddress'> STREET ADDRESS</label>
<input className="form-control" id="employee_street_address" value={user.employee_street_address} onChange={(e) => changeVal(e.currentTarget.id, e.currentTarget.value)}></input>
<label htmlFor='UserCity'> CITY</label>
<input className="form-control" id="employee_city" value={user.employee_city} onChange={(e) => changeVal(e.currentTarget.id, e.currentTarget.value)}></input>
<label htmlFor='UserState'>STATE</label>
<input className="form-control" id="employee_state" value={user.employee_state} onChange={(e) => changeVal(e.currentTarget.id, e.currentTarget.value)}></input>
<label htmlFor='UserZip'>ZIP CODE</label>
<input className="form-control" id="employee_zip_code" value={user.employee_zip_code} onChange={(e) => changeVal(e.currentTarget.id, e.currentTarget.value)}></input>
<label htmlFor='UserEmail'>EMAIL</label>
<input type="email" placeholder="example@gmail/yahoo.com" pattern=".+@(gmail|yahoo)\.com" className="form-control" id="employee_email" value={user.employee_email} onChange={(e) => changeVal(e.currentTarget.id, e.currentTarget.value)}></input>
</div>
{
<div key={`default-checkbox`} className="mb-3" >
<Form.Check
type={'checkbox'}
onChange={() => {
if (isAdmin === "false" && isDriver === "true"){ //If the checkbox is already checked, user is Admin.
setDriver("false");
setAdmin("true");
}
else { //If the checkbox is already checked, user is Driver.
setDriver("true");
setAdmin("false");
}}
}
id={`default-checkbox`}
label={`Is Driver`}
/>
</div>
}
<button type="save" className={"btn btn-primary"} onClick={(e) => handleForm(e)}>SAVE</button>
<button type="reset" className={"btn btn-primary"} onClick={() =>window.location.reload()}>BACK</button>
</form>
</div>
} </> : <>
<h1>{errMsg}</h1>
</>}
</React.Fragment>
)
}
export default UserForm;
EDIT: With the comment suggestions, I changed the button's code to:
<button type="submit" className={"btn btn-primary"}>SAVE</button>
And the form's code to:
<form onSubmit = {handleForm} className='employee-details' data-transport-order="form">
But the page is still refreshing
Thank you for any help!!
答案1
得分: 1
Sure, here are the translations for the code changes you provided:
change :
<form className='employee-details' data-transport-order="form">
to :
<form onSubmit={handleForm} className='employee-details' data-transport-order="form">
and change :
<button type="save" className={"btn btn-primary"} onClick={(e) => handleForm(e)}>SAVE</button>
to :
<button type="submit" className={"btn btn-primary"}>SAVE</button>
英文:
change :
<form className='employee-details' data-transport-order="form">
to :
<form onSubmit = {handleForm} className='employee-details' data-transport-order="form">
and change :
<button type="save" className={"btn btn-primary"} onClick={(e) => handleForm(e)}>SAVE</button>
to :
<button type="submit" className={"btn btn-primary"} >SAVE</button>
答案2
得分: 1
Sure, here's the translated code snippet:
将您的代码中以下部分更改为以下内容：
<form className='employee-details' onSubmit={handleForm} data-transport-order="form">
<button type="submit" className={"btn btn-primary"} >保存</button>
</form>
然后取消注释e.preventDefault()
英文:
Change following in your code to below
<form className='employee-details' onSubmit={handleForm} data-transport-order="form">
<button type="submit" className={"btn btn-primary"} >SAVE</button>
Then uncomment e.preventDefault()
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论