Page is getting reload after clicking on submit

Question

After choosing the team and betting amount when I click on "bet on this team" the current page is reloading.

<div className='background'>
    <form onSubmit={onSubmit}>
        <select value={bet} onChange={(e) => SetBet(e.target.value)} >
            <option value="100">100$</option>
            <option value="200">200$</option>
            <option value="300">300$</option>
            <option value="400">400$</option>
            <option value="500">500$</option>
            <option value="600">600$</option>
            <option value="700">700$</option>
            <option value="800">800$</option>
            <option value="900">900$</option>
            <option value="1000">1000$</option>
        </select>
        <input className="betButton" type="submit" value="Bet on this team" />
    </form>
</div>

these are handlers:

const onChange = (teamName) => {
    SetBetTeam(teamName)
    console.log(betTeam);
}

const onSubmit = () => {
    console.log(betTeam);
    console.log(bet);
}

image

Look into [Prevent Default](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) This same question has MANY MANY answers on SO .. [SO Search Results](https://stackoverflow.com/search?q=prevent+form+submission+on+submit) — Zak, Sep 16 '22 at 20:54

score -1 · Answer 1 · answered Sep 16 '22 at 20:47

-1

You have to pass event as a parameter to onSubmit and use event.preventDefault()

answered Sep 16 '22 at 20:47

EmilioW

26
3

score -1 · Accepted Answer · answered Sep 16 '22 at 20:50

The default action attribute of a HTML form is the current URL, whereas the default method attribute is 'get'. Hence, once submitted, your form will make a GET request to the current url, which basically results in a refresh. In order to prevent the default behavior on form submission, try this instead:

const onSubmit = (e) => {
    e.preventDefault();
    console.log(betTeam);
    console.log(bet);
}

Page is getting reload after clicking on submit

2 Answers2