提交后如何停止重新加载页面

Question

我有一个页面，上面有一个用来问问题的表格。 单击提交按钮后，它会执行以下操作，确定用户是否选中了右侧的框，显示答案和说明，并禁用复选框和提交按钮以防止重新回答问题。 我的问题是，当用户单击“提交”按钮时，答案就会消失，并且在页面重新加载之前，禁用状态仅出现一秒钟。 我该如何停止，我希望用户查看他们是否正确并且无法更改答案。 在构建页面的Dreamweaver中运行它时，它在实时视图中运行良好。

代码如下：

 <!-- Bootstrap --> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" rel="stylesheet" /> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <link href="../styles/casestyles.css" rel="stylesheet" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script type="text/javascript"> </script> <!-- show all on submit and show checked answer --> <script type="text/javascript" src="../js/submit_answers.js"> </script> <!-- Add jQuery library --> <script type="text/javascript" src="fancybox/lib/jquery-1.10.1.min.js"></script> <!-- Add mousewheel plugin (this is optional) --> <script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script> <!-- Add fancyBox main JS and CSS files --> <script type="text/javascript" src="fancybox/source/jquery.fancybox.js?v=2.1.5"></script> <link rel="stylesheet" type="text/css" href="fancybox/source/jquery.fancybox.css?v=2.1.5" media="screen" /> <!-- Add Button helper (this is optional) --> <link rel="stylesheet" type="text/css" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" /> <script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script> <script type="text/javascript" src="../js/fancybox.js"></script> <script type="text/javascript"> /*********************************************** * Limit number of checked checkboxes script- by JavaScript Kit (www.javascriptkit.com) * This notice must stay intact for usage * Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more ***********************************************/ function checkboxlimit(checkgroup, limit){ var checkgroup=checkgroup var limit=limit for (var i=0; i<checkgroup.length; i++){ checkgroup[i].onclick=function(){ var checkedcount=0 for (var i=0; i<checkgroup.length; i++) checkedcount+=(checkgroup[i].checked)? 1 : 0 if (checkedcount>limit){ alert("You can only select a maximum of "+limit+" diagnosis") this.checked=false } } } } </script> <!-- disable checkboxes --> <script type="text/javascript"> function disablefields(){ { document.getElementById('check1').disabled='disabled'; document.getElementById('check2').disabled='disabled'; document.getElementById('check3').disabled='disabled'; document.getElementById('check4').disabled='disabled'; document.getElementById('ex3').disabled='disabled'; document.getElementById('ex3').value='Answers Submitted'; } } </script> </head> <script type="text/javascript"> function myfunction(){ //call disable checkbox disabled(document); //call disable submit checkForm(form) ; } </script> 

 .explanation { display: none; } .correct { display:none; } .incorrect { display:none; }.explanation { display: none; } .correct { display:none; } .incorrect { display:none; } 

 <div class="row-offcanvas row-offcanvas-left"> <div id="sidebar" class="sidebar-offcanvas"> <div class="col-md-12"> <ul class="nav nav-pills nav-stacked"> <li><a href="hpi.html">History of Present Illness </a></li> <li><a href="ros.html">Review of Systems </a></li> <li><a href="pmh.html">Past Medical History </a></li> <li><a href="pe.html">Physical Examination </a></li> <li><a href="differentialdx.html">Essential Differential Diagnosis</a></li> <li><a href="relevant_testing.html">Relevant Testing</a></li> <li><a href="diagnosis.html">Diagnosis</a></li> <li>Treatment</li> <li>Questions</li> <li>About the Case</li> </ul> </div> </div> <form name="limit" onreset="disablefields();" onSubmit="disablefields();" > <div id="main" class="container-fluid"> <div class="col-md-12"> <p class="visible-xs"> <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas"> <i class="glyphicon glyphicon-chevron-left"></i> </button> </p> <!-- Footer Code --> <div id="footer" style="overflow-y:hidden; overflow-x:hidden;"> <div class="container" style="overflow-y:hidden; overflow-x:hidden;"> <p class="muted credit"><img src="img/prev.png" width="24" height="21" / > <a href="relevant_testing.html" > Relevant Testing </a> | <a href="treatment.html" > Treatment </a><img src="img/next.png" width="24" height="21" /> </div> </div> <!-- Change the Heading --> <h3>Diagnosis</h3> <h5>At this time, the most likely diagnosis is</h5> <p>Please choose only one.</p> <!-- First Column--> <div class="col-md-3"> <div class="bootstrap-demo"> <!-- content goes here --> <p style="margin-bottom:0px"> <input id="check1" name="field" type="checkbox" value="incorrect" /> Acute bronchitis</p> <div class="correct" style="margin-left:20px;"><font color="#008000">Correct</font></div> <div class="incorrect" style="margin-left:20px;"><font color="#FF0000">Incorrect</font></div> <div class="explanation" style="margin-left:20px;">Although the patient has a productive cough, he also has an infiltrate on chest x-ray.</div> <p style="margin-bottom:0px"> <input id="check2" name="field" type="checkbox" value="correct" /> Community-acquired pneumonia</p> <div class="correct" style="margin-left:20px;"><font color="#008000">Correct</font></div> <div class="incorrect" style="margin-left:20px;"><font color="#FF0000">Incorrect</font></div> <div class="explanation" style="margin-left:20px;">The chest x-ray shows a definite infiltrate.</div> <p style="margin-bottom:0px"> <input id="check3" name="field" type="checkbox" value="incorrect" /> Health-care associated pneumonia</p> <div class="correct" style="margin-left:20px;"><font color="#008000">Correct</font></div> <div class="incorrect" style="margin-left:20px;"><font color="#FF0000">Incorrect</font></div> <div class="explanation" style="margin-left:20px;">The patient was not a resident in a nursing home or other long-term care facility.</div> <p style="margin-bottom:0px"> <input id="check4" name="field" type="checkbox" value="incorrect" /> Lung cancer</p> <div class="correct" style="margin-left:20px;"><font color="#008000">Correct</font></div> <div class="incorrect" style="margin-left:20px;"><font color="#FF0000">Incorrect</font></div> <div class="explanation" style="margin-left:20px;">Although an obstructing cancer may cause an infiltrate, it is not the most likely cause of this patient&rsquo;s acute symptoms.</div> <p> <br /> <input type="submit" value="Submit" id="ex3" onclick="show_all();" > </p> </div> </div> <!-- Second Column --> <div class="col-md-3"> <div class="bootstrap-demo"> <!-- content goes here --> <p>Click <a class="fancybox fancybox.iframe" href="relevant_testing_all.html">here</a> to see the tests and explanations for this diagnosis</p> </div> </div> <div class="col-md-3"> <img src="../img/patient-001.png" width="231" height="184" alt="Patient 001" /></div> </div> </div> </form> </div> <!-- Bootstrap script --> <script type="text/javascript" language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script type="text/javascript" src="../lightbox/js/lightbox.min.js"></script> <link href="../lightbox/css/lightbox.css" rel="stylesheet" type="text/css" /> <script type='text/javascript'> $(document).ready(function() { $('[data-toggle=offcanvas]').click(function() { $('.row-offcanvas').toggleClass('active'); }); }); </script> <script type="text/javascript"> var one=""; var two=""; function check(browser) { //document.getElementById("answer").value = browser one = browser updateIt() } function check1(browser) { //document.getElementById("answer").value += " " + browser two = browser updateIt() } function updateIt() { document.getElementById("answer").value = one +" "+ two } </script> <!--Script to call limit checkbox code--> <script type="text/javascript"> //Syntax: checkboxlimit(checkbox_reference, limit) checkboxlimit(document.forms.limit.field, 1) </script> 

Answer 1

截至目前，您的代码并不是像您所解释的那样“确定用户是否选中了正确的框，显示答案和解释”，但是这样做还可以，并且易于实现。 这是您问题的答案。

您应使用下面提供的锚标记代码替换id =“ ex3”按钮（anchor标记是为了简单起见，但您可以使用另一个元素来通过click事件调用该函数）。 无论哪种方式，您都不需要提交表单，因为您不会根据所请求的行为发布信息。

<a id="ex3" href="javascript:disablefields()">submit</a>

使用以下命令更新功能：

function disablefields() {
        {


                document.getElementById('check1').disabled = 'disabled';
                document.getElementById('check2').disabled = 'disabled';
                document.getElementById('check3').disabled = 'disabled';
                document.getElementById('check4').disabled = 'disabled';
                document.getElementById('ex3').disabled = 'disabled';
                document.getElementById('ex3').innerHTML = 'Answers Submitted';



        }

    }

然后，您将获得问题中要求的确切行为减去所描述的验证过程。 可以通过条件语句或调用验证函数，然后在有效时调用disablefields函数，将其添加到此解决方案中很容易。

 function formVal() {
            {
     //put all of your validation requirements here and see if 
     var isValid = [check form function here]
    if(isValid){
         disablefields();
    }else {
    //send a message to user to correct fields and do not disable
    }

       <a id="ex3" href="javascript:formVal()">submit</a>   

如果您确实选择在以后某个日期将信息提交给服务器，则只需在disablefields调用之后进行一次AJAX调用以发送表单信息即可。

Answer 2

通过从onClick调用两个函数并将类型更改为button来修复此问题。

  <input type="button" value="Submit" id="ex3" onclick="show_all(); disablefields();" >