Question

以下结构：

<form method="POST" action="servletName?action=defineAction">
    <button type="submit" class="btn btn-danger btn-xs pull-right cancelButton">Cancel</button>
    <button type="submit" class="btn btn-success btn-xs pull-right saveButton">Save</button>
    <div class="tab-content">
        <div id="Tool" class="tab-pane fade in active">
            code...
        </div>
    </div>
</form>

单击这些按钮时，不会调用表单操作，按钮不执行任何操作。

当我从表单中删除Bootstrap选项卡时，它可以正常工作。

不能选择退出选项卡，因为它们包含必须返回到servlet的信息。

他们是否可以在表单中添加标签？或者定义当我单击某个按钮（在所述页面上）时，该按钮会调用该表单并包含所有信息并将其发送到servlet？

提前致谢。

Answer 1

这对我有用：

//This is the save button which will start the AJAX calls to the servlet.
<button type="submit" class="btn btn-success btn-xs pull-right saveButton" onclick="submitForms()">Save</button>

<script>
            function submitForms(){
                //This didn't work because it stops after the first submit.
                //document.getElementById("form01").submit();
                //document.getElementById("form02").submit();
                //document.getElementById("form03").submit();
                //document.getElementById("form04").submit();
                //document.getElementById("form05").submit();
                //document.getElementById("form06").submit();
                //document.getElementById("form07").submit();

                var $form01 = $(document.getElementById("form01"));
                var $form02 = $(document.getElementById("form02"));
                var $form03 = $(document.getElementById("form03"));
                var $form04 = $(document.getElementById("form04"));
                var $form05 = $(document.getElementById("form05"));
                var $form06 = $(document.getElementById("form06"));
                var $form07 = $(document.getElementById("form07"));

                $.post($form01.attr("action"), $form01.serialize(), function(response) {});
                event.preventDefault();

                $.post($form02.attr("action"), $form02.serialize(), function(response) {});
                event.preventDefault();

                $.post($form03.attr("action"), $form03.serialize(), function(response) {});
                event.preventDefault();

                $.post($form04.attr("action"), $form04.serialize(), function(response) {});
                event.preventDefault();

                $.post($form05.attr("action"), $form05.serialize(), function(response) {});
                event.preventDefault();

                $.post($form06.attr("action"), $form06.serialize(), function(response) {});
                event.preventDefault();

                $.post($form07.attr("action"), $form07.serialize(), function(response) {});
                event.preventDefault();
            }
        </script>

使用Bootstrap选项卡

1 个答案: