Next.js Discord

Discord Forum

How can I submit the form without clicking the submit button

Unanswered
Muhammed Khal posted this in #help-forum
Open in Discord
Muhammed KhalOP
  const { register, control, handleSubmit, setValue, getValues } = useForm({
    defaultValues: {
      question: '',
      description: '',
      options: [{ text: '' }],
    },
  });

  const { fields, append, remove } = useFieldArray({
    control,
    name: 'options',
  });

<form className='my-4'>
      <Card className=' shadow-[0px_0px_4px_0px_rgba(0,0,0,0.10)] rounded-[0.5rem] '>
        <CardContent className='py-2'>
          <Input
            className=' border-none '
            type='text'
            placeholder='Enter your question'
            {...register('question')}
            autoFocus
            // onChange={(e) => handleChange(-1, 'text', e.target.value)}
          />
          <Input
            className=' border-none '
            type='text'
            placeholder='Enter your question (required)'
            {...register('description')}
            // onChange={(e) => handleChange(-1, 'text', e.target.value)}
          />

          {fields.map((option, index) => (
            <div key={option.id}>
              <div className='flex items-center gap-5 space-y-2'>
                <Checkbox />
                <Input
                  type='text'
                  placeholder='Enter option here'
                  {...register(`options.${index}.text`)}
                  //   onChange={(e) => handleChange(index, 'text', e.target.value)}
                />
                {index >= 1 && (
                  <button type='button' onClick={() => remove(index)}>
                    Remove
                  </button>
                )}
              </div>
            </div>
          ))}
          <button type='button' onClick={() => append({ text: '' })}>
            Add Option
          </button>

That's my form I want to submit without clicking the submit button anyone got ideas??

48 Replies

Muhammed KhalOP
@Northeast Congo Lion
For onChange I want it to do directly add to it;s value instead of -1
Muhammed KhalOP
@Ray
Northeast Congo Lion
can you show full code
i can't see closing tags for card etc
im not 100% sure what you want to achieve
perhaps a screenshot of the actual site would help
Muhammed KhalOP
// ShortAnswerForm
import React from 'react';
import { useForm, useFieldArray } from 'react-hook-form';

import { Card, CardContent } from '@/components/ui/card';
import { Input } from '@/components/ui/input';

const ShortAnswerForm = ({
  question,
  onQuestionChange,
  onDescriptionChange,
  updateType,
}: any) => {
  const { register, control, handleSubmit } = useForm({
    defaultValues: {
      question: question.question || '',
      description: question.description || '',
    },
  });

  const onSubmit = (data: any) => {
    // Handle form submission logic if needed
    // Here, you can access the form data in the `data` object
    console.log('Form data:', data);
  };

  return (
    <div className='my-4'>
      <Card
        className='shadow-[0px_0px_4px_0px_rgba(0,0,0,0.10)] rounded-[0.5rem]'
        onFocus={updateType}
      >
        <CardContent className='py-2'>
          <form onSubmit={handleSubmit(onSubmit)}>
            <Input
              className='border-none'
              type='text'
              placeholder='Enter your question'
              {...register('question')}
              value={question.question}
              onChange={(e) => onQuestionChange(e.target.value)}
              autoFocus
            />
            <Input
              className='border-none'
              type='text'
              placeholder='Enter description here (optional)'
              {...register('description')}
              value={question.description}
              onChange={(e) => onDescriptionChange(e.target.value)}
            />
            {/* You can add additional form fields here if needed */}
            <button type='submit' style={{ display: 'none' }} />
          </form>
        </CardContent>
      </Card>
    </div>
  );
};

export default ShortAnswerForm;
So here I want to pass the data without clicking on submit button
Northeast Congo Lion
uhm
tbh without clicing submit i dont see how u would have user subimt form
unless you check every onChange
if question & description == whatever you want
then submit.
Muhammed KhalOP
Basicallu tjis
Northeast Congo Lion
so
Muhammed KhalOP
What you suggest to use here the form or just normal inout fields
Northeast Congo Lion
you just want to add
the option to list?
Muhammed KhalOP
Yes
Northeast Congo Lion
why does i have green checkbox to left?
just trying to understand ur set-up
Muhammed KhalOP
Not sure need to ask designer, haven;t asked yet haha
Northeast Congo Lion
okay well so
when you type and hit enter
you want it to add?
is that a better flow
Muhammed KhalOP
Yes
Northeast Congo Lion
okay in this case
Muhammed KhalOP
I did without the form but as you can see many conditons erl
Northeast Congo Lion
so
i would change onChange to maybe
onKeyPress
or sorry
keep onChange
and attach onKeyPress
Muhammed KhalOP
and here I am facing a problem when I type something on first option fileds it's duplicating and adding one more extra field of option and it's not updating on array
Northeast Congo Lion
const handleKeyPressed = (e) => {
   if (e.key == 'enter') { //unsure if enter key is 'enter'
      e.preventDefault();
     //push
   }
}
Muhammed KhalOP
Okay
Any ideas for why it's ding some duplicate??
Northeast Congo Lion
i havent worked directly with
reatc forms
Muhammed KhalOP
But the ss I sent you is not the forms
Northeast Congo Lion
i am not too sure on dupe
but lets solve the add without click first
1 step at a time
Muhammed KhalOP
Yeah sure
@Muhammed Khal <@743561772069421169>
Ray
what can i help you?