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

Question

我有一个页面，其中包含用于提问的表单。单击提交按钮时，它会执行以下操作，确定用户是否选中了正确的框，显示答案和解释，并禁用复选框和提交按钮以防止重新回答问题。我的问题是，当用户单击提交按钮时，答案和禁用仅出现一瞬间，然后页面重新加载。我该如何阻止这种情况，我希望用户查看他们是否正确并且无法更改他们的答案。当我在构建页面的 Dreamweaver 中运行它时，它在实时 View 中运行良好。

代码如下:

<!-- 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

截至目前，您的代码并没有像您解释的那样“确定用户是否选中了正确的框，显示答案和解释”，但这没关系，而且之后很容易实现。这是您问题的答案。

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

<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 调用并发送表单信息即可。