我有两个井，每个井都有一个表格。当按下 RUN 按钮时，会显示一个带有信息输入的模态。该模式中有一个按钮用于确认表单数据并通过 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">×</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>
最佳答案
问题不是模态按钮，问题是标签<form> 。
form 的操作标签未定义，因此它正在对 /jobs 执行 GET当单击“运行”按钮时。
关于javascript - 在模态中自动单击按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37454986/