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>
Related
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()
}
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 developing Universal windows 8.1 app and I have a page for creating new contact.
In purpose to validate input fields I put them in form. My form action not supposed to go to service it just need to validate fields and call custom function.
HTML:
<form name="myform" onSubmit="JavaScript:OnSubmitForm()">
<div>
<label>
First name<br />
<input id="contactFirstName" class="win-textbox" type="text" name="firstName" required />
</label>
</div>
<div>
<label>
Last name<br />
<input id="contactLastName" class="win-textbox" type="text" name="lastName" />
</label>
</div>
<input type="submit" value="Submit"/>
<input type="button" value="Cancel"/>
</form>
JavaScript:
document.addEventListener('DOMContentLoaded', function() {
function OnSubmitForm()
{
alert('click');
}
});
My alert is never calls in plain HTML project neither in WinJS app. I also tried with:
<form name="myform" onsubmit="return OnSubmitForm();">
and the same.
Does it a good approach at all, to use form just for input fields validation or there is better way, and why this does not work ?
Inline event-binding expects functions to be under global-scope and that is one of the reason one should not use it!
In your example, OnSubmitForm is under the local scope of DOMContentLoaded handler. Best approach would be to use addEventListener and with the current code, place OnSubmitForm out of DOMContentLoaded.
document.getElementById('myform').addEventListener('submit', function(e) {
e.preventDefault(); //to prevent form submission
alert('click');
});
<form name="myform" id='myform'>
<div>
<label>
First name
<br />
<input id="contactFirstName" class="win-textbox" type="text" name="firstName" required />
</label>
</div>
<div>
<label>
Last name
<br />
<input id="contactLastName" class="win-textbox" type="text" name="lastName" />
</label>
</div>
<input type="submit" value="Submit" />
<input type="button" value="Cancel" />
</form>
With current approach:
function OnSubmitForm() {
alert('click');
}
<form name="myform" onSubmit="JavaScript:OnSubmitForm()">
<div>
<label>
First name
<br />
<input id="contactFirstName" class="win-textbox" type="text" name="firstName" required />
</label>
</div>
<div>
<label>
Last name
<br />
<input id="contactLastName" class="win-textbox" type="text" name="lastName" />
</label>
</div>
<input type="submit" value="Submit" />
<input type="button" value="Cancel" />
</form>
Have you tried parsley.js?
I created this fiddle to show you a quick example.
<form name="myform">
<div>
<label>
First name<br />
<input id="contactFirstName" data-parsley-required-message="First name required" class="win-textbox" type="text" name="firstName" required data-parsley-trigger="change focusout" data-parsley-pattern="/^[a-zA-Z]*$/"/>
</label>
</div>
<div>
<label>
Last name<br />
<input id="contactLastName" class="win-textbox" type="text" name="lastName" />
</label>
</div>
<input type="submit" value="Submit"/>
<input type="button" value="Cancel"/>
<script src="http://parsleyjs.org/dist/parsley.js"></script>
<script>
window.ParsleyConfig = {
errorsWrapper: '<div></div>',
errorTemplate: '<div class="alert alert-danger parsley" role="alert"></div>',
errorClass: 'has-error',
successClass: 'has-success'
};
</script>