Submitting form and posting to php script without reloading

I am trying to submit a form to a my PHP script that uses phpmailer to send emails. I am using a. ajax call to run the PHP script without refreshing but when I click the submit button all it does is refresh the page. Thank you.

Below is my form script

<form  method="POST" name="form" onsubmit="return chk()">
                                <fieldset>
                                    <p><input type="text" name="name" placeholder="NAME" class="field"></p>
                                    <p><input type="email" name="email" placeholder="EMAIL" class="field"></p>
                                    
                                    <p><textarea cols="2"  name="msg" rows="2" placeholder="MESSAGE"></textarea></p>
                                    <p><input type="submit"  class="button" onclick="return chk()"></p>
                                </fieldset>
                            </form>

Below is the ajax call. Its my first time using ajax so it may be wrong.

<script type="text/javascript">
    function chk()
    
    {
        e.preventDefault();
        var name=document.getElementById('name').value;
        var email=document.getElementById('email').value;
        var msg=document.getElementById('msg').value;
        var dataString='name='+name+'&email='+email+'&msg='+msg;
        $.ajax({
            type:"post",
            url:"mail.php",
            data: dataString,
            cache:false,
            success: function(html) {
                'Email Sent'
            }


        });
        return false

    }
    
</script>

Answer

To use .preventDefault() from a function you need to pass event as an argument

function chk(e){  //<<<<<<< here   chk(e) while you're using e.preventDefault() if its somethingelse.preventDefault() so it should be chk(somethingelse)
  e.preventDefault();
  console.log('Not refreshed');
  //return false; no need for it here.. return false here will work for a function not for the submit/click event so it will not prevent the default action in this case you've to use `preventDefault()`
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form onsubmit="chk(event)"> <!-- ck(event) -->
  <input type="submit" value="submit"> <!-- No need for onclick here -->
</form>

You can forget about the function and use the submit event directly .. no need to use onsubmit/onclick

$(document).ready(function(){
  $("form[name='form']").on('submit' , function(e){
    e.preventDefault();
    console.log('Not refreshed');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form  method="POST" name="form">
    <fieldset>
        <p><input type="text" name="name" placeholder="NAME" class="field"></p>
        <p><input type="email" name="email" placeholder="EMAIL" class="field"></p>

        <p><textarea cols="2"  name="msg" rows="2" placeholder="MESSAGE"></textarea></p>
        <p><input type="submit"  class="button"></p>
    </fieldset>
</form>