Page is getting reload after clicking on submit

FocusBTW. 0
Viewed 24

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

javascript html
2 Answers

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

EmilioW0

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);
}
Hodorogea Alexandru0
Related