Good day, so I am trying to perform an intermediate function before a form action="POST" takes place. Ive tried two things firstly onSubmit={functionName} but the form always performs the action even if in the onSubmit function I return false. Secondly ive been trying to useRef instead to dispatch the submit event programtically but nothing happens? I essentially have to do a server side call to get a config for the form values that gets posted, unfortunately the external API I use needs the form to be submitted in this way. Please any help would be greatly appreciated.
Attempt 1:
const performSubmit =() => {
//Using onSubmit and then only performing the return after the axios call is done
axiosCallFunction.then((res) => {
setConfig(res.data)
return true
}).catch((error)) => {
//Dont submit form
return false
})
}
return (
<form name="form" onSubmit={performSubmit} id="x1" method="POST" action="https://url.aspx" target="_top">
<input value={config.param}/>
<button type="submit"> Submit</button>
</form>)
Attempt 2
const formEl = useRef();
const performSubmit =() => {
//Currently not calling the submit on the form
formEl.current.dispatchEvent(new Event("submit"))
}
return (
<form name="form" ref={formEl} id="x1" method="POST" action="https://url.aspx" target="_top">
<input value={config.param}/>
<button onClick={performSubmit} />
</form>)
Essentially want to do some call to a server and get results back before I submit the form or perform the action for the form.
Have you tried:
formEl.current && formEl.current.submit();
?
Starting from React 17 you have to add cancelable and bubbles properties to your event. Otherwise, the solution from the accepted answer won't work. It's caused by some changes in event delegation.
formEl?.current.dispatchEvent(
new Event("submit", { cancelable: true, bubbles: true })
);
I found the answer here.
pass the event then prevent its default action
const performSubmit =(e) => {
// stop the form from actually submitting
e.preventDefault();
//Using onSubmit and then only performing the return after the axios call is done
axiosCallFunction.then((res) => {
setConfig(res.data)
return true
}).catch((error)) => {
//Dont submit form
return false
})
}
pass the event
return (
<form name="form" onSubmit={(e) => performSubmit(e)} id="x1" method="POST" action="https://url.aspx" target="_top">
<input value={config.param}/>
<button type="submit"> Submit</button>
</form>)
Try
form?.current.dispatchEvent(new Event("submit"));
Related
Using React Hook Form, when I want to collect data by sending register as props to child component to take input value from child component, it shows 'register is not a function' error.
How can I solve this?
const { register, formState: { errors }, handleSubmit } = useForm();
const onSubmit = (data) => console.log(data);
<form onSubmit={handleSubmit(onSubmit)}>
<fieldset>
<legend className='text-[#666666]' >Status</legend>
{
statusData.map(status => <CheckboxFilter register={register} key={status._id} status={status}/>)
}
</fieldset>
</form>
here child
//CheckboxFilter component
const CheckboxFilter = ({ status, register }) => {
return (
<>
<p className='text-[#858585] mt-2 text-[14px]' >
<label htmlFor={status?.name} className='cursor-pointer' >
<input {...register("checkBoxData")} type="checkbox" name="status" id={status?.name} value={"status?.name"} /> {status?.name}
</label>
</p>
</>
);
};
I created a sandbox here codesandbox and it works perfectly.
I took your code and only changed the CheckboxFilter component:
Removed the name property (register function returns the name of the input based in the string you pass to it as a parameter, you should not override it)
Removed the value property (that was making the value of the checkbox constant, because there wasn't onChange handler that was modifying it)
Changed ...register("checkBoxData") to ...register(checkBoxData${name}) so this way you can have every checkbox value individually in the form.
Anyway, if you want to have a different behaviour than what I have assumed, let me know and I will help.
-Ado
I am using bootstrap and reactJS and want to build a form.
Consider the following snippet:
const CustomForm = () => {
const [alertText, setAlertText] = ('')
const [username, setUsername] = ('');
const handle_submit = () => {
//treat some possible error
setAlertText('some warnings...')
}
return (
<Form>
{alertText && <Alert className='mb-3' variant="warning" >
{alertText}
</Alert>}
<FormGroup className="mb-3">
<FloatingLabel label='username'>
<Form.Control type='text' name='username' placeholder='username' onChange={e => setUsername(e.target.value)} value={username} />
</FloatingLabel>
</FormGroup>
<Button className='float-end' type='submit' variant='outline-primary' onClick={handle_submit} >Submit</Button>
</Form>
)
}
the problem with that snippet is that when the button is declared as submit, it auto reloads the page and empties the form, or I would like to handle some error before and do all that stuff only if the are no errors.
If I declare the type as button, it works well, but I am a little bit confused. I would like to use the submit attribute; I think it is more appropriate.
So my first question is, I am right to think that ? and the second is, what do I need to change empty the form only if there are no errors?
Short answer:
type='button' is more appropriate in your case.
Long Answer:
As per MDN Documentation, a button will have by default a type of submit. If the type is submit, once clicked, it will submit the request to the server. If the form the submit button is a part of has action property defined, the POST request will be sent to that uri, otherwise it will be sent to the current uri. In your case it will trigger a page redirect to the same page, and that is the reason why your form is reset.
Since you have an event listener attached to the button, and you want to process the event client-side to later sent XHR(AJAX) request, you don't want the button to trigger the request to server. Thus you can safely set it to type='button'.
If for some reason you still need to keep type='submit', you can stop the submit to further propagate in your onClick event handler using:
e.stopPropagation();
Add the onSubmit prop to Form:
<Form onSubmit={handle_submit}>
and in the handle_submit function add the event (e) argument and call the function preventDefault (prevents refresh):
const handle_submit = (e) => {
// Prevent refresh
e.preventDefault();
//treat some possible error
setAlertText('some warnings...')
}
I'm building a React component which loads form data dynamically from an external API call. I'll need to submit it back to another API endpoint after the user completes it.
here it is:
import React, { useEffect, useState } from "react";
import axios from "axios";
import TextField from "#material-ui/core/TextField";
import { useFormik } from "formik";
const FORM = () => {
const [form, setForm] = useState([]);
const [submission, setSubmission] = useState({});
const formik = useFormik({
initialValues: {
email: "",
},
});
useEffect(() => {
(async () => {
const formData = await axios.get("https://apicall.com/fakeendpoint");
setForm(formData.data);
})();
}, []);
return (
<form>
{form.map((value, index) => {
if (value.fieldType === "text") {
return (
<TextField
key={index}
id={value.name}
label={value.label}
/>
);
}
if (value.fieldType === "select") {
return (
<TextField
select={true}
key={index}
id={value.name}
label={value.label}
>
{value.options.map((option) => (
<option key={option.value} value={option.value}>
{option.label}
</option>
))}
</TextField>
);
}
})}
<button type="submit">Submit</button>
</form>
);
};
export default FORM;
The API call is coming in ok (yeah i now i need some error handle on that) and I am able to populate the fields and get the form on the page. Where I am having trouble (and im newer to Formik so bear with me) is i need to do validation and submission. I do not really know how to handle the values, usually i'd write some type of static code for the variables, test them and then submit.
usually i'd set a field for "name" and one for "email" for example. In this case i can't write those fields in because they come from the API and we have no idea what they are until we get the call response.
My code handles the field creation but i need to wire for validation and submission and want to use Formik.
How can i accomplish a dynamic form (thru formik) which is wired for validation and submission?
I had the same problem, and I solved it with <Formik> component instead of useFormik() hook. not sure why useFormik fails on dynamic validation, but anyway, after switching to <Formik>, below is the code which worked for me. please check key points after the below code snippet as well.
<Formik
innerRef={formikRef}
initialValues={request || emptyRequest //Mostafa: edit or new: if request state is avaialble then use it otherwise use emptyRequest.
}
enableReinitialize="true"
onSubmit={(values) => {
saveRequest(values);
}}
validate={(data) => {
let errors = {};
if (!data.categoryId) {
errors.categoryId = 'Request Category is required.';
}
//Mostafa: Dynamic validation => as the component is re-rendered, the validation is set again after request category is changed. React is interesting and a lot of repetitive work is done.
if (requestCategoryFields)
requestCategoryFields.map(rcField => {
if (rcField.fieldMandatory) { //1- check Mandatory
if (!data.dynamicAttrsMap[rcField.fieldPropertyName]) {
if (!errors.dynamicAttrsMap) //Mostafa: Need to initialize the object in errors, otherwise Formik will not work properly.
errors.dynamicAttrsMap = {}
errors.dynamicAttrsMap[rcField.fieldPropertyName] = rcField.fieldLabel + ' is required.';
}
}
if (rcField.validationRegex) { //2- check Regex
if (data.dynamicAttrsMap[rcField.fieldPropertyName]) {
var regex = new RegExp(rcField.validationRegex); //Using RegExp object for dynamic regex patterns.
if (!regex.test(data.dynamicAttrsMap[rcField.fieldPropertyName])) {
if (!errors.dynamicAttrsMap) //Mostafa: Need to initialize the object in errors, otherwise Formik will not work properly.
errors.dynamicAttrsMap = {}
if (errors.dynamicAttrsMap[rcField.fieldPropertyName]) //add an Line Feed if another errors line already exists, just for a readable multi-line message.
errors.dynamicAttrsMap[rcField.fieldPropertyName] += '\n';
errors.dynamicAttrsMap[rcField.fieldPropertyName] = rcField.validationFailedMessage; //Regex validaiton error and help is supposed to be already provided in Field defintion by admin user.
}
}
}
});
return errors;
}}>
{({errors,handleBlur,handleChange,handleSubmit,resetForm,setFieldValue,isSubmitting,isValid,dirty,touched,values
}) => (
<form autoComplete="off" noValidate onSubmit={handleSubmit} className="card">
<div className="grid p-fluid mt-2">
<div className="field col-12 lg:col-6 md:col-6">
<span className="p-float-label p-input-icon-right">
<Dropdown name="categoryId" id="categoryId" value={values.categoryId} onChange={e => { handleRequestCategoryChange(e, handleChange, setFieldValue) }}
filter showClear filterBy="name"
className={classNames({ 'p-invalid': isFormFieldValid(touched, errors, 'categoryId') })}
itemTemplate={requestCategoryItemTemplate} valueTemplate={selectedRequestCategoryValueTemplate}
options={requestCategories} optionLabel="name" optionValue="id" />
<label htmlFor="categoryId" className={classNames({ 'p-error': isFormFieldValid(touched, errors, 'categoryId') })}>Request Category*</label>
</span>
{getFormErrorMessage(touched, errors, 'siteId')}
</div>
{
//Here goes the dynamic fields
requestCategoryFields && requestCategoryFields.map(rcField => {
return (
<DynamicField field={rcField} values={values} touched={touched} errors={errors} handleBlur={handleBlur}
handleChange={handleChange} isFormFieldValid={isFormFieldValid} getFormErrorMessage={getFormErrorMessage}
crudService={qaCrudService} toast={toast} />
)
})
}
</div>
<div className="p-dialog-footer">
<Button type="button" label="Cancel" icon="pi pi-times" className="p-button p-component p-button-text"
onClick={() => {
resetForm();
hideDialog();
}} />
<Button type="submit" label="Save" icon="pi pi-check" className="p-button p-component p-button-text" />
</div>
</form>
)}
Key points:
My dynamic fields also come from a remote API, by selecting the categoryId DropDown, and are set into the requestCategoryFields state.
I store the dynamic fields' values in a nested object called dynamicAttrsMap inside my main object which is called request as I have static fields as well.
I used validate props which includes one static validation for categoryId field, and then a loop (map) that adds dynamic validation for all other dynamic fields. this strategy works as with every state change, your component is re-rendered and your validation is created from scratch.
I have two kinds of validation, one checks the existence of value for mandatory fields. And the other checks a regex validation for the contents of the dynamic fields if needed.
I moved the rendering of dynamic fields to a separate component <DynamicField> for better modularization. please check my DynamicField component
you can move the validation props to a const for better coding; here my code is a bit messy.
I used two const, for better coding, for error messages and CSS as below:
const isFormFieldValid = (touched, errors, name) => { return Boolean(getIn(touched, name) && getIn(errors, name)) };
const getFormErrorMessage = (touched, errors, name) => {
return isFormFieldValid(touched, errors, name) && <small className="p-error">{getIn(errors, name)}</small>;
};
please check out my complete component at my GitHub Here for better understanding. and comment for any clarification if you need. because I know how tricky Formik can sometimes be. we have to help out each other.
Adding enableReinitialize to formik
useFormik({
initialValues: initialData,
enableReinitialize: true,
onSubmit: values => {
// Do something
}
});
FORMIK Doc
I made a code sandbox example for my problem: https://codesandbox.io/s/react-form-submit-problem-qn0de. Please try to click the "+"/"-" button on both Function Example and Class Example and you'll see the difference. On the Function Example, we always get the previous value while submitting.
I'll explain details about this example below.
We have a react component like this
function Counter(props) {
return (
<>
<button type="button" onClick={() => props.onChange(props.value - 1)}>
-
</button>
{props.value}
<button type="button" onClick={() => props.onChange(props.value + 1)}>
+
</button>
<input type="hidden" name={props.name} value={props.value} />
</>
);
}
It contains two buttons and a numeric value. User can press the '+' and '-' button to change the number. It also renders an input element so we can use it in a <form>.
This is how we use it
class ClassExample extends React.Component {
constructor(props) {
super(props);
this.state = {
value: 1,
lastSubmittedQueryString: ""
};
this.formEl = React.createRef();
}
handleSumit = () => {
if (this.formEl.current) {
const formData = new FormData(this.formEl.current);
const search = new URLSearchParams(formData);
const queryString = search.toString();
this.setState({
lastSubmittedQueryString: queryString
});
}
};
render() {
return (
<div className="App">
<h1>Class Example</h1>
<form
onSubmit={event => {
event.preventDefault();
this.handleSumit();
}}
ref={ref => {
this.formEl.current = ref;
}}
>
<Counter
name="test"
value={this.state.value}
onChange={newValue => {
this.setState({ value: newValue }, () => {
this.handleSumit();
});
}}
/>
<button type="submit">submit</button>
<br />
lastSubmittedQueryString: {this.state.lastSubmittedQueryString}
</form>
</div>
);
}
}
We render our <Counter> component in a <form>, and want to submit this form right after we change the value of <Counter>. However, on the onChange event, if we just do
onChange={newValue => {
this.setState({ value: newValue });
this.handleSubmit();
}}
then we won't get the updated value, probably because React doesn't run setState synchronously. So instead we put this.handleSubmit() in the second argument callback of setState to make sure it is executed after the state has been updated.
But in the Function Example, as far as I know in state hooks there's nothing like the second argument callback function of setState. So we cannot achieve the same goal. We found out two workarounds but we are not satisfied with either of them.
Workaround 1
We tried to use the effect hook to listen when the value has been changed, we submit our form.
React.useEffect(() => {
handleSubmit();
}, [value])
But sometimes we need to just change the value without submitting the form, we want to invoke the submit event only when we change the value by clicking the button, so we think it should be put in the button's onChange event.
Workaround 2
onChange={newValue => {
setValue(newValue);
setTimeout(() => {
handleSubmit();
})
}}
This works fine. We can always get the updated value. But the problem is we don't understand how and why it works, and we never see people write code in this way. We are afraid if the code would be broken with the future React updates.
Sorry for the looooooooong post and thanks for reading my story. Here are my questions:
How about Workaround 1 and 2? Is there any 'best solution' for the Function Example?
Is there anything we are doing wrong? For example maybe we shouldn't use the hidden input for form submitting at all?
Any idea will be appreciated :)
Can you call this.handleSubmit() in componentDidUpdate()?
Since your counter is binded to the value state, it should re-render if there's a state change.
componentDidUpdate(prevProps, prevState) {
if (this.state.value !== prevState.value) {
this.handleSubmit();
}
}
This ensure the submit is triggered only when the value state change (after setState is done)
It's been a while. After reading React 18's update detail, I realize the difference is caused by React automatically batching state updates in function components, and the "official" way to get rid of it is to use ReactDOM.flushSync().
import { flushSync } from "react-dom";
onChange={newValue => {
flushSync(() => {
setValue(newValue)
});
flushSync(() => {
handleSubmit();
});
}}
I have a form with a textarea where users can put comments, and then trigger a onClick (when the form is submitet via the button).However, I cant get the value of the input, for example if a user writes "test", I want it to get into the handleSubmit function.
My form
<form onSubmit={this.handleSubmit.bind(this)} method="POST">
<label>Skicka</label>
<textarea placeholder="Type in comments (allergis etc.)" name ="name" ref ="name"></textarea>
<button className="btn" type="submit">
Send
</button>
</form>
//my handler
public handleSubmit = event => {
event.preventDefault();
console.log(event.name.value)
}
You have to save the textarea value separately in the onChange method of the textarea like this (for class component):
<form onSubmit={this.handleSubmit.bind(this)}
method="POST"
>
<label>Skicka</label>
<textarea
onChange={this.setComments}
placeholder="Type in comments (allergis etc.)"
name="name"
value={this.state.comment}/>
<button className="btn" type="submit">
Send
</button>
</form>
// The save function
const setComments = e => this.setState({comment: e.target.value});
This will save the textarea input in your local state and you can access it in your submit function with this.state.comment.
Hope this helps. Happy coding.
As you are using Uncontrolled Component. You can make use of ref to get value.
handleSubmit = (event) => {
event.preventDefault();
console.log(this.refs.name.value)
}
Demo
Note: In React you should never add method="POST" and action attribute's on form.
Don't add public keyword to your function (if you are not using typescript).
Better approach to work with form values, is Controlled Component
You can fix it by changing the handleSubmit method. Check below updated method.
public handleSubmit = event => {
event.preventDefault();
console.log(event.target.name.value)
}
But if you are work with React application then update the state variable via onChange event.