prevent default not working on form submission-CodePudding

trying to prevent default on form submission though it goes ahead and submits user input-- if I have the form onsubmit value to empty then the form prevents default.. is there solution to this?

Below is my form; on submit is empty as it prevents default when empty. though it should be going to generate as shown below...

              <form className='grid' onSubmit={}>
                <div className='flex'>
                  {/* <InputField
                    isRequired={true}
                    id='productNameField'
                    required={true}
                    className='border-solid border-2 border-gray-200 pl-3 w-full rounded-lg h-full'
                    type='text'
                    placeholder='Spotify'
                    label='Product Name'
                    onChange={onSetProductName}
                  /> */}

                  <div className=' relative '>
                    <label className='text-gray-700'>
                      Product Name
                      <span className='text-red-500 required-dot'>*</span>
                    </label>
                    <input
                      type='text'
                      required
                      className=' rounded-lg border-transparent flex-1 appearance-none border border-gray-400 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-accent1 focus:border-transparent'
                      placeholder='Spotify'
                      onChange={onSetProductName}
                    />
                  </div>
                </div>
                {/* <div className='flex pt-6'>
                  <InputField
                    id='productDescriptionField'
                    required={true}
                    className='border-solid border-2 border-gray-200 pl-3 w-full rounded-lg resize-none h-full p-1'
                    type='text'
                    placeholder='Spotify is a music service that lets you listen to music and share it with friends.'
                    label='Product Description'
                    maxRows={5}
                    onChange={onSetProductDescription}
                    multiline
                  />
                </div>
                <div className='flex pt-6'>
                  <InputField
                    id='platformField'
                    required={true}
                    className='border-solid border-2 border-gray-200 pl-3 w-full rounded-lg h-full'
                    type='text'
                    placeholder='Instagram'
                    label='Platform'
                    onChange={onSetPlatform}
                  />
                </div>
                <div className='flex pt-6'>
                  <InputField
                    id='audienceField'
                    required={true}
                    className='border-solid border-2 border-gray-200 pl-3 w-full rounded-lg h-full'
                    type='text'
                    placeholder='Teens'
                    label='Audience'
                    onChange={onSetAudience}
                  />
                </div> */}
                <div className='grid'>
                  <div className='grid grid-cols-2 pt-6'>
                    {pendingCreativeAd === true ? (
                      <div className='grid justify-start'>
                        <button
                          type='button'
                          disabled={true}
                          className='py-2 px-4 flex justify-center items-center bg-gray-600 text-white w-full transition ease-in duration-200 text-center text-base font-semibold rounded-lg '
                        >
                          1 sec.
                          <LoadingIcon height={21} width={21} />
                        </button>
                      </div>
                    ) : (
                      <div className='grid justify-start'>
                        <button
                          type='submit'
                          // onClick={generate}
                          className='py-2 px-4 flex justify-center items-center  bg-accent1 hover:bg-blue-800 focus:bg-accent1 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none rounded-lg  '
                        >
                          Generate
                        </button>
                      </div>
                    )}
                    <div className='grid justify-end'>
                      <button
                        type='button'
                        onClick={clearForm}
                        className='py-2 px-4 flex justify-center items-center  bg-orange-700 hover:bg-orange-800 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:bg-orange-700  rounded-lg  '
                      >
                        Clear Form
                      </button>
                    </div>
                  </div>
                </div>
              </form>

 const generate = async (e) => {
    e.preventDefault();
    startGenAd(productName, productDescription, platform, audience);
    console.log('submitting generate');
  };

CodePudding user response：

set type e to

  const generate = async (e: { preventDefault: () => void; }) => {
    e.preventDefault();
    startGenAd(productName, productDescription, platform, audience);
    console.log('submitting generate');
  };

CodePudding user response：

Just use your generate function in Form's Submit Event Instead of Button's Click Event. I think this is the easiest Approach.