如何在不刷新的情况下提交表单？

Posted 2023-03-14

【中文标题】如何在不刷新的情况下提交表单？

【英文标题】：How to submit form without refreshing?

【发布时间】：2019-12-21 07:48:55

【问题描述】：

单击结束按钮将表单提交到数据库后，我正在尝试删除刷新时间。

我在 jquery 方面没有那么有经验，目前我只依赖视频教程和论坛，但我还在学习曲线上。如您所见，我已经将开始按钮转换为 jquery 以删除单击开始按钮时的刷新时间。

 <tbody class="table table-bordered table-striped">
                    @foreach($user as $task)
                    <tr class="form-group">
                        -- <form action=" route('amber.timestone.home.start') " method="POST" class="align-center"> --
                            csrf_field()
                            <td class="d-flex">
                            <input type="hidden" name="id" id="hidden-id_$task->id" value=" $task->id ">
                                    <button type="button" id="str-btn" data-id="$task->id" class="btn btn-primary"
                                        @if(!empty($task->start))
                                            disabled
                                            @elseif(!empty($task->duration))
                                        readonly
                                        @endif
                                    >Start</button>
                                    -- <span class="btn btn-primary" onclick="myAlert($task->id)">Test</span> --
                            </td>
                            -- </form> --
                            <form action=" route('amber.timestone.home.end', $task->id) " method="POST">
                                csrf_field()

                                <td> 
                                    <input class="my-2" type="text" id="ref_$task->id" name="ref" value=" $task->ref "
                                        @if(empty($task->start))
                                            readonly
                                        @elseif(!empty($task->duration))
                                            readonly
                                        @endif
                                        > 
                                        -- <input class="my-2" type="hidden" name="ref" value=" $task->ref "> --
                                    </td>
                                    <td>    
                                        <textarea name="remarks" id="remarks_$task->id" cols="30" rows="4"
                                        @if(empty($task->start))
                                        readonly
                                        @elseif(!empty($task->duration))
                                        readonly
                                    @endif
                                        > $task->remarks </textarea>  
                                    </td>
                                    <td>
                                        <select id="campaign_$task->id" class="custom-select custom-select-lg mb-3" name="campaign" 
                                        @if(empty($task->start))
                                        disabled
                                        @elseif(!empty($task->duration))
                                        disabled
                                    @endif
                                        >        
                                            <option @if($task->campaign == 'cert') selected @endif value="cert">Cert Focus</option>
                                            <option @if($task->campaign == 'omni') selected @endif value="omni">Omni</option>
                                            <option @if($task->campaign == 'textblast') selected @endif value="textblast">TextBlast</option>
                                        </select> 
                                    </td>
                                    <td>
                                        <select id="type_$task->id" class="custom-select custom-select-lg mb-3" name="type" 
                                        @if(empty($task->start))
                                        disabled
                                        @elseif(!empty($task->duration))
                                        disabled
                                    @endif
                                        >   
                                            <option @if($task->type == 'cert') selected @endif value="cert">Cert</option> 
                                            <option @if($task->type == 'email') selected @endif value="email">Email Support</option>    
                                            <option @if($task->type == 'chat') selected @endif value="chat">Chat Support</option>
                                        </select>
                                    </td>
                                    <td>
                                        <p id="startTime"></p>
                                         $task->start 

                                    </td>
                                    <td>
                                         $task->end 
                                    </td>
                                    <td>
                                         $task->duration                              
                                    </td>
                                    <td class="d-flex">

                                <input type="hidden" name="id" value=" $task->id ">
                                <button type="submit" id="end-btn_$task->id" class="btn btn-danger float-right ml-3"
                                @if(!empty($task->end))
                                    disabled
                                @elseif(empty($task->start))
                                    disabled
                                @endif
                                >End</button>
                            </form>

                        </td>

                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

@endsection
@section('reporter')
<script>
        $(document).ready(function() 

        $('#report').DataTable( 
            "bLengthChange": false,
            "lengthMenu": [ 3, 10 ],
            searching: false
        );

        $('#str-btn').click(function(e)
            var id = $(this).data('id');
            $.ajax(
            url: " url('amber/timestone/start') "+'/'+id,
            type: "GET",

            success: function(data)
                console.log(data)
                $("#startTime").text(data.start)
                $("#end-btn_"+id).removeAttr("disabled");
                $("#ref_"+id).removeAttr("readonly");
                $("#remarks_"+id).removeAttr("readonly");
                $("#campaign_"+id).removeAttr("disabled");
                $("#type_"+id).removeAttr("disabled");
                $("#str-btn").Attr("disabled");

            
        )
          $(this).prop("disabled", true);


        );




    );

【问题讨论】：

添加 e.preventDefault();在您的点击功能中阻止页面刷新

【参考方案1】：

您可以在提交时获取您的表单并添加监听器，然后您可以致电event.preventDefault() 以避免刷新。

应该是这样的：

<form action=" route('amber.timestone.home.start') " method="POST" class=" form-data-table align-center"> 

...

javascript 部分：

$('.form-data-table').on('submit', function(event)
    event.preventDefault();
   ... remaining code
)