Как остановить перезагрузку страницы после отправки

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){ 
 
\t var checkgroup=checkgroup 
 
\t var limit=limit 
 
\t for (var i=0; i<checkgroup.length; i++){ 
 
\t \t checkgroup[i].onclick=function(){ 
 
\t \t var checkedcount=0 
 
\t \t for (var i=0; i<checkgroup.length; i++) 
 
\t \t \t checkedcount+=(checkgroup[i].checked)? 1 : 0 
 
\t \t if (checkedcount>limit){ 
 
\t \t \t alert("You can only select a maximum of "+limit+" diagnosis") 
 
\t \t \t this.checked=false 
 
\t \t \t } 
 
\t \t } 
 
\t } 
 
} 
 

 
</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"> 
 
\t function myfunction(){ 
 
\t //call disable checkbox 
 
\t disabled(document); 
 
\t //call disable submit 
 
\t checkForm(form) ; 
 
\t } 
 
    </script>

.explanation { 
 
\t display: none; 
 
} 
 
.correct { 
 
\t display:none; 
 
} 
 
.incorrect { 
 
\t display:none; 
 
}.explanation { 
 
\t display: none; 
 
} 
 
.correct { 
 
\t display:none; 
 
} 
 
.incorrect { 
 
\t 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" с приведенным ниже кодом тега привязки (якорный тэг для простоты, но вы можете использовать другой элемент для вызова функции с событием клика). В любом случае вам не нужно отправлять форму, поскольку вы не публикуете информацию в соответствии с запрошенным поведением.

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

Если вы решите отправить информацию на сервер на более позднем этапе просто сделать вызов AJAX отправки информации формы после того, как ваш disablefields позвонить.

Answer 2

Исправлено это путем вызова обеих функций из onClick и изменения типа на кнопку.

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