When i try to login, google chrome auto suggestions pops up and hides before i can click one of the previously used emails from the dropdown.
enter image description here
I suspected there might be a css class affecting it but that didnt seem to be the case.
Is there any way to force the autosuggestions dropdown to stay on focus of the input field?
Code:
<label htmlFor="email">Email Address</label>
<input
data-testid="email"
id="email"
name="email"
onChange={(e) => handleForm(e)}
placeholder="Enter your email address"
required
type="email"
value={data.email}
/>
<label htmlFor="password">Enter your password</label>
<input
autoComplete="on"
data-testid="password"
id="password"
name="password"
onChange={(e) => handleForm(e)}
placeholder="Enter your password"
required
type={show ? "test" : "password"}
value={data.password}
/>
<Icon
className={styles.viewPassword}
name="viewPassword"
onClick={handlePassWord}
/>
<div>
{success && <SuccessMessage />}
{error && <ErrorMessage />}
</div>
<Button
className={styles.btnClass}
loading={loading}
type={"submit"}
wrapperClass={styles.btn}
>
Login
</Button>
</form>
Related
so i have a form for registering user
so when page loaded firefox automatically set values for inputs from saved logins
what can I do to prevent that?
this is a part of codes
<div className="input-group mb-3">
<input
id="nameInput"
ref={nameRef}
type="text"
className="form-control"
placeholder="نام و نام خانوادگی"
onChange={nameChangeHandler}
/>
</div>
You can add the attribute autocomplete="off" to your form. However, different browsers may handle this differently.
<form action="/login" autocomplete="off" >
<input type="text" id="username" name="username" /><br />
<input type="text" id="password" name="password" /><br />
<input type="submit" value="Submit" />
</form>
To disable the autocomplete for input fields, we need to set its autoComplete attribute to off.
<input
autoComplete="off"
id="nameInput"
ref={nameRef}
type="text"
className="form-control"
placeholder="نام و نام خانوادگی"
onChange={nameChangeHandler}
/>
here I have a contact form and i want all the values of form should be empty after submitting the form.
I have written following code.but this is not working after submitting the values of form remains same.
what is the problem here and how to solve it.
export default function contact() {
const[name,setName]=useState("")
const[phone,setPhone]=useState("")
const[email,setEmail]=useState("")
const[query,setQuery]=useState("")
const [submitted, setSubmitted] = useState(false)
const handleSubmit=(e)=>{
e.preventDefault()
console.log(e);
let data = {
name,
email,
phone,
query
}
console.log(data);
axios.post('http://127.0.0.1:8000/api/create/',data).then((res)=>{
console.log(res);
setSubmitted(true)
setName('')
setPhone('')
setEmail('')
setQuery('')
})
}
return (
<>
<div>
<h1>Contact Page</h1>
</div>
<div >
<form action="contact" method="post">
<input name="name" onChange={(e)=>{setName(e.target.value)}} placeholder="Name" / ><br />
<input name="phone" onChange={(e)=>{setPhone(e.target.value)}} placeholder="Phone" /><br />
<input name="email" onChange={(e)=>{setEmail(e.target.value)}} type="email" placeholder="E-mail" / ><br />
<textarea name="text" onChange={(e)=>{setQuery(e.target.value)}} placeholder="How can we help you?" ></textarea><br />
<button onClick={(e)=>{handleSubmit(e)}} value="Send" >Submit </button>
</form>
</div>
</>
)
}
Currently you are missing value prop in your inputs so your inputs are uncontrolled components that's why you are not able to clear them after form submit.
Try to add value prop like below:-
<input name="name" value={name} onChange={(e)=>{setName(e.target.value)}} placeholder="Name" / ><br />
<input name="phone" value={phone} onChange={(e)=>{setPhone(e.target.value)}} placeholder="Phone" /><br />
<input name="email" value={email} onChange={(e)=>{setEmail(e.target.value)}} type="email" placeholder="E-mail" / ><br />
<textarea name="text" value={query} onChange={(e)=>{setQuery(e.target.value)}} placeholder="How can we help you?" ></textarea><br />
Add value prop your inputs then your form shall be cleared after submit:
<form>
<input name="name" value={name} onChange={(e)=>{setName(e.target.value)}} placeholder="Name" / ><br />
<input name="phone" value={phone} onChange={(e)=>{setPhone(e.target.value)}} placeholder="Phone" /><br />
<input name="email" value={email} onChange={(e)=>{setEmail(e.target.value)}} type="email" placeholder="E-mail" / ><br />
<textarea name="text" value={query} onChange={(e)=>{setQuery(e.target.value)}} placeholder="How can we help you?" ></textarea><br />
</form>
First, make sure that your api-call ends successfully, according your code, you clean form only when request passed successfully :)
I think a better way to do this is to rest the form using the .reset() method.
Like this:
document.getElementById("postCodeForm").reset();
I want to show form when click on radio button using redux-from, here is i following tutorial link, (implements using checkbox)
selectingformvalues but i cant implement it on radio button,
i have 2 radio button
radio button x click, shows a form
radio button y click, shows b form and hide a form
<label htmlFor="hasEmail">percentage</label>
<div>
<Field
name="taxtype"
component="input"
type="radio"
value="percentage"
/>
</div>
</div>
<div>
<label htmlFor="hasEmail">usd</label>
<div>
<Field
name="taxtype"
component="input"
type="radio"
value="usd"
/>
</div>
</div>
{usd && (
<div>
<label>Email</label>
<div>
<Field
name="email"
component="input"
type="email"
placeholder="Email"
/>
</div>
</div>
)}
{percentage && (
<div>
<label>Email 2</label>
<div>
<Field
name="email"
component="input"
type="email"
placeholder="Email"
/>
</div>
</div>
)}
const percentage = selector(state, 'percentage')
const usd = selector(state, 'usd')
Here is the example you referred you rewritten to include two radios
https://codesandbox.io/s/koz449qo6o
I do not want to submit form clicking on submit. So i am using :
onSubmit (e) {
e.preventDefault();
console.log(this.state);
}
<form className="loginform">
<h1 className="logo"><img src={images.Logo} /></h1>
<input
className="login"
placeholder="Username"
type="text"
required="true"
onBlur={(e) => { this.userName(e); }}
/>
<input className="login" placeholder="Password" type="password" required="true" />
<input
className="submit"
onClick={(e) => { this.onSubmit(e); }}
type="submit"
value="Submit"
/>
</form>
Doing so form validation is not working. I want to use default form validation with preventDefault.
You should use onsubmit form event:
<form className="loginform" onSubmit={this.onSubmit.bind(this)}>
<h1 className="logo"><img src={images.Logo} /></h1>
<input
className="login"
placeholder="Username"
type="text"
required="true"
onBlur={(e) => { this.userName(e); }}
/>
<input className="login" placeholder="Password" type="password" required="true" />
<input
className="submit"
type="submit"
value="Submit"
/>
</form>
In general you should avoid handling form submission via button onclick events, additional benefit of onsubmit is that it will also be fired on ENTER key submission.
I am pretty sure that there is a way to do this with onChange, but in the example: http://redux-form.com/6.0.0-alpha.4/examples/simple/ here provided by redux form when you click the drop down and hit a value it automatically submits the value without having to hit submit.
I copied the exact code and everything works except for the fact that I have to choose all the values I want then hit submit. How do we make it to where we can just start typing in a field or select a value and it automatically get submitted as they have.
I will put the code below incase you do not want to visit the link.
import React from 'react'
import { Field, reduxForm } from 'redux-form'
const { DOM: { input, select, textarea } } = React
const SimpleForm = (props) => {
const { handleSubmit, pristine, reset, submitting } = props
return (
<form onSubmit={handleSubmit}>
<div>
<label>First Name</label>
<div>
<Field name="firstName" component={input} type="text" placeholder="First Name"/>
</div>
</div>
<div>
<label>Last Name</label>
<div>
<Field name="lastName" component={input} type="text" placeholder="Last Name"/>
</div>
</div>
<div>
<label>Email</label>
<div>
<Field name="email" component={input} type="email" placeholder="Email"/>
</div>
</div>
<div>
<label>Sex</label>
<div>
<label><Field name="sex" component={input} type="radio" value="male"/> Male</label>
<label><Field name="sex" component={input} type="radio" value="female"/> Female</label>
</div>
</div>
<div>
<label>Favorite Color</label>
<div>
<Field name="favoriteColor" component={select}>
<option></option>
<option value="ff0000">Red</option>
<option value="00ff00">Green</option>
<option value="0000ff">Blue</option>
</Field>
</div>
</div>
<div>
<label htmlFor="employed">Employed</label>
<div>
<Field name="employed" id="employed" component={input} type="checkbox"/>
</div>
</div>
<div>
<label>Notes</label>
<div>
<Field name="notes" component={textarea}/>
</div>
</div>
<div>
<button type="submit" disabled={pristine || submitting}>Submit</button>
<button type="button" disabled={pristine || submitting} onClick={reset}>Clear Values</button>
</div>
</form>
)
}
export default reduxForm({
form: 'simple' // a unique identifier for this form
})(SimpleForm)