We Keep Coding

How to stop reload of page after submit

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>History of Present Illness </li>
<li>Review of Systems </li>
<li>Past Medical History </li>
<li>Physical Examination </li>
<li>Essential Differential Diagnosis</li>
<li>Relevant Testing</li>
<li>Diagnosis</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’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>

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.

Fixed it by calling both function from the onClick and changing the type to button.
<input type="button" value="Submit" id="ex3" onclick="show_all(); disablefields();" >

PopUp Form failed but in JsFiddle, it works

My pop up form is working very well in JSFIDDLE, but not working in my server. The following code:
I don't forget to put in <head>:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="assets/js/loginPopUp/jquery_popup.js"></script>
<script src="assets/js/loginPopUp/jquery_popup.css"></script>
</head>
HTML:
<ul id="topRight-link">
<li> Register </li>
<li id="popUp-login"><img src="">Login</li>
</ul>
<div id="login-PopUp-box">
<form class="form" action="#" id="login">
<h3>Login Form</h3>
<label>Username : </label>
<input type="text" id="username" placeholder="john.wick#yahoo.com"/>
<label>password : </label>
<input type="text" id="password" placeholder="************"/>
<input type="button" id="loginbtn" value="Login"/>
<input type="button" id="cancel" value="Cancel"/>
</form>
</div>
CSS:
#login-PopUp-box {
display:none;
}
Lastly, Script is here:
<script type="text/javascript">
$("#popUp-login").click(function() {
$("#login-PopUp-box").css("display", "block");
});
</script>
And here is JSFIDDLE.
The code in both server and jsfiddle are totally the same. I tried to view source page in the browser, and the files for <head> are staying there. But it's not working in my server. Am I missing something?

JSfiddle is adding JS with onload - so that should work -
$( document ).ready(function() {
console.log( "ready!" );
$("#popUp-login").click(function() {
$("#login-PopUp-box").css("display", "block");
});
});

Write your function as below
<script type="text/javascript">
$(function(){
$("#popUp-login").click(function() {
$("#login-PopUp-box").css("display", "block");
});
});
</script>

Just put this code below. Replace your $("#login-PopUp-box").css("display", "block");
$("#login-PopUp-box").show()

Why javascript auto submit doesn't work in my jsp page?

I have a Java web app, which has a jsp login page, I added a javascript to make it auto login after 3 seconds, but it's not working, the code looks like this :
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="styles/loginForm.css" type="text/css"/>
<link rel="stylesheet" href="styles/body.css" type="text/css"/>
<script type="text/javascript" src="javascript/login.js"></script>
<c:choose>
<c:when test="${browserType.msie}">
<link rel="stylesheet" href="styles/header_ms.css" type="text/css"/>
</c:when>
<c:otherwise>
<link rel="stylesheet" href="styles/header.css" type="text/css"/>
</c:otherwise>
</c:choose>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<title>Support Logon</title>
<script language="javascript" type="text/javascript">
function initialize()
{
alert("Hello = 1");
setTimeout('submitForm()',3000); //delay 3 seconds
alert("Hello = 10");
}
function submitForm()
{
alert("Hello = 2");
// window.document.loginForm.submit();
document.forms["login_form"].submit();
alert("Hello = 3");
}
</script>
</head>
<body onload="initialize()">
<%# include file="header.jsp" %>
<div id="login_body">
<form method="post" action="login.html" name="loginForm">
<div id="login_wrapper">
<div id="login_form">
<div id="login_title">Please Login</div>
<div id="fail_message">${failedLoginMessage}</div>
<div id="user_name">
<div id="name_label">Username:</div>
<div id="name_text"><input name="j_username" size="22" id="textbox" value="${commandBean.j_username}"/></div>
</div>
<div id="password">
<div id="pw_label">Password:</div>
<div id="pw_text"><input type="password" name="j_password" size="22" id="textbox" value="${commandBean.j_password}"/></div>
</div>
<div id="remember_me">
<c:choose>
<c:when test="${commandBean.fail}">
<div id="remember_box"><input name="rememberMe" id="checkbox_style" type="checkbox"/></div>
<div id="remember_label">Remember Me</div>
</c:when>
<c:otherwise>
<div id="remember_box"><input checked="checked" name="rememberMe" id="checkbox_style" type="checkbox"/></div>
<div id="remember_label">Remember Me</div>
</c:otherwise>
</c:choose>
</div>
<div id="submit">
<div id="submit_button"><input name="submit" value="Login" id="button_style" type="submit"/></div>
<div id="clear_button"> <input name="clear" value="Clear" id="button_style" type="button" onclick="clearLoginForm();"/></div>
</div>
I tried all the following, none of them worked :
document.forms["loginForm"].submit();
document.forms["login_form"].submit();
window.document.loginForm.submit();
window.document.login_form.submit();
All I got was :
Hello = 1
Hello = 10
[ delay 3 sec. ]
Hello = 2
In that order, why ? How to auto submit ?

