How to stop reload of page after submit

Question

I have a page with a form that is being used to ask a question. When the submit button is clicked, it does the follow, determines if the user checked the right box, displays the answer and explanation, and disables the checkboxes and submit button to prevent re-answering the question. My issue is that when the user clicks the submit button the answers, and the disabling appear for only a split second before the page reloads. How do I stop this, I want the user to see if they are correct and not be able to change their answers. When I run it in Dreamweaver where I am building the pages, it runs fine in live view.

Code is below:

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

As of right now your code is not "determining if the user checked the right box, displaying the answer and explanation" as you explained but that is OK and easy to implement after. Here is the answer to your question.

You should replace your id="ex3" button with the anchor tag code provided below (anchor tag is for simplicity but you can use another element to call the function with a click event). Either way, you do not need to submit a form as you are not posting information according to your requested behavior.

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

Update your function with this:

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



        }

    }

You will then get the exact behavior requested in your question minus the validation process that you described. It is easy to add that to this solution with a conditional statement or calling a validation function and then if valid calling the disablefields function.

 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>   

If you do choose to submit the information to the server at some later date simply make an AJAX call sending the form information after your disablefields call.

Answer 2

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

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