如何避免在javascript中提交表单期间更改url？ [复制]答案

【问题标题】：how to avoid url change during form submission in javascript? [duplicate]如何避免在javascript中提交表单期间更改url？ [复制]
【发布时间】：2022-01-04 10:31:30
【问题描述】：

表格：

<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>

每次我提交表单时，它都会将值附加到 url。如何不附加这些值？

onSubmit={addProduct} , addProduct 调用 post api 来添加产品。

我也尝试删除 onSubmit 并通过按钮 onClick 调用 addProduct 但仍然相同。

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

你应该在你的提交函数中阻止这样的默认事件机制：

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

【讨论】：