The name of your input button is submit, so when you are calling form.submit() its getting confused with your submit button.
Change the name of your submit button in following line
<div id="submit_button"><input name="submit" value="Login" id="button_style" type="submit"/></div>
and thn following should work
document.forms["loginForm"].submit();
You can find working example of your code here http://jsfiddle.net/Lg7hkepo/

Did you see any script error?
The simplest way to fix,
Put a button to call "submitForm()", click the button to test if that function work, you can also try, give the form id, then change to
document.getElementById("formid").submit(); //use your form id;
Till the button works, you can switch back to auto call the function;

Disable a html form submit button, to enable with a ticked checkbox

I am trying to disable a submit button, and have it be enabled when a checkbox is ticked. Simple example works on jsfiddle
http://jsfiddle.net/8YBu5/522/
But not when trying it in my template (with bootstrap etc).
My template has the checkbox
<input type="checkbox" id="checky">terms and conditions
Then the button
<input type="submit" value="Submit" id="submit" class="btn btn-success btn-lg btn-block">Submit</button>
Then the javascript. Does the javascript need to be at the top or something?
<script type="text/javascript">
$('#submit').attr("disabled","disabled");
$('#checky').click(function(){
if($(this).attr('checked') == true){
$('#submit').removeAttr('disabled');
}
else {
$('#submit').attr("disabled","disabled");
}
});
</script>
Anyone see where I'm going wrong?
Thanks
UPDATE
Thanks for all the suggestions, I've now tried adding the $(document).ready(function() { to the start of my script and changed .attr to .prop , still not working. Little more info: The button isn't disabled from the start, so maybe I'm not referencing the button properly in the function?
UPDATE2
I've tried adding an alert to see if my javascript is being run, but the alert doesn't show, what could this mean?
<script type="text/javascript">
$(document).ready(function() {
alert("Welcome");
$('submit').prop("disabled", true);
$('checky').click(function(){
if($(this).attr('checked') == true){
$('submit').prop("disabled", false);
}
else {
$('submit').prop("disabled", true);
}
});
});
UPDATE3 The javascript is now running, I've added two alerts, to see what is executing.
//<![CDATA[
$(window).load(function(){
$('#postme').attr("disabled","disabled");
$('#checky').click(function(){
if($(this).attr('checked') == true){
alert( "w" );
$('#postme').removeAttr("disabled");
}
else {
alert( "e" );
$('#postme').attr("disabled","disabled");
}
});
});//]]>
When I click the checkbox on or off, I get the e alert, telling me the if statement is always false. Any ideas why?
UPDATE4
The snippet works, just not in my page, alert 2 is always executed, never alert 1
Title
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row padding">
<div class="col-md-12">
<h1></h1>
</div>
</div>
<div class="row padding">
<form id="new_form" action="/page/" method="POST" >
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title"></h3>
</div>
<div class="panel-body">
<div class="col-md-12">
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Creator submission form</h3>
</div>
<div class="panel-body">
<div class="col-md-12">
</div>
</div>
</div>
<br>
<input type="checkbox" id="checky1">
<input type="submit" id="postme1" value="submit">
</form>
</div>
<div class="row padding">
<div class="col-md-12">
</div>
</div>
</div>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#postme1').attr("disabled","disabled");
$('#checky1').click(function(){
if($(this).attr('checked') == true){
$('#postme1').removeAttr('disabled');
}
else {
$('#postme1').attr("disabled","disabled");
}
});
});//]]>
</script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/static/js/bootstrap.min.js"></script>
<div class="container">
<footer>
<hr>
</footer>
</div>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#postme1').attr("disabled","disabled");
$('#checky1').click(function(){
if($(this).attr('checked') == true){
alert("1");
$('#postme1').removeAttr('disabled');
}
else {
alert("2");
$('#postme1').attr("disabled","disabled");
}
});
});//]]>
</script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/static/js/bootstrap.min.js"></script>
</body>
</html>

