在模式中自动单击按钮

Question

我有两个井，每个井都有一个表格。当按下按钮运行时，将显示带有信息输入的模态。该模式中有一个按钮用于确认表单数据并使用 POST.

提交

但是没有点击提交按钮，POST就完成了。我快疯了。

我有以下代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
<head>
<%@include file="common_head.jsp"%>
</head>
<body>
    <%@include file="common_header.jsp"%>
    <div class="row" style="height: 100%; margin-top: -20px;">
        <div class="col-md-2 sidebar ng-scope" style="width: 194.03px;">
            <div class="portal-menu dashboard-menu ng-scope">
                <div class="panel-heading">
                    <h1 class="panel-title ng-binding">Jobs</h1>
                </div>
                <ul class="nav nav-stacked short">
                    <li id="dulcineaBtn" class="row ng-scope" onclick="windowDulcinea()" style="cursor: default"><a class="col-lg-12" style="cursor: default">Dulcinea</a>
                    </li>
                </ul>

            </div>
        </div>
        <div id="contentWrapper" class="col-md-10" style="height: 100%;">
            <div id="contentDulcinea" style="display: none;">
                <div class="col-lg-8" style="margin-top: 20px">
                    <div class="well bs-component">
                        <div class="form-horizontal">
                            <fieldset>
                                <legend>RPA Reset OpenBank DULCINEA at <strong>${target1Dulcinea}</strong></legend>
                                <form id="formDulcinea1" data-toggle="validator">
                                <input type="hidden" id="dulcinea1Target" value="${target1Dulcinea}">
                                <div class="form-group col-lg-10 col-lg-offset-2">
                                    <label class="control-label">List of emails to inform:</label>
                                    <div class="">
                                        <textarea class="form-control" id="dulcinea1Email" rows="2">${email1Dulcinea}</textarea>
                                        <span class="help-block">Add more than one, separating them by comma(,)</span> 
                                    </div>
                                </div>
                                <div class="form-group col-lg-10 col-lg-offset-2">
                                    <label class="control-label">Timeout:</label>
                                    <div class="">
                                        <input type="text" class="form-control" id="dulcinea1Timeout" placeholder="${timeout1Dulcinea}" data-error="That timeout is invalid"/>
                                    </div>
                                <!--/div>
                                <div class="form-group col-lg-10 col-lg-offset-2"-->
                                    <label class="control-label">Environment:</label>
                                    <div class="">
                                        <input type="text" class="form-control" id="dulcinea1Environment" placeholder="${environment1Dulcinea}" />
                                    </div>
                                </div>
                                <div class="form-group col-lg-10 col-lg-offset-2">
                                    <div class=" ">
                                        <button onclick="jobDulcinea()" class="btn btn-sm btn-material-red">Run</button>
                                    </div>
                                </div>
                                </form>
                            </fieldset>
                        </div>
                    </div>
                </div>
            </div>
            <div id="contentDulcinea2" style="display: none;">
                <div class="col-lg-8" style="margin-top: 5px">
                    <div class="well bs-component">
                        <div class="form-horizontal">
                            <fieldset>
                                <legend>RPA Reset OpenBank DULCINEA at <strong>${target2Dulcinea}</strong></legend>
                                <form data-toggle="validator">
                                <input type="hidden" id="dulcinea2Target" value="${target2Dulcinea}">
                                <div class="form-group col-lg-10 col-lg-offset-2">
                                    <label class="control-label">List of emails to inform:</label>
                                    <div class="">
                                        <textarea class="form-control" id="dulcinea2Email" rows="2">${email2Dulcinea}</textarea>
                                        <span class="help-block">Add more than one, separating them by comma(,)</span> 
                                    </div>
                                </div>
                                <div class="form-group col-lg-10 col-lg-offset-2">
                                    <label class="control-label">Timeout:</label>
                                    <div class="">
                                        <input type="text" pattern="^[0-9]*$"  class="form-control" id="dulcinea2Timeout" placeholder="${timeout2Dulcinea}" data-error="That timeout is invalid"/>
                                    </div>
                                <!--/div>
                                <div class="form-group col-lg-10 col-lg-offset-2"-->
                                    <label class="control-label">Environment:</label>
                                    <div class="">
                                        <input type="text" class="form-control" id="dulcinea2Environment" placeholder="${environment2Dulcinea}" />
                                    </div>
                                </div>
                                <div class="form-group col-lg-10 col-lg-offset-2">
                                    <div class=" ">
                                        <button onclick="jobDulcinea2()" class="btn btn-sm btn-material-red">Run</button>
                                    </div>
                                </div>
                                </form>
                            </fieldset>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        </div>

    <!-- Modal shown after clicking -->
    <div class="modal fade" id="myModalDulcinea" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
    <div class="modal-content">

      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabelDulcinea">You are going to reset OpenBank Dulcinea</h4>
      </div>

      <div class="modal-body">
            <div class="form-group">
            <label for="text" class=" control-label">Server(s)</label>
            <input type="hidden" id="hiddenServerDulcinea" />
            <div class="">
            <label class="form-control" id="outputServerDulcinea"></label>
            </div></div>
            <div class="form-group">
            <label for="text" class=" control-label">Email(s)</label>
            <div class="">
            <label class="form-control" id="outputEmailDulcinea"></label>
            </div></div>
            <div class="form-group">
            <label for="text" class=" control-label">Timeout</label>
            <div class="">
            <label class="form-control" id="outputTimeoutDulcinea"></label>
            </div></div>
            <div class="form-group">
            <label for="text" class=" control-label">Environment</label>
            <div class="">
            <label class="form-control" id="outputEnvironmentDulcinea"></label>
            </div></div>
      </div>

      <div class="modal-footer">
      <button id="submitDulcinea" class="btn btn-material-red" onclick="submitDulcinea()">Submit</button>
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>

    <script type="text/javascript">
        function showProgress() {
            $("#progress_bar").height("35px");
        }
        function hideProgress() {
            $("#progress_bar").height("0px");
        }
        function notification(texto,typeM){
            var n = noty({text: texto,
                timeout: 10000, // delay for closing event. Set false for sticky notifications
                layout: 'center',
                type: typeM,
                closeWith: ['backdrop', 'click']
            });
        }
        function windowDulcinea(){
            var windowDulcinea = document.getElementById("contentDulcinea").style.display;
            var windowDulcinea2 = document.getElementById("contentDulcinea2").style.display;
            if (windowDulcinea == "inline"){
                document.getElementById("contentDulcinea").style.display = "none";
                document.getElementById("dulcineaBtn").className = "row ng-scope";
            }else{
                document.getElementById("contentDulcinea").style.display = "inline";
                document.getElementById("dulcineaBtn").className = "row ng-scope active";
            }
            if (windowDulcinea2 == "inline"){
                document.getElementById("contentDulcinea2").style.display = "none";
                document.getElementById("dulcineaBtn").className = "row ng-scope";
            }else{
                document.getElementById("contentDulcinea2").style.display = "inline";
                document.getElementById("dulcineaBtn").className = "row ng-scope active";
            }
        }
        function modalDulcinea(emailDulcinea, timeoutDulcinea, targetDulcinea, environmentDulcinea, number){

            document.getElementById("outputEmailDulcinea").innerHTML = emailDulcinea;
            document.getElementById("outputTimeoutDulcinea").innerHTML = timeoutDulcinea;
            document.getElementById("outputServerDulcinea").innerHTML = targetDulcinea;
            document.getElementById("outputEnvironmentDulcinea").innerHTML = environmentDulcinea;
            document.getElementById("hiddenServerDulcinea").value = number;

        }
        function jobDulcinea(){
            $('#myModalDulcinea').modal({
                keyboard: true
            });
             var emailDulcinea = document.getElementById("dulcinea1Email").value;
             if ( emailDulcinea == "" ){
                 emailDulcinea = document.getElementById("dulcinea1Email").placeholder;
             }
             var timeoutDulcinea = document.getElementById("dulcinea1Timeout").value;
             if ( timeoutDulcinea == "" ){
                 timeoutDulcinea = document.getElementById("dulcinea1Timeout").placeholder;
             }
             var targetDulcinea = document.getElementById("dulcinea1Target").value;
             var environmentDulcinea = document.getElementById("dulcinea1Environment").value;
             if ( environmentDulcinea == "" ){
                 environmentDulcinea = document.getElementById("dulcinea1Environment").placeholder;
             }
             modalDulcinea(emailDulcinea, timeoutDulcinea, targetDulcinea, environmentDulcinea, "1");
        }
        function jobDulcinea2(){
            $('#myModalDulcinea').modal({
                keyboard: true
            });
            var emailDulcinea = document.getElementById("dulcinea2Email").value;
            if ( emailDulcinea == "" ){
                emailDulcinea = document.getElementById("dulcinea2Email").placeholder;
            }
            var timeoutDulcinea = document.getElementById("dulcinea2Timeout").value;
            if ( timeoutDulcinea == "" ){
                timeoutDulcinea = document.getElementById("dulcinea2Timeout").placeholder;
            }
            var targetDulcinea = document.getElementById("dulcinea2Target").value;
            var environmentDulcinea = document.getElementById("dulcinea2Environment").value;
            if ( environmentDulcinea == "" ){
                environmentDulcinea = document.getElementById("dulcinea2Environment").placeholder;
            }
            modalDulcinea(emailDulcinea, timeoutDulcinea, targetDulcinea, environmentDulcinea, "2");
        }
        function submitDulcinea(){
            $('#myModalDulcinea').hide();
            var number = document.getElementById("hiddenServerDulcinea").value;
            var data = { 'emailDulcinea': emailDulcinea, 'timeoutDulcinea': timeoutDulcinea, 'targetDulcinea': targetDulcinea, 'environmentDulcinea': environmentDulcinea, 'numberDulcinea': number };
            $.ajax({
                    type: 'POST',
                    data: data,
                    url: './jobs/dulcinea',
                    
                    success: function(msg){
                        var n = noty({text: 'Dulcinea was reset at '+targetDulcinea,
                            timeout: 10000, // delay for closing event. Set false for sticky notifications
                            layout: 'top',
                            type: 'success',
                            closeWith: ['backdrop', 'click']
                        });
                    },
                    complete: function(jqXHR, textStatus){

                    }}).fail( function( jqXHR, textStatus, errorThrown ) {

                    if (jqXHR.status === 0) {
                        notification('Not connect: Verify Network.','error');
                    } else if (jqXHR.status == 404) {
                        notification('Requested page not found [404]','error');
                    } else if (jqXHR.status == 500) {
                        notification('Internal Server Error [500].','error');
                    } else if (textStatus === 'parsererror') {
                        notification('Requested JSON parse failed.','error');
                    } else if (textStatus === 'timeout') {
                        notification('Time out error.','error');
                    } else if (textStatus === 'abort') {
                        notification('Ajax request aborted.','error');
                    } else {
                        notification('Uncaught Error: ' + jqXHR.responseText,'error');
                    }
                    });
        }

        $(document).ready(function() {
                hideProgress();
        });
    </script>
    <%@include file="common_footer.jsp"%>
</body>
</html>

Answer 1

问题不在于模态按钮，问题在于标签<form>。 form 标记的操作未定义，因此它在单击按钮运行时对 /jobs 执行 GET。

在模式中自动单击按钮

A button is auto clicked in a modal

html

javascript

jsp

jsp-tags

modal-dialog