How to reach all input field values and submit with button in form?

All we need is an easy explanation of the problem, so here it is.

What I want to do is simple, just take input field values and do something with them by clicking button.

function TableFooterPanel() {

    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');

    const sampleMethod = (x, y) => {
        console.log(x + y)
    }

    return (

        <>
            <Card className='buttonFooter'>
                <Form className='buttonFooter'>
                    <input type="text" placeholder="First Name" defaultValue={firstName} onClick={setFirstName}></input>
                    <input type="text" placeholder="Last Name" defaultValue={lastName} onClick={setLastName}></input>
                    <Button onClick={() => sampleMethod(firstName, lastName)}>Add</Button>
                </Form>
            </Card>

        </>

    );

}
export default TableFooterPanel;

Generally examples for that is done with separate handleChange() methods for each input field but I don’t want to make separate functions for each so I though to use useState. How can I call the sampleMethod with these parameters ? I could not update values properly with useState.

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

if you use input field as text, you need onChange :

<input type="text" placeholder="First Name" defaultValue={firstName} onChange={e => setFirstName(e.target.value)}></input>

That way the text that you typing in the input will save in the state.

Method 2

You can use FormData.

Another suggestion from me is to add an onSubmit event to the form. It’s more convenient.

The button should be type="submit". When the user clicks on it the form’s onSubmit event will fire.

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply