can't stop submitted form from refreshing page

The form is displayed dynamically and gives the id so I can found out which form it is coming from...

here is the php/html form

<div class="col-sm-4 text-center">
    <!-- Task Name -->
    <div><img src="{{ URL::asset('public/mealpics') }}/{{ $meal->picture }}" /></div>
    <div>{{ $meal->name }} by {{ $meal->author }}</div>
    <div>Rating: {{ $meal->rating }}</div>
    <div>Cal: {{ $meal->calories }} Fat: {{ $meal->fat }} Chol: {{ $meal->cholesterol }}</div>
    <div>Sodium: {{ $meal->sodium }} Sugar: {{ $meal->sugar }}</div>
    <div>{{ $meal->created_at }}</div>
    <div>
        <form action="/mealtrist" method="post" enctype="multipart/form-data">
            <input type="hidden" name="_token" value="{!! csrf_token() !!}">
            <input type="hidden" class="form-control" id="onPlan{{$meal->id}}" name="onPlan"
                   value="{{ $meal->id }}">
            <button id="submit_btn" data-mealid="{{$meal->id}}" type="submit" class="btn btn-default">Add To Plan</button>
        </form>
    </div>
</div>

and the jquery ajax

$(document).ready(function () {         
    $('submit_btn').click(function(event) {
        event.preventDefault();
        var diffValue = $(event.currentTarget).attr("data-mealId");
        var mealId = '#onPlan' + diffValue;
        jQuery.ajax({
            url : '<?php echo URL::to('mealtrist') ?>',
            type : 'POST',
        data : {
            onPlan: diffValue},
            });
    });
});

i've also tried this...

$(document).ready(function () {         
    $('#submit_btn').click(function(event) {
        event.preventDefault();
        var diffValue = $(event.currentTarget).attr("data-mealId");
        var mealId = '#onPlan' + diffValue;
        $('#form').submit(function (e) {
            jQuery.ajax({
                url : '<?php echo URL::to('mealtrist') ?>',
                type : 'POST',
            data : $(mealId).serialize(),               success : function( response ) {
                $('#added').empty();
                $(response).appendTo("#added");
            } 
        });

        e.preventDefault();
        });
    });
});

i've also tried the

('#form').on('submit', function (e) {
    ///i've even tried the e.preventDefault(); here but I think that prevents the code below from sending.
    ////code
    e.preventDefault();
});

none of this seems to be working. I'm using larvel 5.1 and trying to get a form to submit on a page and send the value of one input to a controller so that I can get that id and use it to store information from another table in my database. It works of course, but it also refreshes the page...that's what I'm looking for. The page turns up blank, which i understand that is happening because I'm not returning anything in my controller...that doesn't matter, because when I return the same page in my controller it still shows the page refreshing...which is what I want to get rid of. I just want the data sent through ajax so I can use it...no page refresh. I don't understand why I'm having this issue. I've read alot of other questions on here about preventing the refreshing, but none of the solutions are working. Any idea?

via Chebli Mohamed