The console is not displaying the data from the useForm

Question

The console is not displaying the data from the useForm

I am working on a project to create a Gmail clone. I have implemented the useForm library for data validation. However, when I input data into the form and try to print it to the console, nothing is being displayed.


const onSubmit = (data) => {
        console.log(data);
    };


<form onSubmit={handleSubmit(onSubmit)}>
            <input name='to' placeholder='To' type='text' {...register('to', { required: true })} />
            <input name='subject' placeholder='Subject' type='text' {...register('subject', { required: true })} />
            <input name='message' placeholder='Type your message here...' type='text' className='sendMail_message' {...register('message', { required: true })} />

            <div className='sendMail_options'>
                <Button className='sendMail_send'>Send</Button>
            </div>
        </form>

javascript html css reactjs redux

Answer 1

Answer №1

Include the prop type='submit' in the button component.

<Button type='submit' className='sendMail_send'>Send</Button>

Answer 2

Include the prop type='submit' in the button component.

<Button type='submit' className='sendMail_send'>Send</Button>

Answer 3

Answer №2

<script type="text/javascript">
    function fetchFormData(formId){
        let formData = [];
        let formDetails = document.getElementById(formId)// retrieve the form
        for ( let i = 0; i < formDetails.elements.length; i++ ) {
            let element = formDetails.elements[i];
            if(element.name !== '') {
                formData[encodeURIComponent(element.name)] = encodeURIComponent(element.value);
            }
        }
        return formData;
    }
    const handleFormSubmit = () => {
        let dataReceived = fetchFormData('formId');
        console.log(dataReceived)
        //task: validate data before submission
        return false;
    };
</script>

<form onsubmit="return handleFormSubmit()" id="formId" >...</form>

Answer 4

<script type="text/javascript">
    function fetchFormData(formId){
        let formData = [];
        let formDetails = document.getElementById(formId)// retrieve the form
        for ( let i = 0; i < formDetails.elements.length; i++ ) {
            let element = formDetails.elements[i];
            if(element.name !== '') {
                formData[encodeURIComponent(element.name)] = encodeURIComponent(element.value);
            }
        }
        return formData;
    }
    const handleFormSubmit = () => {
        let dataReceived = fetchFormData('formId');
        console.log(dataReceived)
        //task: validate data before submission
        return false;
    };
</script>

<form onsubmit="return handleFormSubmit()" id="formId" >...</form>

The console is not displaying the data from the useForm

Answer №1

Answer №2

Similar questions

Is it possible to utilize ReactJS for animating elements based on the user's scrolling behavior?

Determine the size of a BSON object before saving it to a MongoDB database using

Learn the process of automatically copying SMS message codes to input fields in Angular17

What methods can be used to construct components using smaller foundational components as a base?

Can you provide me with a comprehensive list of all the colors available in Twitter Bootstrap 3?

Model Abstracted Aurelia Validation

Is there a way to have content update automatically?

Color overlay on top of image background

Creating a seamless integration of Material UI V5 ThemeProvider in Storybook V6 within the NX workspace involves a series

What steps can I take to hide my textarea after it has been clicked on?

Is there a way to present both Javascript and templates from parallel directories using express?

Keep fancybox items in their designated spot

Delay the closure of a window by utilizing a straightforward method when selecting the "X - CLOSE" option with the following code: `<a href="javascript:window.open('', '_self').close();">X - CLOSE</a>`

Creating a platform for users to share their thoughts and engage in

Material-UI CardMedia is experiencing difficulty in loading dynamic images from a URL, however, it is functioning properly with

An issue was encountered during the prerendering of the page "/". For more information on this error, visit: https://nextjs.org/docs/messages/prerender-error Attempting to adjust the request (unable to determine

Tips for eliminating the "must use restructuring props" task

Nuxt Js - Ensuring script is only loaded once during the initial page load

Jquery is not displaying the background color of the progress bar

Exploring ways to validate the existence of a class in HTML table elements