無法停止刷新頁面提交的表單

Question

該表格會動態顯示並提供ID，因此我可以找出它來自哪一表格...

這是php / html表單

<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>

和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},
            });
    });
});

我也嘗試過這個...

$(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();
        });
    });
});

我也嘗試過

('#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();
});

這些似乎都不起作用。 我正在使用larvel 5.1，並嘗試獲取要在頁面上提交的表單並將一個輸入的值發送給控制器，以便我可以獲取該ID並將其用於存儲數據庫中另一張表中的信息。 當然可以，但是也可以刷新頁面...這就是我想要的。 頁面變成空白，我知道這是發生的，因為我沒有在控制器中返回任何內容……沒關系，因為當我在控制器中返回同一頁面時，它仍然顯示頁面正在刷新……這是我要擺脫的。 我只想要通過ajax發送的數據，這樣我就可以使用它...不刷新頁面。 我不明白為什么會遇到這個問題。 我在這里已經閱讀了許多其他有關防止刷新的問題，但是沒有一種解決方案有效。 任何想法？

Answer 1

由於您是自己通過ajax處理POST（您的第一個jquery示例），因此請嘗試將按鈕從“提交”類型更改為“按鈕”類型

Answer 2

這應該有幫助

$('form').submit(function (e) {
    return false;
});

Answer 3

form沒有ID #form 。 請嘗試使用form 。

$('form').on('submit', function (e) {
    e.preventDefault();
});

Answer 4

首先將一個id設置為form -

<form id="MyForm" action="/mealtrist" method="post" enctype="multipart/form-data">

然后使用-

$(document).ready(function() {
    $("#MyForm").on('submit', function(e) {
        e.preventDefault();                

    })
});

Answer 5

我嘗試了以上所有表單提交答案。 返回false無效，event.preventDefault（）無效。 我的問題也不清楚。 我真的認為提交表單而不是使用Ajax更為安全，因此這就是我嘗試使用表單的原因。 我最終只是使用ajax發送數據。

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

它工作得很好。