Boot Strape 向窗体添加隐藏按钮，如何防止？答案

【问题标题】：Boot Strape add hidden Button to form,how to prevent it?Boot Strape 向窗体添加隐藏按钮，如何防止？
【发布时间】：2018-01-09 04:07:27
【问题描述】：

我有使用引导验证器验证的表单，但是当我提交表单时，它重定向到当前 url 而不是指定的操作 url，这只是因为引导验证器添加了隐藏按钮到表单。关于如何阻止这种情况的任何建议？

以下是我的表格

<div class="form_videos">
 <form id="webLinkForm" method="POST" name="webLinkForm" action="{{url('/')}}/adminarea/videos/savelink" data-toggle="validator" role="form" >
            <input type="hidden" id="itemID" name="itemID" value="{{$itemID}}">
                <input type="hidden" id="videoTypeID" name="videoTypeID" value="{{$videoTypeID}}">
                <input type="hidden" id="videoID" name="videoID" value="">
                <input type="hidden" id="method" name="method" value="add">
                <div class="form-group">
                        <label>Video Link</label>
                        <a href="#"><img src="{{ url('/') }}/components/images/help_icon.png" alt="Help" title="" /></a>
                        <input type="text" name="weblink" id="weblink" class="form-control">
                </div>
                <div class="form-group">
                        <label>Video Title</label>
                        <input type="text" name="caption" id="caption" class="form-control">
                </div>
                <div class="form-group">
                        <label>Video Description</label>
                        <textarea class="form-control textarea" id="description" name="description" maxlength="150"></textarea>
                </div>
                <div class="form-group">
                        <input type="submit" value="Save Link" form="webLinkForm">
                </div>
        </form>
        <br/>
</div>

以下是我在 document.ready 上的 js 代码 $('#webLinkForm').bootstrapValidator({ 框架：'引导'，图标： { 有效：'glyphicon glyphicon-ok', 无效：'glyphicon glyphicon-remove', 验证：'glyphicon glyphicon-refresh' }, 字段：{ 网页链接： { message: '请输入视频链接。', 验证器： { notEmpty:{message: '请输入视频链接'}, } }, 标题：{ message: '请输入标题。', 验证器： { notEmpty:{message: '请输入标题。'}, } } } });

【问题讨论】：

将隐藏按钮标记为按钮未提交。 <input type='button' ... />
你能告诉我们你的尝试吗？
但是它是由引导程序动态添加的，我该如何防止它？
希望您应该将提交按钮从表单中移开。并在表格外插入。
那么表单将如何提交？

标签： twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

<div class="form_videos">
 <form id="webLinkForm" method="POST" name="webLinkForm" action="{{url('/')}}/adminarea/videos/savelink" data-toggle="validator" role="form" >
            <input hidden="hidden" id="itemID" name="itemID" value="{{$itemID}}">
                <input hidden="hidden" id="videoTypeID" name="videoTypeID" value="{{$videoTypeID}}">
                <input hidden="hidden" id="videoID" name="videoID" value="">
                <input hidden="hidden" id="method" name="method" value="add">
                <div class="form-group">
                        <label>Video Link</label>
                        <a href="#"><img src="{{ url('/') }}/components/images/help_icon.png" alt="Help" title="" /></a>
                        <input type="text" name="weblink" id="weblink" class="form-control">
                </div>
                <div class="form-group">
                        <label>Video Title</label>
                        <input type="text" name="caption" id="caption" class="form-control">
                </div>
                <div class="form-group">
                        <label>Video Description</label>
                        <textarea class="form-control textarea" id="description" name="description" maxlength="150"></textarea>
                </div>
                <div class="form-group">
                        <input type="submit" value="Save Link" form="webLinkForm">
                </div>
        </form>
        <br/>
</div>

【讨论】：