HTML页面提交发送到错误的控制器方法

时间：2015-10-01 22:23:59

标签： javascript java jquery html5

我有一个使用Spring Model-View-Controller架构的Web应用程序。网页（视图）使用带有javascript和jquery脚本的HTML5编写。页面模型和控制器的代码是Java。该页面有一个Calculate按钮，当单击该按钮时，提交到控制器的计算例程，该控制器使用页面和先前页面上的输入加载对象，使用该数据进行计算，并在页面上显示结果。有一个显示链接，当点击时，它将转到页面控制器的显示方法，以生成带有输入和计算数据的格式化PDF页面。显示链接不会出现，并且在计算完成之前不会处于活动状态。我的问题是，当我单击“计算”，然后单击“显示”，更改页面上的输入，然后重新单击“计算”时，表单将提交到控制器的显示方法而不是计算方法，从而导致带有旧计算数据的重复PDF它。我在java和javascript中有断点，但我无法跟踪提交是否遵循错误的方法。有人可以查看我下面的代码并给我一些建议，以便如何使其工作，以便第二次单击Calculate按钮时，调用计算方法而不是PDF生成器方法？谢谢。

HTML页面（查看）：

<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>

<!DOCTYPE html>

<html>
<head>
<meta content="IE=9; IE=8; IE=7; IE=EDGE; chrome=1"
    http-equiv="X-UA-Compatible">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="no-cache, no-store, must-revalidate"
    http-equiv="Cache-Control">
<meta content="no-cache" http-equiv="Pragma">
<meta content="0" http-equiv="Expires">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body onload="noBack();restorePage();" onpageshow="if (event.persisted) noBack();" onunload="">
    <form:form method="post" name="calcform" id="calcForm"
        commandName="calcModel" action="calculateAmount.htm">
        <div id="amounts" class="containerauto" style="height: 500px;">
            <table cellspacing="10">
                <tr>
                    <td>Choose Amount1 or Amount2:<span style="color: red"> *</span></td>
                    <td style="padding-left: 5px; padding-top: 0px; width: 125px;">
                        <form:radiobutton
                            style="align:right;" path="amount1OrAmount2Radio" id="amount1Radio"
                            name="asRadio" label="Amount1Radio" required="required"
                            value="amount1RadioValue" /> 
                    </td>
                    <td style="padding-top: 0px; width: 125px;">                        
                        <form:radiobutton
                            align="right" path="amount1OrAmount2Radio" id="amount2Radio" name="asRadio"
                            label="Amount2Radio" required="required" value="amount2RadioValue" />
                    </td>
                </tr>
                <tr>
                    <td><label for="amount1">Amount1:<span style="color: red"> *</span></label></td>
                    <td><form:input id="amount1" name="amount1"
                            path="amount1" type="text" class="form-control NumBox"
                            cssClass="txtbox"  required="required" /></td>
                </tr>
                <tr>
                    <td colspan="3">
                        <form:input path="amount1Error" id="amount1Error" name="amount1Error" 
                                style="color:red; border:0; display:block;" size="122" readonly="true"></form:input>
                    </td>
                </tr>
                <tr>
                    <td><label for="amount2">Amount2:<span style="color: red"> *</span></label></td>
                    <td><form:input id="amount2" name="amount2" maxlength="10" minlength="7"
                            path="amount2" type="text" min="50000" max="1000000"
                            cssClass="txtbox" required="required" onblur="validateAmount2()" /></td>
                </tr>
                <tr>
                    <td><p id="amount2Error" style="font-size:12px; color:red"> </td>
                </tr>
                <tr>
                    <td><label for="pctMarkUp">Percent MarkUp:<span style="color: red"> *</span></label></td>
                    <td><form:select id="pctMarkUp" name="pctMarkUp" path="pctMarkUp"
                            items="${pctMarkUpList}" cssClass="dropdown" required="required" /></td>
                </tr>
                <tr>
                    <td><label for="duration">Duration:<span style="color: red"> *</span></label></td>
                    <td><form:select id="duration" name="duration"
                            path="duration" items="${durationList}"
                            cssClass="dropdown" required="required" /></td>
                </tr>
            </table>
            <table>
                <tr>
                    <td width="100%" align="center" style="width: 978px;">
                        <input type="submit" id="calculateButton" value="Calculate" class="gen-button gen-yellow">
                    </td>                   
                </tr>
            </table>
        </div>
        <div id="calculatedAmountInfo" class="containerauto" style="height: 300px;">
            <table style="width: 950px;" style="padding:0;" style="border:0;"
                style="align:left;" id="tab3">
                <tbody>
                    <tr>
                        <td align="left" style="padding-left: 3px">
                            <h4 style="font-size: 20px">
                                Calculated Amount
                                <hr size="3" style="margin-left: 0px">
                            </h4>
                        </td>
                    </tr>
                </tbody>
            </table>                    
            <table align="center" cellspacing="25">
                <tr>
                    <td id="calcWaitSpinner" align="center" style="text-align:center; padding: 0; margin:0 auto;" ></td>
                    <td colspan="2" align="center" style="font-size:18px;">
                        <span id="calcWaitMessage" style="color: red">Calculating...</span>
                        <label id="calculatedAmount1Label">Calculated Amount 1: 
                            <form:input path="calculatedAmount1" id="calculatedAmount1" name="calculatedAmount1" 
                             style="font-size:18px; border:0;" readonly="true"></form:input>
                        </label>
                        <label id="calculatedAmount2Label">Calculated Amount 2: 
                            <form:input path="calculatedAmount2" id="calculatedAmount2" name="calculatedAmount2" 
                             style="font-size:18px; border:0;" readonly="true"></form:input>
                        </label>
                        <form:input path="errorMessage0" id="errorMessage0" name="errorMessage0" 
                                style="font-size:18px; color:red; border:0; display:block;" size="120" readonly="true"></form:input>
                    </td>
                </tr>                       
            </table>
            <table>
                <tr>
                    <td width="100%" align="center" style="width: 978px;">
                    <a id="PDFButton" class="gen-button gen-yellow" href="javascript:submitAction('PDFgenerate.htm');">Display PDF</a></td>
                </tr>
            </table>
        </div>
    </form:form>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="/jsfolder/js/jquery.datepick.js"></script>
