Page getting refresh on a click of buttton-CodePudding

I was making a project in react so the problem I was encountering was that there is a submit button in a form field and whenever someone clicks on it should have a fetch, I did the same there, and then when I saw the output and clicks the button the page refreshes and it didn't fetch

Here's some code

Function to be called on button click

const submit = () => {
        fetch('http://localhost:3001/quizInfo',{
        method: 'POST',
        mode: 'cors', 
        cache: 'no-cache',
        credentials: 'same-origin', 
        headers: {
            'Content-Type': 'application/json'
        },
        redirect: 'follow', 
        referrerPolicy: 'no-referrer',
        body: JSON.stringify({
            ID: GameId
        })
    })
    .then(res => res.json())
    .then(data => console.log(data[0].ques1))
    }

form field

form>
        <div id="jn">
            <div id="inps">
                <input type="number" className='si' id="mdinp" onChange={formChangeID} placeholder='Enter Id'></input><br></br>
                <input type="password" className='si is' id="mdinp2" onChange={formChangePASS} disabled placeholder='Enter Password'></input><br></br>
                <input  type="submit" onClick={submit}  id='mdg' value="GO!" disabled></input>
            </div>
        </div>
        </form>

After this code the page refreshes and I also use e.preventDefault function to stop it because I same issue before but it doesn't worked

function with preventDefault:

const submit = (event) => {
        event.preventDefault();
        fetch('http://localhost:3001/quizInfo',{
        method: 'POST',
        mode: 'cors', 
        cache: 'no-cache',
        credentials: 'same-origin', 
        headers: {
            'Content-Type': 'application/json'
        },
        redirect: 'follow', 
        referrerPolicy: 'no-referrer',
        body: JSON.stringify({
            ID: GameId
        })
    })
    .then(res => res.json())
    .then(data => console.log(data[0].ques1))
    event.preventDefault();
    }

I would be grateful if someone helps me.

CodePudding user response：

try code below

<form onSubmit={submit}>
        <div id="jn">
            <div id="inps">
                <input type="number" className='si' id="mdinp" onChange={formChangeID} placeholder='Enter Id'></input><br></br>
                <input type="password" className='si is' id="mdinp2" onChange={formChangePASS} disabled placeholder='Enter Password'></input><br></br>
                <button type="submit" id="mdg">GO!</button>
            </div>
        </div>
        </form>

CodePudding user response：

Instead of setting the type attribute of your button to 'submit', try setting it to 'button', this will prevent submitting your form when the button is clicked.

<input  type="button" onClick={submit}  id='mdg' value="GO!"></input>

CodePudding user response：

Submitting something means refreshing the page. To avoid this pass the event like this: onClick={event => function(event) {e.preventDefault(); fnbody}. This is a common js procedure