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.
Related
I have a form which has a rich text editor and a form submit button, the rich text editor has style buttons which when clicked submit the form inputs (which is not desirable).
I want to prevent this behaviour I want the form to submit only when the submit button is clicked and not when the RTE style button is clicked.
Code:-
Form Code
I've moved the RichEditor out of the form.
You can still handle the form submit,
I've added the onClick listener on submit button itself.
Just copy and paste this return statement in your App.js
return (
<>
<div>
<form>
<label htmlFor="contact">
Full Name <span id="required-input-star">*</span>
</label>
<br />
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
required
/>
<br />
<label htmlFor="contact">
Email <span id="required-input-star">*</span>
</label>
<br />
<input
type="text"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
/>
<br />
<label htmlFor="description">
Description <span id="required-input-star">*</span>
</label>
<br />
</form> //closed the form here, and moved out RichEditor
<RichTextEditor />
<hr />
<div className="frm-btn-container">
<input type="submit" value="Cancel" id="cancel-btn" />
<input type="submit" value="Create" onClick={onSubmit} />
</div>
</div>
</>
);
};
Try disabling the button text editor's button.
I want us javascript to submit my html form.
I try two method.
The first one is good for me.
function formSubmit() {
document.getElementById("myForm").submit()
}
<form id="myForm" action="" method="get">
firstname：<input type="text" name="firstname" size="20"><br />
Last name：<input type="text" name="lastname" size="20"><br />
<br />
<input type="button" onclick="formSubmit()" value="submit" >
</form>
otherwise,the second one can not work for me
window.addEventListener("click", function(event){
event.preventDefault();
document.getElementById("myForm2").submit() }
)
});
<form id="myForm2" action="" method="get">
firstname：<input type="text" name="firstname" size="20"><br />
Last name：<input type="text" name="lastname" size="20"><br />
<br />
<input type="button" value="submit" >
</form>
All i want to do is to use addeventlistner method to submit form
Here is a way to do it.
function formSubmit() {
document.getElementById("myForm").submit()
}
document.getElementById("submitBtn").addEventListener("click", function(event) {
event.preventDefault()
document.getElementById("myForm").submit()
})
<form id="myForm" action="https://google.com" method="get">
First name:
<input type="text" name="firstname" size="20">
<br /> Last name：
<input type="text" name="lastname" size="20"><br />
<br />
<button id="submitBtn" type="button" onclick="formSubmit()">Submit</button>
</form>
You can use input type like this
<form id="myForm2" action="" method="get">
firstname：<input type="text" name="firstname" size="20"><br />
Last name：<input type="text" name="lastname" size="20"><br />
<br />
<input type="submit" value="submit" >
</form>
and submit event for related form
document.getElementById("myForm2").addEventListener("submit", function() {
console.log("submitted")
})
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();
The Button
(this submit button is not working, and if i delete the onClick, the submit works. how can i make both, the onClick and the Submit to work.)
<input
type="submit"
value="Make the purchase"
onClick={nextStep}
/>
The whole Form
<form id="my-form" className="contact-form" onSubmit={sendEmail}>
<input type="hidden" name="name" value={shippingData.firstName} />
<br />
<input type="hidden" name="name" value={shippingData.lastName} />
<br />
<input type="hidden" name="name" value={shippingData.email} />
<br />
<input type="hidden" name="name" value={shippingData.address1} />
<br />
<input type="hidden" name="name" value={shippingData.zip} />
<br />
<input type="hidden" name="name" value={myJSON}></input>
<div>
<input
type="submit"
value="Make the purchase"
onClick={nextStep}
/>
</div>
</form>
The problem here is, your input button element has type submit. So when you click on it, onSubmit handler gets called. So if you need to do multiple things, you need multiple buttons, or do everything inside onSubmit
Option 1
Have 2 buttons:
<input
type="submit"
value="Make the purchase"/>
<input
type="button"
value="Go to next step"
onClick={nextStep} />
Option 2
<form id="my-form" className="contact-form" onSubmit={handleSubmit}>
const handleSubmit = () => {
nextStep()
sendEmail()
}
Which function, submit or onClick will run first? Or will they run simultaneously?
In my program onClick function runs first and then onSubmit. But why and is it always like that?
<Form onSubmit={handleSubmit}>
<Form.Field>
<label>Enter new password:</label>
<input
type="text"
name= 'newPassword'
onChange={handleOnChange}
placeholder='New Password'
required
/>
</Form.Field>
<Button type='submit' onClick={handleClick}>Submit</Button>
</Form>
If you are using formik you can pass handleSubmit to your button onClick and use your code and logics in the callback onSubmit
<Form onSubmit={(values) => yourHandleSubmitMethod(values)}>
<Form.Field>
<label>Enter new password:</label>
<input
type="text"
name= 'newPassword'
onChange={handleOnChange}
placeholder='New Password'
required
/>
</Form.Field>
<Button type='submit' onClick={handleSubmit}>Submit</Button>
</Form>