I am getting an error in my code of handleSubmit function because ,here I am using this syntax 'export const Register = ()',so what needs to be fixed in my code so that I;m able to use the handleSubmit function I'll paste the code down below it keeps saying its not defined ive tried adding function handleSubmit() and const handleSubmit = () but its still not working any help on how to resolve this error please as i've tried for hours now i'm new to react and wondering as how i would be able to resolve this error
export const Register = () => {
handleSubmit = e => {
e.preventDefault();
console.log('works!');
};
return (
<form onSubmit={this.handleSubmit} >
<h3>Sign Up</h3>
<div className="form-group">
<label> First Name</label>
<input type="text" className="form-control" placeholder="First Name" />
</div>
<div className="form-group">
<label> Last Name</label>
<input type="text" className="form-control" placeholder="Last Name" />
</div>
<div className="form-group">
<label> Email</label>
<input type="email" className="form-control" placeholder="Email" />
</div>
<div className="form-group">
<label> Password</label>
<input type="password" className="form-control" placeholder="Password" />
</div>`
<div className="form-group">
<label> Confirm Password</label>
<input type="password" className="form-control" placeholder="Confirm Password" />
</div>`
<button className="btn btn-primary btn-block" > Sign Up</button>
</form >
);
}
export default Register;
When using the arrow function syntax, the function has to be declared with const. Make it like this:
const handleSubmit = e => {
e.preventDefault();
console.log('works!');
};
Also, you only need to export the Register component once. Using export default Register at the end is sufficient.
And we don't use this in a function component, it is just hadleSubmit:
<form onSubmit={handleSubmit} >
<h3>Sign Up</h3>
<div className="form-group">
<label> First Name</label>
<input type="text" className="form-control" placeholder="First Name" />
</div>
<div className="form-group">
<label> Last Name</label>
<input type="text" className="form-control" placeholder="Last Name" />
</div>
<div className="form-group">
<label> Email</label>
<input type="email" className="form-control" placeholder="Email" />
</div>
<div className="form-group">
<label> Password</label>
<input type="password" className="form-control" placeholder="Password" />
</div>`
<div className="form-group">
<label> Confirm Password</label>
<input type="password" className="form-control" placeholder="Confirm Password" />
</div>`
<button className="btn btn-primary btn-block" > Sign Up</button>
</form >
Related
I have a react app that has a couple of inputs. The problem is, whenever I navigate to the page, it auto-fills all the fields with previously entered data on Microsoft Edge (The new one). I use Materialize for my styling. I implement my form like so:
<form onSubmit={this.handleSubmit} autoComplete='off' className="login-form">
<div className="input-field">
<input
placeholder='Type email here'
id="email"
type="email"
required
className="validate contact-input"
onChange={this.handleChange}/>
<label
className="active"
htmlFor="email">Email</label>
</div>
<div className="input-field">
<input
placeholder='Type password here'
id="password"
type="password"
required
className="validate contact-input"
onChange={this.handleChange}/>
<label
className="active"
htmlFor="password">Password</label>
</div>
<div className="input-field col s6">
<button className="btn z-depth-2 login-btn">
Sign In
</button>
</div>
</form>
Some solutions I have tried that do not work include:
<form autoComplete="off">
...
</form>
<form autoComplete="new-password">
...
</form>
<input autoComplete="off" />
<input autoComplete="new-password" />
<input autoComplete="none" />
Anyone know how to fix this?
Try this :
<input type="text" autocomplete="off" list="autocompleteOff"
id="fieldId" name="fieldname" placeholder="Placeholder here" />
Answer from here : Disable input text suggestions in Edge?
I'm creating a signup model form with a react-responsive-modal library. I wrote my Modal like this
<Modal open={this.state.openCreateAlbum} onClose={this.onCloseModalCreate}>
<div className="modal-body">
<h2>Get Started Absolutely<span> Free!</span></h2>
<span className="subtitle">No credit card needed</span>
<form className="contact-form form-validate3" novalidate="novalidate">
<div className="form-group">
<input type="text" name="name" id="name" placeholder="First Name" required="" autocomplete="off" aria-required="true" />
</div>
<div className="form-group">
<input className="form-control" type="email" name="email" placeholder="E-mail" required="" autocomplete="off" aria-required="true" />
</div>
<div className="form-group">
<input type="password" name="pass" className="form-control" placeholder="Password" required="" autocomplete="off" aria-required="true" />
</div>
<input className="btn btn-md btn-primary btn-center" id="sign_up" type="button" value="Sign Up" />
</form>
</div>
</Modal>
Notice that for First Name field I'm not using className=form-control and for other fields, I'm using that className.
The problem I got is when I run that. I cannot enter text to email and password field but it's fine with the first name field. I don't know why and how to fix that. I followed a tutor video and he didn't have that issue. Here is the link to the video https://www.youtube.com/watch?v=YLQXEHDXnlU
Ps: Im using this library for Modal component https://www.npmjs.com/package/react-responsive-modal
I have an react js form.I would like to know how to enable/disable all form input control based on condition.please check my below code and advise how to do this...
return (
<form id ="frm" onSubmit={this.onSubmitHandler}>
<div className="animated fadeIn">
<div className="form-group row">
<Button type="button" text="Back" size="sm" onClick={this.onBackButtonClick} color="danger" className="pull-right ml-1 "><i className="fa fa-ban"></i> Back</Button>
<Button type="submit" size="sm" color="success" className="pull-right ml-1 "><i className="fa fa-dot-circle-o"></i> Save</Button>
<label className="col-sm-1 col-form-label col-form-label-sm">First Name</label>
<div className="col-sm-3">
<input type="text" name="FirstName" className="form-control form-control-sm" id="TxtFirstName" placeholder="First Name" value={this.state.FirstName} required onChange={this.onChangeHandler}/>
</div>
<label className="col-sm-1 col-form-label col-form-label-sm">Last Name</label>
<div className="col-sm-3">
<input type="text" name="LastName" className="form-control form-control-sm" id="TxtLastName" placeholder="Last Name" value={this.state.LastName} required onChange={this.onChangeHandler}/>
</div>
<label className="col-sm-1 col-form-label col-form-label-sm">Email Id</label>
<div className="col-sm-3">
<input type="email" name ="EmailId" className="form-control form-control-sm" id="TxtEmailId" placeholder="EmailId" value={this.state.EmailId} required onChange={this.onChangeHandler}/>
</div>
</div>
<div className="form-group row">
<label className="col-sm-1 col-form-label col-form-label-sm">Mobile No</label>
<div className="col-sm-3">
<input type="text" name ="MobileNo" className="form-control form-control-sm" id="TxtMobileNo" placeholder="Mobile No" value={this.state.MobileNo} onChange={this.onChangeHandler} />
</div>
<label className="col-sm-1 col-form-label col-form-label-sm">Division</label>
<div className="col-sm-3">
<select name ="DivisionId" className="form-control" required value={this.state.DivisionId} onChange={this.onChangeHandler}>
{DivisionList}
</select>
</div>
/div>
</form>
);
ComponentDidMount Event to check condition :-
componentDidMount() {
if (this.props.match.params.mode=="Edit"){
// enable form control
}
else
{
// disable form control
}
create a state isFormDisabled for ex.
use html fieldset inside the form and use disabled property and provide the value of isFormDisabled
use your logic to enable/disable based on your needs
Code Sample
...
state = {
isFormDisabled: false
}
componentDidMount(){
if (this.props.match.params.mode == "Edit") {
this.setState({isFormDisabled: false})
}
else {
this.setState({isFormDisabled: true})
}
}
...
//inside render fun...
return (
<form id ="frm" onSubmit={this.onSubmitHandler}>
<fieldset disabled={isFormDisabled}>
<div className="animated fadeIn">
<div className="form-group row">
<label className="col-sm-1 col-form-label col-form-label-sm">First Name</label>
<div className="col-sm-3">
<input type="text" name="FirstName" className="form-control form-control-sm" id="TxtFirstName" placeholder="First Name" value={this.state.FirstName} required onChange={this.onChangeHandler}/>
</div>
...
</fieldset>
...
I am creating a signup form that will render differently depending on whether the person signing up chooses Post a project or Work on a project from the very first div in the form.
How can I render each div that follows in the form-group conditionally based on what is selected in the first div? I am using hooks and I have found that most examples are for the extends Component approach.
My form:
const signUpForm = () => (
<form onSubmit={clickSubmit}>
<div className="form-group">
<select onChange={handleChange("role")} class="form-control">
<option selected>I want to...</option>
<option>Post a project</option>
<option>Work on a project</option>
</select>
</div>
<div className="form-group">
<input
onChange={handleChange("name")}
type="text"
placeholder="Name"
className="form-control"
value={name}
/>
</div>
<div className="form-group">
<input
onChange={handleChange("email")}
type="email"
placeholder="Email"
className="form-control"
value={email}
/>
</div>
<div className="form-group">
<input
onChange={handleChange("password")}
type="password"
placeholder="Password"
className="form-control"
value={password}
/>
</div>
<div className="form-group">
<input
onChange={handleChange("studying")}
type="text"
placeholder="I'm studying..."
className="form-control"
value={studying}
/>
</div>
<div>
<div>{createInputs()}</div>
<button
className="btn btn-outline-primary btn-sm mb-3"
onClick={addSkill}
type="text"
>
Add more skills
</button>
</div>
<button onClick={clickSubmit} className="btn btn-primary" type="submit">
Sign Up
</button>
</form>
);
State:
const Signup = () => {
const [values, setValues] = useState({
name: "",
email: "",
password: "",
studying: "",
skills: [""],
error: "",
success: "",
role: ""
});
const { name, email, password, studying, skills, success, error, role } = values;
handleChange():
const handleChange = name => event => {
setValues({ ...values, error: false, [name]: event.target.value });
};
You should first divide the signUp in two parts and then call second function based on value of "role" from state.
The idea is to return the divs from second function based on state of first input.
const signUpForm = () => (
<form onSubmit={clickSubmit}>
<div className="form-group">
<select onChange={handleChange("role")} class="form-control">
<option selected>I want to...</option>
<option>Post a project</option>
<option>Work on a project</option>
</select>
</div>
{this.renderInput()}
<button onClick={clickSubmit} className="btn btn-primary" type="submit">
Sign Up
</button>
</form>
);
renderInput() {
if (values.role === "post") {
return (
<div className="form-group">
<input onChange={handleChange("name")} type="text" placeholder="Name" className="form-control" value={name} />
</div>
<div className="form-group">
<input onChange={handleChange("email")} type="email" placeholder="Email" className="form-control" value={email} />
</div>
<div className="form-group">
<input onChange={handleChange("password")} type="password" placeholder="Password" className="form-control" value={password} />
</div>
<div className="form-group">
<input onChange={handleChange("studying")} type="text" placeholder="I'm studying..." className="form-control" value={studying} />
</div>
<div>
<div>{createInputs()}</div>
<button className="btn btn-outline-primary btn-sm mb-3" onClick={addSkill} type="text">
Add more skills
</button>
</div>
);
}
}
You want to test the role state value is truthy/falsey and render the rest of your form on that value.
const SignUpForm = () => (
<form onSubmit={clickSubmit}>
<div className="form-group">
<select
defaultValue='unselected' // set default value here
onChange={handleChange("role")}
className="form-control" // fix className here, class alone isn't correct in react
>
<option value='unselected'>I want to...</option>
<option value='post'>Post a project</option>
<option value='work'>Work on a project</option>
</select>
</div>
{!!role && (
<Fragment>
<div className="form-group">
<input
onChange={handleChange("name")}
type="text"
placeholder="Name"
className="form-control"
value={name}
/>
</div>
<div className="form-group">
<input
onChange={handleChange("email")}
type="email"
placeholder="Email"
className="form-control"
value={email}
/>
</div>
<div className="form-group">
<input
onChange={handleChange("password")}
type="password"
placeholder="Password"
className="form-control"
value={password}
/>
</div>
<div className="form-group">
<input
onChange={handleChange("studying")}
type="text"
placeholder="I'm studying..."
className="form-control"
value={studying}
/>
</div>
<div>
<div>{createInputs()}</div>
<button
className="btn btn-outline-primary btn-sm mb-3"
onClick={addSkill}
type="text"
>
Add more skills
</button>
</div>
</Fragment>
)}
<button onClick={clickSubmit} className="btn btn-primary" type="submit">
Sign Up
</button>
</form>
);
I have problem with assign from array to model. I want to assign firstName value from userFromDb and assign this value to firstName in model and the same with another values. I don't know how do this :(
User
export interface User{
id:string;
firstName:string;
lastName:string;
email:string;
password:string;
}
UpadateUserComponent.ts
userFromDb: Array<Object>;
model:User = {
id: '',
firstName: '',
lastName: '',
email: '',
password: ''}
ngOnInit() {
let id = this.route.snapshot.paramMap.get('id');
this.userService.getUser(id).subscribe(result => {
console.log(result)
this.userFromDb = result
console.log(this.userFromDb)
});
UpadateUserComponent.html
<div>
<form action="" #f="ngForm" (ngSubmit)="saveUser()" novalidate>
<div>
<label for="firstName">First Name: </label>
<input [(ngModel)]="model.firstName" type="text" id="firstName" name="firstName" placeholder="Name">
</div>
<div>
<label for="lastName">Last Name: </label>
<input [(ngModel)]="model.lastName" type="text" id="lastName" name="lastName" placeholder="Name" >
</div>
<div>
<label for="email">Email: </label>
<input [(ngModel)]="model.email" type="text" id="email" name="email" placeholder="Name" >
</div>
<div>
<label for="password">Password: </label>
<input [(ngModel)]="model.password" type="text" id="password" name="password" placeholder="Name" >
</div>
<button type="submit">Submit</button>
</form>
</div>
I do not know what your database structure looks like, but lets say it is the same as your frontend...
First I am not sure why your userFromDb is an array, would it return more than one user?
If you just want to insert the values then the simplest would be:
this.userService.getUser(id).subscribe(result => {
console.log(result)
this.userFromDb = result
this.model.firstName = this.userFromDB[0].firstName
// same with other values here
console.log(this.userFromDb)
});
this.userService.getUser(id).subscribe(result => {
console.log(result);
this.userFromDb:User = result[0];
console.log(this.userFromDb);
});
HTML
<div>
<form action="" #f="ngForm" (ngSubmit)="saveUser()" novalidate>
<div>
<label for="firstName">First Name: </label>
<input [(ngModel)]="userFromDb.firstName" type="text" id="firstName" name="firstName" placeholder="Name">
</div>
<div>
<label for="lastName">Last Name: </label>
<input [(ngModel)]="model.lastName" type="text" id="lastName" name="lastName" placeholder="Name" >
</div>
<div>
<label for="email">Email: </label>
<input [(ngModel)]="userFromDb.email" type="text" id="email" name="email" placeholder="Name" >
</div>
<div>
<label for="password">Password: </label>
<input [(ngModel)]="userFromDb.password" type="text" id="password" name="password" placeholder="Name" >
</div>
<button type="submit">Submit</button>
</form>
</div>