Your javascript code should be
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#postme').attr("disabled","disabled");
$('#checky').click(function(){
if($(this).attr('checked') == true){
$('#postme').removeAttr('disabled');
}
else {
$('#postme').attr("disabled","disabled");
}
});
});//]]>
</script>
</head>
<body>
<input type="checkbox" id="checky">terms and conditions
<input type="submit" id="postme" value="submit">
</body>
</html>
This snippet is working fine for me.
Update
Use this as click event handler of the checkbox
$('#checky').click(function(){
if($(this).prop('checked')){
$('#postme').removeAttr('disabled');
}
else {
$('#postme').attr("disabled","disabled");
}
});

JSFiddle is a lovely resource. One of the lovely things it does is provide the wrapper for JQuery for you!
Have a little read of this:
Launching Code on Document Ready
To ensure that their code runs after the browser finishes loading the document, many JavaScript programmers wrap their code in an onload function:
window.onload = function() {
alert( "welcome" );
}
Unfortunately, the code doesn't run until all images are finished downloading, including banner ads. To run code as soon as the document is ready to be manipulated, jQuery has a statement known as the ready event:
$( document ).ready(function() {
// Your code here.
});

Make sure your include your <script> after the rest of your html. Or you can wrap it in:
$(document).ready(function() {
// your code here
});
Also you should use .change instead of .click, in case the user uses the keyboard to check the checkbox.

Popup a formatted modal dialog and forward when user acknowledges

I need to pop-up a modal dialog with a warning, wait for the warning to be acknowledged and then forward to a constructed url. My current attempt shows the dialog in the window and immediately forwards.
I need each link (button in the example) to be able to pass a parameter to the final url, thus the need to do it in an onclick. The html will be generated from a jsp.
See following for a demo:
<html>
<head></head>
<body>
<div id='container'>
<input type='button' name='StackOverflow' value='StackOverflow' onClick="Google('StackOverflow')" />
<br />
<br />
<input type='button' name='CodingHorror' value='CodingHorror' onClick="Google('CodingHorror')" />
<br />
<br />
</div>
<div id="dialog" style="display: none">
<em>Going to Google</em>
<hr />
<ul>
<li>No guarantee is made that this will work.</li>
<li>We take no responsibility for the consequences of this action.</li>
</ul>
</div>
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.simplemodal.js'></script>
<script>
function Google(s) {
// Replace this.
//alert("Going to: "+s);
// What to do here to popup a formatted dialog in place of the alert, wait for it to be acknowledged and then proceed with the forward.
// Doesn't work.
jQuery("#dialog").modal();
window.location='http://www.google.co.uk?as_q='+s;
}
</script>
</body>
</html>
You will need jQuery and simplemodal.

Cracked it!! You have to do the forwarding through the onClose.
Note that I am setting the class of my dialog div to simplemodal-close so clicking anywhere in it is considered a close. This is because this is a touch-screen driven tool.
<html>
<head>
<style>
#simplemodal-container {
background-color:#afafaf;
border:solid;
padding:12px;
cursor:pointer
}
</style>
</head>
<body>
<div id='container'>
<br />
<br />
<input type='button' name='StackOverflow' value='StackOverflow' onClick="Google('StackOverflow')" />
<br />
<br />
<input type='button' name='CodingHorror' value='CodingHorror' onClick="Google('CodingHorror')" />
<br />
<br />
</div>
<div id="dialog" class="simplemodal-close" style="display: none">
<em>Going to Google</em>
<hr />
<ul>
<li>No guarantee is made that this will work.</li>
<li>We take no responsibility for the consequences of this action.</li>
</ul>
</div>
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.simplemodal.js'></script>
<script>
function Google(s) {
$.modal($('#dialog'),{
onClose: function (dialog) {
window.location='http://www.google.co.uk?as_q='+s;
}}
);
}
</script>
</body>
</html>