how to avoid url change during form submission in javascript?

Question

form :

<form onSubmit={addProduct}>
          <div>
            <p>Product Name:</p>
            <Input
              className="h-10"
              width="200px"
              type="text"
              name="name"
              placeholder="enter the product name"
              onChange={(e) => setProductName(e.target.value)}
            />
          </div>
          <button
            type="submit"
            className="bg-[#344CB7] w-20 h-10 rounded-sm text-white mt-10 ml-[400px]"
          >
            Upload
          </button>
        </form>

Each time I submit my form, it appends values to the url. How do I not append these values?

The onSubmit={addProduct} , addProduct make a post api call to add the products.

I also tried removing the onSubmit and called addProduct via button onClick but still the same.

Answer 1

you should prevent the default event mechanism like this in your submit function:

function onSubmitFunction(event) {
  //prevent the default mechanism
  event.preventDefault();
  
  /*
  your code
  */
  
  //not submit the form
  return false;
}