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.
Related
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>
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'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'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?