I'm making a form which accepts some details & can only be accessed when you are logged in.
Here is a video to the problem i have faced. Please help me where i am going wrong. The form works perfectly for mobile view but not for normal web view. I think so there is something wrong with the my state management.
https://drive.google.com/file/d/1YAEPXTe8dZdR0xcKFhSDPqDLIkLDVQTt/view?usp=share_link
<form className='login-form addAdmin'>
<h1>Add Health Partner</h1>
<input
type="text"
placeholder="Full Name"
onChange={e => setName(e.target.value)}
required
/>
<input
type="email"
placeholder="Email"
onChange={e => setEmail(e.target.value)}
required
/>
<input
type="number"
placeholder="Mobile number"
onChange={e => setNumber(e.target.value)}
required
/>
<input
type="password"
placeholder="Password"
onChange={e => setPassword(e.target.value)}
required
/>
<input
type="text"
placeholder="Address"
onChange={e => setAddress(e.target.value)}
required
/>
<input
type="text"
placeholder="Specialization"
onChange={e => setSpecialization(e.target.value)}
required
/>
<input
type="text"
placeholder="Experience"
onChange={e => setExperience(e.target.value)}
required
/>
<button type='submit' onClick={e=>handleSubmit(e)}>
Add
</button>
</form>
Related
Using create react app with react hook form and reactstrap. It throws the above error. got few answers like it is because of the missing name attribute in the controller. I am not using a controller. It occurs only after taking a build.
Below you could find the full code.
const { register, handleSubmit, errors } = useForm({
mode: "onSubmit",
reValidateMode: "onBlur",
});
<Form className="Login" onSubmit={handleSubmit(submitHandler)}>
<h1 className="mb-4">Log in</h1>
<FormGroup className={errors.email ? "mb-2" : "mb-4"}>
<Label for="email" hidden>
Email
</Label>
<Input
type="text"
data-test="component-field"
name="email"
innerRef={register({ required: true })}
id="email"
placeholder="Email"
defaultValue={email}
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
{errors.email && (
<span className="text-danger mb-1 p-1">This field is required</span>
)}
</FormGroup>{" "}
<FormGroup className={errors.password ? "mb-2" : "mb-4"}>
<Label for="password" hidden>
Password
</Label>
<Input
type="password"
data-test="component-field"
name="password"
innerRef={register({ required: true })}
defaultValue={password}
id="password"
placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
ref={register({ required: true })}
/>
{errors.password && (
<span className="text-danger mb-1 p-1">This field is required</span>
)}
</FormGroup>{" "}
<Button size="sm" className="wb-primary-button font-weight-bold">
Login
`</Button>`
got an answer from GitHub discussion from its author. since I used reactstrap library, I should use innerRef instead of ref that throws an error. In second Input element removed ref then it worked fine.
I am a beginner in React JS, I created a login form and after click on login button then username and password is showing in the URL. I don't want to show this in URL. How to solve this?
Here is my code:
<form className="loginform" onSubmit={this.ValidateUser}>
<input
className="form-control"
type="text"
placeholder="Email"
name="email"
autocomplete="off"
value={this.state.email}
onChange={(e) => this.changeEmailHandler(e.target.value)}
/>
<input
className="form-control"
type="password"
placeholder="Password"
name="password"
value={this.state.password}
onChange={(e) => this.changePasswordHandler(e.target.value)}
/>
<input
type="submit"
id="kt_login_signin_submit"
className="btn btn-brand"
value="Sign In"
/>
</form>
Adding e.preventDefault() in ValidateUser method should do the trick.
Edit-01:
already pointed out in the comments.
i have a problem with how to put date that i get from json data into date input, like i said i want to put it into input type date but the problem is when i console.log the date, its came out but its not cameout into field and still dd/mm/yyyy
mydate
{
this.state.post2.map((h, i) => {
if (
`${h.username}` ===
`${this.state.formData.username}`
) {
return (
<FormGroup>
<FormGroup>
<Label htmlFor="middleName">
Middle Name
</Label>
<Input
onChange={this.handleForm}
key={i}
defaultValue={h.middleName}
type="text"
name="middleName"
className="form-control"
placeholder="Middle Name"
required=""
/>
</FormGroup>
<FormGroup>
<Label htmlFor="lastName">Last Name</Label>
<Input
onChange={this.handleForm}
key={i}
defaultValue={h.lastName}
type="text"
name="lastName"
className="form-control"
placeholder="Last Name"
required=""
/>
</FormGroup>
<FormGroup>
<Label htmlFor="email">Email</Label>
<Input
onChange={this.handleForm}
key={i}
defaultValue={h.email}
type="text"
name="email"
className="form-control"
placeholder="Email"
required=""
/>
</FormGroup>
<FormGroup>
<Label htmlFor="phone">Phone Number</Label>
<Input
onChange={this.handleForm}
value={h.phone}
type="text"
name="phone"
className="form-control"
placeholder="Phone Number"
required=""
/>
</FormGroup>
<FormGroup>
<Label for="expiredDate">
Expired Date
</Label>
<Input
type="date"
name="expiredDate"
onChange={this.handleForm}
defaultValue={new Date(h.expiredDate)}
placeholder="date placeholder"
min={moment().format('YYYY-MM-DD')}
/>
</FormGroup>
</FormGroup>
);
}
});
}
response in console.log
25-01-2021 07:00:00
i already try to console.log and it appear but not appear on field and still dd/mm/yyyy
how to change dd/mm/yyyy into date that i get ?
What about this defaultValue={moment(new Date(h.expiredDate)).format('YYYY-MM-DD')}
not sure about moment parameters.Need to check.
I'm converting a project to use Semantic-UI-React and a form is triggering on every change. The old form looked like this and worked as intended:
<div className="entryForm">
<form onSubmit={this.handleSubmit}>
<span className="formLabel">Location:</span>
<input type='text' name="location" placeholder="Location"
onChange={this.handleChange} autoComplete="off" /><br/>
Date Activity:
<input type='text' name="activity" placeholder="Activity"
onChange={this.handleChange} autoComplete="off"/><br/>
Cuisine:
<input type='text' name="cuisine" placeholder="Cuisine"
onChange={this.handleChange} autoComplete="off"/>
<button type="submit" value="submit" hidden="hidden"/>
</form></div>
The Semantic form looks like this and displays both SUBMIT and HELP on every change in the form:
<Form onSubmit={console.log("SUBMIT")}
onChange={console.log("HELP")}>
<Form.Field inline>
<label>Location:</label>
<Input name='location'
placeholder='Enter a neighborhood here'
onChange={this.handleChange}
autoComplete="off"/>
</Form.Field>
<Form.Field inline>
<label>Activity:</label>
<Input name='activity'
placeholder='Enter a a fun activity'
onChange={this.handleChange}
autoComplete="off"/>
</Form.Field>
<Form.Field inline>
<label>Cuisine:</label>
<Input name='cuisine'
placeholder='What do you want to eat'
onChange={this.handleChange}
autoComplete="off"/>
</Form.Field>
</Form>
What's going on?
onSubmit={(() => console.log("SUBMIT"))}
That fixed it as well as adding a submit button got it working
I recently created a Netlify application, with Gatsby JS and a Netlify form. I have the following as my form field:
<form
action="#"
method="post"
name="contact"
className="footer-form"
data-netlify="true">
<input
id="name"
type="text"
name="name"
placeholder="Name"
value={this.state.name}
className="footer-form__input"
onChange={e => this.setState({ name: e.target.value })}
/>
<input
id="email"
name="name"
type="email"
className="footer-form__input"
value={this.state.email}
onChange={e => this.setState({ email: e.target.value })}
placeholder="Email address"
/>
<textarea
id="message"
name="message"
className="footer-form__input footer-form__textarea"
value={this.state.message}
onChange={e => this.setState({ message: e.target.value })}
placeholder="Your message"
/>
<button type="submit" className="footer-form__button">
Submit
</button>
</form>
In development, the email field shows as planned. But in production, specifically on the netlify system, only the name and the message field shows.
Form submission works fine in production by the way, showing only the "name" and the "message" inside the Netlify dashboard.
Could there be a reason why this is happening?
The first 2 of your inputs have the same name:
<input
id="name"
type="text"
name="name"
...
/>
<input
id="email"
name="name"
type="email"
...
/>
Netlify may rely on the field name to differ between different inputs. Would you try fixing that and see if the problem still occurs?