how to turn off reload of page after sending ajax to php and how to fix this code

Question

How to turn off reload of page after sending AJAX to PHP? The page reloads every time when I press submit. Is it possible to send some picture without form?

<script>
    $(document).ready(function (e){
        $("#uploadForm").on('submit', (function(e){
            e.preventDefault();
            $.ajax({
                url: "/class/pdo/add_new_field.php",
                type: "POST",
                data:  new FormData(this),
                contentType: false,
                cache: false,
                processData:false,
                success: function(data){
                    $("#targetLayer").html(data);
                },
                error: function(){}             
            });
        }));

        $('#uploadForm').submit(function () {
            return false;
        });
    });
</script>

<form id="uploadForm" method="POST">
    <div style="margin-left: 75px;">
        <div class="save_divs">picture<input type="file"></div>
        <div class="save_divs">name:</div>
        <div class="save_divs">date</div>
        <div class="save_divs">short_info</div>
        <div class="save_divs">long info<input type="submit"></div>
    </div>
</form>

Do i need slash ( / ) in $.ajax url?

Answer 1

1. too many event handlers. Remove the second one unless sendContactForm(); is important. If it is, update your question with it.
2. syntax error in the event handler, remove the ( from before (funtion in the submit and one of the ) from the }));
3. If class is the top folder in your hierarchy you can use the /class, if it is under the form location, then no. Use "class/..."

like this

<script>
$(function(){
    $("#uploadForm").on('submit',function(e){
        e.preventDefault();
        $.ajax({
            url: "/class/pdo/add_new_field.php",
            type: "POST",
            data:  new FormData(this),
            contentType: false,
            cache: false,
            processData:false,
            success: function(data){
                $("#targetLayer").html(data);
            },
            error: function(){}             
        });
    }); // also a ) too many here
});
</script>

Answer 2

Ok, First problem is : -

1. You have submit binded twice once with on , once with submit() , use only one.

2. Now the error is coming due to the second binding, There is some error in sendContactForm(), due to which it never gets to the line return false and default page is submitted and is reloaded, check for console errors, also, to prevent confusion in future, you could probably use e.preventDefault(); at the start of the function to stop further propogation. (thanks @rory)

    $('#uploadForm').submit(function (e) { e.preventDefault(); sendContactForm(); return false; });