Submitting form and posting to php script without reloading

Question

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 1

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>