<script src="/jsfolder/js/jquery.ui.datepicker.validation.js"></script>
<script src="/jsfolder/js/civem.js" type="text/javascript"></script>
<script src="/jsfolder/js/jquery.maskMoney.js"></script>
<script src="/jsfolder/js/scripts.js" type="text/javascript"></script>
<script src="/jsfolder/js/date.js" type="text/javascript"></script>
<script src="/jsfolder/js/validation.js" type="text/javascript"></script>
<script>
    $(document).ready(function() {
        $('#amount1Radio').click(function() {
            $('#amount1').removeAttr("disabled");
            $('#amount2').val("");
            $('#amount2').attr("disabled", "disabled");
            $('#amount2Error').text("");
        });
        $('#amount2Radio').click(function() {
            $('#amount2').removeAttr("disabled")
            $('#amount1').val("");
            $('#amount1').attr("disabled", "disabled");
            $('#amount1Error').val("");         
        });
    });
    $(function() {
        $('#amount1').maskMoney({
            prefix : '$',
            precision : 0
        });
        $('#amount2').maskMoney({
            prefix : '$',
            precision : 0
        });
    });
     $(function() {
            // This example uses the rel attribute for the tooltip selectors.
            // The tooltip function will use the data attributes to fill in the tooltip content.
            $('[data-toggle="tooltip"]').tooltip();         
    });     
     $(function() {
            $('#calcForm').submit(function() {
                return validatePageOnCalculate();
            });
    });     
    function submitAction(actionname) {
        if(actionname == "PDFgenerate.htm"){
            document.forms[0].target = '_blank';
        }
        else{
            document.forms[0].target = '';
        }               
        document.forms[0].method = "POST";
        document.forms[0].action = actionname;
        document.forms[0].submit();
    }    
     window.history.forward();
     function noBack() { 
          window.history.forward(); 
     }
    function restorePage() {
        //Restore page to status before Calculate clicked
        if (document.getElementById("amount1Radio").checked) {
            jQuery('#amount1Radio')[0].click(); 
        } else if (document.getElementById("amount2Radio").checked) {
            jQuery('#amount2Radio')[0].click(); 
        }       
        $('#calcWaitSpinner').removeClass('timer-loader');
        document.getElementById("calcWaitSpinner").style.display = "none";
        document.getElementById("calcWaitMessage").style.display = "none";      
        toggleErrorMessageDisplay();        
        if (toggleCalculatedAmountDisplay() == true) { 
            setPDFDisplay();
        } else { 
            setPDFNoDisplay();
        }
        $('#calculateButton').removeAttr("disabled");
    }
    function validatePageOnCalculate() {
        clearAmount1Error(); 
        clearGeneralError();
        setCalculatedAmountNoDisplay();
        setPDFNoDisplay();
        if (validateAmount2()) {
            if (validateAmount1()) {
                if (document.getElementById("amount1Radio").checked == false && document.getElementById("amount2Radio").checked == false) {
                    return false;
                } else {
                    if ((document.getElementById("amount2").value == null || document.getElementById("amount2").value.trim() == "") && 
                        (document.getElementById("amount1").value == null || document.getElementById("amount1").value.trim() == "")) {
                        return false;
                    } else {
                        if (document.getElementById("pctMarkUp").value == null || document.getElementById("pctMarkUp").value.trim() == "") {
                            return false;
                        } else {
                            if (document.getElementById("duration").value == null || document.getElementById("duration").value.trim() == "") {
                                return false;
                            } else {
                                $('#calcWaitSpinner').addClass('timer-loader');
                                document.getElementById("calcWaitSpinner").style.display = "inline";
                                document.getElementById("calcWaitMessage").style.display = "inline";
                                $('#calculateButton').attr("disabled", "disabled");
                                return true;
                            }
                        }
                    }
                }
            } else {
                return false;
            }
        } else {
            return false;
        }
    }
    function validateAmount2() 
    {  
        if(document.getElementById("amount2Radio").checked == true)
        {
            var amount2Text = document.getElementById('amount2').value;
            if (amount2Text != null && amount2Text.trim() != "")
            { 
                var amount2 = Number(amount2Text.replace(/[^0-9\.]+/g,"")).toFixed(0);
                if (amount2 < 100 || amount2 > 5000000) 
                {  
                    document.getElementById("amount2Error").style.display = "block";
                    document.getElementById('amount2Error').innerHTML = "Please enter an amount between $100 - $5,000,000.";
                    return false;  
                }
                else 
                {
                    document.getElementById('amount2Error').innerHTML = "";
                    document.getElementById("amount2Error").style.display = "none";
                    return true;
                }
            }
            else 
            {
                document.getElementById("amount2Error").style.display = "block";
                document.getElementById('amount2Error').innerHTML = "Please enter an amount between $100 - $5,000,000.";
                return false;  
            }
        }
        else 
        {
            document.getElementById('amount2Error').innerHTML = "";
            document.getElementById('amount2').innerHTML = "";
            document.getElementById("amount2Error").style.display = "none";
            return true;
        }
    }
    function validateAmount1() 
    {  
        if(document.getElementById("amount1Radio").checked == true)
        {
            var Amount1Text = document.getElementById('amount1').value;
            if (Amount1Text != null && Amount1Text.trim() != "")
            { 
                clearAmount1Error();
                return true;  
            }
            else 
            {
                document.getElementById("amount1Error").style.display = "block";
                document.getElementById('amount1Error').value = "Please enter an amount";
                return false;  
            }
        }
        else 
        {
            clearAmount1Error();
            return true;
        }
    }
    function clearAmount1Error() {  
        document.getElementById("amount1Error").value="";
        document.getElementById("amount1Error").style.display = "none";
    }
    function clearGeneralError() {  
        document.getElementById("errorMessage0").value="";
        document.getElementById("errorMessage0").style.display = "none";
    }
    function toggleCalculatedAmountDisplay() {

        var generalError = document.getElementById("errorMessage0").value;
        var amount1Error = document.getElementById("amount1Error").value;

        if (generalError == null || generalError == "") {
            if (amount1Error == null || amount1Error == "") {
                if (document.getElementById("amount1Radio").checked) {
                    document.getElementById("calculatedAmount1Label").style.display = "inline-block";
                    document.getElementById("calculatedAmount1").style.display = "inline-block";
                    document.getElementById("calculatedAmount2").style.display = "none";
                    document.getElementById("calculatedAmount2Label").style.display = "none";
                    return true;
                } else if (document.getElementById("amount2Radio").checked) {
                    document.getElementById("calculatedAmount2Label").style.display = "inline-block";
                    document.getElementById("calculatedAmount2").style.display = "inline-block";
                    document.getElementById("calculatedAmount1Label").style.display = "none";
                    document.getElementById("calculatedAmount1").style.display = "none";
                    return true;
                } else {
                    setCalculatedAmountNoDisplay();
                    return false;  
                }
            } else {
                setCalculatedAmountNoDisplay();
                return false;  
            }
        } else {
            setCalculatedAmountNoDisplay();
            return false;  
        }
    }
    function toggleErrorMessageDisplay() {

        var generalError = document.getElementById("errorMessage0").value;
        var amount1Error = document.getElementById("amount1Error").value;
        var amount2Error = document.getElementById("amount2Error").value;

        if (generalError == null || generalError == "") {
            document.getElementById("errorMessage0").style.display = "none";
        } else {
            if (document.getElementById("amount1Radio").checked == false && document.getElementById("amount2Radio").checked == false) {
                document.getElementById("errorMessage0").style.display = "none";
            } else {
                document.getElementById("errorMessage0").style.display = "block";
            }
        }

        if (amount1Error == null || amount1Error == "") {
            document.getElementById("amount1Error").style.display = "none";
        } else {
            if (document.getElementById("amount2Radio").checked) {
                document.getElementById("amount1Error").style.display = "none";
            } else {                
                document.getElementById("amount1Error").style.display = "block";
            }
        }

        if (amount2Error == null || amount2Error == "") {
            document.getElementById("amount2Error").style.display = "none";
        } else {
            if (document.getElementById("amount1Radio").checked) {
                document.getElementById("amount2Error").style.display = "none";
            } else {                
                document.getElementById("amount2Error").style.display = "block";
            }
        }

    }
    function setCalculatedAmountNoDisplay() { 
        document.getElementById("calculatedAmount1Label").style.display = "none";
        document.getElementById("calculatedAmount2Label").style.display = "none";
        document.getElementById("calculatedAmount1").style.display = "none";
        document.getElementById("calculatedAmount2").style.display = "none";
    }
    function setPDFNoDisplay() { 
        $('#PDFButton').attr("disabled", "disabled");
        document.getElementById("PDFButtonLabel").style.display = "none";
        document.getElementById("PDFButton").style.display = "none";
    }   
    function setPDFDisplay() { 
        document.getElementById("PDFButtonLabel").style.display = "block";
        document.getElementById("PDFButton").style.display = "block";
        $('#PDFButton').removeAttr("disabled");
    }   
