What could avoid Nextjs router to push the url I provided but params instead? - forms

Question

I have a very simple form for selecting a payment method built with Nextjs :
<form className='mx-auto max-w-screen-md' onSubmit={submitHandler}>
{
["Credit Card", "Paypal"].map((payment: string) => (
<div key={payment} className="mb-4">
<input
name='paymentMethod'
className='p-2 outline-none focus:ring-0'
id={payment}
type="radio"
checked={selectedPaymentMethod === payment}
onChange={() => setSelectedPaymentMethod(payment)}
/>
<label className='p-2' htmlFor={payment}>
{payment}
</label>
</div>
)
)}
<div className='mb-4, flex justify-between'>
<button
onClick={() => router.push('/shipping')}
type='button'
className='default-button'
>
Back
</button>
<button
className='primary-button'
>
Confirm
</button>
</div>
</form>
Then here's the javascript for the submitHandler :
const router = useRouter();
const [selectedPaymentMethod, setSelectedPaymentMethod] = useState('');
const { state, dispatch } = useContext(Store);
const submitHandler = (e: any) => {
e.prevent.default();
dispatch({ type: 'SAVE_PAYMENT_METHOD', payload: selectedPaymentMethod });
Cookies.set({
...cart,
paymentMethod: selectedPaymentMethod
});
router.push('/placeorder');
};
The problem occurs when it comes to push the new route '/placeorder'.
Clicking on the confirmation button doesn't bring me to the '/placeorder' route but instead, it pushes a question mark, the input name and "=on" in the url, like so :
http://localhost:3000/payment?paymentMethod=on
It's a bit different if I don't select anything prior clicking on the confirm button, it just pushes a question mark :
http://localhost:3000/payment?
There's nothing I can find related to this issue on internet.
The piece of code is from a tutorial, I compared it , but it's the exact same thing.

Answer 1

replace e.prevent.default() with e.preventDefault()