</script>
</body>
</html>

控制器代码（在适当的Java导入之后）：

@Controller
public class CalcFormController extends BaseController {

    @Autowired
    @Qualifier("loggingAspect")
    private LoggingAspect logger;

    @Autowired
    @Qualifier("AMOUNTSERVICE")
    private AmountService amountService;

    public LoggingAspect getLogger() {
        return logger;
    }

    public void setLogger(LoggingAspect logger) {
        this.logger = logger;
    }

    @RequestMapping(value = {"/inputPage"}, method = RequestMethod.POST)
    public ModelAndView inputPage(@Valid @ModelAttribute("priorPageModel") PriorPageModel priorPageModel,
            BindingResult result, HttpServletRequest request,
            HttpServletResponse response)
            throws SystemException {

        //This is the controller method to fire to display the page above (view)

        SessionHolder sessionHolder=this.getSessionHolder(request);

        PriorPageValues priorPageValues = populatePriorPageValues(priorPageModel);

        sessionHolder.setPriorPageValues(priorPageValues);

        InputPageModel inputPageModel = new InputPageModel();
        InputPageValues inputPageValues = null;

        if(sessionHolder.getInputPageValues() != null)
        {
            inputPageValues = sessionHolder.getInputPageValues();           
            inputPageModel = populateInputPageModel(inputPageValues, inputPageModel);           
        }   

        ModelAndView mav = new ModelAndView("inputPage", "inputPageModel", inputPageModel);

        return mav;     
    }

    @RequestMapping(value = {"calculateAmount"}, method = RequestMethod.POST)
    public ModelAndView calculateAmount(@Valid @ModelAttribute("calculateAmount") CalcModel calcModel,
            BindingResult result, HttpServletRequest request,
            HttpServletResponse response)
            throws SystemException {
//Do Calcs here
            return mav;
    }

    @RequestMapping(value = {"PDFgenerate"}, method = RequestMethod.POST)
    public ModelAndView pdfGenerator(@Valid @ModelAttribute("PDFgenerate") CalcModel calcModel,
            BindingResult result, HttpServletRequest request,
            HttpServletResponse response)
            throws Exception {
//PDF generating code here
    return mav;
    }

0 个答案:

没有答案
相关问题
最新问题