Why is my html only loading one of my two javascript scripts? - javascript

The issue I am experiencing is a frustrating one. I have tried both in my localhost and codepen to fix this but I can not figure out the issue. Essentially I have two Javascript, one runs a news feed, and one is meant to run a ticker-tape for the DOW. However, they will not run simultaneously. Any help would be greatly appreciated.
Note: This is all built on a bootstrap CSS.
<head>
<meta charset="utf-8" content="width=device-width initial-scale=1">
<title>Predictive Trades</title>
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<link rel="stylesheet" href="{% static 'css/fixed.css' %}">
<link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">
</head>
<body>
<!--- Start Landing Page Section --->
<div class="landing">
<div class="home-wrap">
<div class="home-inner">
</div>
</div>
</div>
<div class="caption text-center">
<h1>Advanced Market Analytics</h1>
<h3>Enter Company Below to get Started</h3>
<div class="container h-100">
<div class="d-flex justify-content-center h-100">
<div class="searchbar">
<input class="search_input" type="text" name="" placeholder="Search...">
<i class="fas fa-search"></i>
</div>
</div>
</div>
</div>
<div intrinio-widget-type="ticker_tape" intrinio-widget-tickers="DOW30">
<script>
(function(f,i,n,t,e,c,h){f['IntrinioWidgetsObject']=e;f[e]=f[e]||function(){
(f[e].q=f[e].q||[]).push(arguments)},f[e].l=1*new Date();c=i.createElement(n),
h=i.getElementsByTagName(n)[0];c.async=1;c.src=t;h.parentNode.insertBefore(c,h)
})(window,document,'script','https://widget-api-cdn.intrinio.com/intrinio-widgets.min.js','iw');
iw('initialize', {userId: '2095ee9f024bec258d15150a90bbe843bdd1271613906cd7b5125229f23d654b'})
</script>
</div>
<!--- End Landing Page Section --->
</div>
<!--- End Home Section --->
<!--- Start Market Section --->
<div id="market" class="offset">
<div class="col-12">
<h1 class="heading">Today's Highlights</h1>
</div>
<div class="jumbotron">
<div class="narrow">
</div>
</div>
</div><!--- End narrow --->
</div><!--- End jumbotron --->
<div id=news class="text-white-50">
<script>
window.onload= function() {
news();
}
function news() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("news").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "https://cloud.iexapis.com/stable/stock/spy/news/last/5?token=tpk_6925213461cb489b8c04a632e18c25dd", false);
xhttp.send();
}
</script>
</div>
</div><!--- End Market Section --->
<script type="text/javascript" src="js/news.js"></script>
<script src="js/jquery-3.4.1.min.js"></script>
<script src='js/bootstrap.js'></script>
<script src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script>
<!--- End Script Source Files --->
</body>


Use this to load your news. You where using window.onload and I guessed your other function was preventing the window to be loaded fully, this way its fired soon as dom is ready.
<div id=news class="text-white-50">
<script>
document.onreadystatechange = function(e)
{
if (document.readyState === 'complete')
{
news();
}
};
</script>
</div>
You can find more info here:
How to execute code before window.load and after DOM has been loaded?

Related

How to load individual HTML file into div content

i am using this animation on my website.
https://codepen.io/alvarotrigo/pen/YzYbdxV
I'm trying to figure out how to load a individual file into the content of each box.
So every box doesn't have the same content.
I've already written a method in my JS file:
function loadHTML (id, filename) {
console.log(`div id: ${id}, filename: ${filename}`);
let xhttp;
let element = document.getElementById(id);
let file = "/electronic_projects/" + (filename.replace(/\s/g, '_') + ".html").toLowerCase();
if (file) {
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {
console.log(this.responseText);
if (this.status == 200) {element.innerHTML = this.responseText;}
if (this.status == 404) {element.innerHTML = "<h1>Page not found.</h1>";}
}
}
xhttp.open("GET", file, true);
xhttp.send();
return;
}
}
It takes the ID of my div and the HTML file, which i want to load.
It does work if i give it the exact name of the file.
What i can't get to work is, that it loads a html file, which is the same as the boxes name (declared on top of the JS file).
Does anybody have an idea for that?
Thanks very much!
This is my modified html approach:
<!doctype html>
<html>
<style>
#ep {
text-decoration: underline #0088a9;
text-underline-offset: 5px;
}
</style>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway:200" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="style.css" type="text/css"/>
<link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
<link rel="stylesheet" href="projects_style.css" type="text/css">
<script src="electronic_projects_script.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Electronic Projects</title>
</head>
<body>
<header>
<a class="logo" href="index.html">COPPER CREW</a>
<nav>
<ul class="nav_links">
<li><a id="ep" href="electronic_projects.html">Electronic Projects</a></li>
<li><a id="sp" href="software_projects.html">Software Projects</a></li>
<li><a id="a" href="">About</a></li>
</ul>
</nav>
</header>
<div class="container" ng-class="{'no-scroll': selected.length}" ng-app="app" ng-controller="mainCtrl">
<div class="page">
<div class="grid">
<div class="grid-item" ng-repeat="item in boxes">
<box class="box" id="box" item="item" on-select="selectBox" ng-class="{'selected': selected[0].item.name == item.name}" onclick="loadHTML('content', filename=selected)"></box>
</div>
</div>
</div>
<div class="fullscreen-background top-up" ng-show="selected.length" ng-style="{'background-image': 'url(' + selected[0].item.image + ')'}"></div>
<div class="scroller" ng-show="selected.length">
<a class="close-button" ng-click="clearSelection()">
<i class="material-icons">close</i>
</a>
<h1 id="name">{{selected[0].item.name}}</h1>
<div big-box ng-repeat="item in selected" class="box on-top" position="item.position" selected="item.item">
<img ng-src="{{item.item.image}}" alt="" />
<div class="content" id="content">
</div>
</div>
</div>
</div>
</body>
</html>

Functions In An Array & in addition, Using Time Intervals If Possible

To Summarize, I am trying to build a game that runs through questions with a timer, but not through a single timer, having each question go for 10 seconds and then reset when the 10 seconds are up. I'm very new to JavaScript so I am completely open to any advice. But I am trying to set these functions within an array and I keep getting an error saying that the function within the array doesn't exist, but it does and i've seen it work before. Am I applying the method wrong? and am I misusing the timer function?
$(document).ready(function(){
var arrayOfQuestions = [
intro(),
question1()
]
var time = 100;
function intro(){
$("#questions").html('<h6>Welcome, In this game, You will be presented with a small portion of a song and your goal is to guess the next couple of lyrics. Good Luck</h6>');
}
function question1(){
console.log("Question 1");
$("#questions").html('<h2>"Do You Remeber? The..."</h2>');
var ans1 = $("#pot-ans-1").html("<p>21st Night of September...</p>");
var ans2 = $("#pot-ans-2").html("<p>The Way...</p>");
var ans3 = $("#pot-ans-3").html("<p>How the stars stole the night away...</p>");
var ans4 = $("#pot-ans-4").html("<p>My thoughts are with you...</p>");
};
function timer() {
setTimeout(function() {
time--; //its a countdown so we are looking for decerements specifically
var secs = Math.floor(time/10);
var tenths = time % 10;
document.getElementById("timer").innerHTML = secs + ":" + tenths;
timer();
if(secs === -1) {
time = 100;
$("#timer").html("");
alert("Next Question");
};
},100);
}
$(document).ready(function(){
timer();
for (i = 0; i < arrayOfQuestions.length; i++) {
arrayOfQuestions[i]();
}
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Louis Pierre Questionaire</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" media="screen" href="assets/css/style.css" />
</head>
<body>
<div id="container">
<div class="row">
<div class="col-md-12">
<center><ins>
<h1 class="Top">Welcome To Pernell's Trivia!</h1>
</ins></center>
</div>
</div>
<div class="row">
<div class="col-md-12">
<center>
<h1 class="under">Complete the song phrase!</h1>
</center>
</div>
</div>
<!-- <p class="empty space"></p> -->
<div class="ratio-c-w">
<center>
<p class="Correct"></p>
<p class="Wrong"></p>
</center>
</div>
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-8">
<center>
<p class="timer" id="timer"></p>
</center>
</div>
<div class="col-md-2">
</div>
</div>
<div class="qContainer"> <!--contains both the question and the buttons in an entire div-->
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8" id="questions-div">
<center>
<div id="questions" class="question"></div>
</center>
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<center>
<div id="buttons">
<button id="pot-ans-1" type="button" class="btn btn-secondary"></button>
<button id="pot-ans-2" type="button" class="btn btn-secondary"></button>
<button id="pot-ans-3" type="button" class="btn btn-secondary"></button>
<button id="pot-ans-4" type="button" class="btn btn-secondary"></button>
</div>
</center>
</div>
<div class="col-md-2"></div>
</div>
</div>
</div>
<!-- Scripts -->
<div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="assets/javascript/app.js"></script>
</div>
</body>
</html>

I suggest you to:
remove the "()" statement at the end of the function call during the navigation loop of the array in order to have this arrayOfQuestions[i];, I think that the index element you are calling it's already a function and it doesn't need another "()" (I tested it here on JSFiddle and it seems to work)
modify the second argument of setTimeout() in 1000 instead of 100 since it expresses milliseconds and I grant you'll have a real 10 seconds timeout (;
Have a nice coding (;

Calling a form in a JSP page in another JSP page div through javascript

I am currently working on Spring tool Suite. And I have the following project structure.
I am trying to display the form that I have created in my tableSelectForm.jsp in a properties panel div that I have in my veditor.jsp view. I am trying to append the form by creating an iframe through javascript from the veditor.js script that I have under resources/js/taro/Customscripts and set the link to the tabelSelectForm.jsp and then append the iframe to the div in the veditor.jsp.
tabelSelectForm.jsp
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<form class="form-horizontal" id="tabelSelectForm">
<fieldset>
</head>
<body>
<!-- Form Name -->
<legend>Table Selection</legend>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-6 control-label"> Select a Table out of the options to start querying from that table</label>
<br>
<label class="col-md-4 control-label" for="streamSelect">Table</label>
<div class="col-md-4">
<select id="streamSelect" name="streamSelect" class="form-control">
<option value="voidopt">Select an option</option>
</select>
</div>
</div>
<!-- Button (Double) -->
<div class="form-group">
<label class="col-md-4 control-label" for="tableFormConfirmButton">Confirm</label>
<div class="col-md-8">
<button id="tableFormConfirmButton" name="tableFormConfirmButton" class="btn btn-primary">Confirm</button>
<button id="tableFormCancelButton" name="tableFormCancelButton" class="btn btn-danger">Cancel</button>
</div>
</div>
</fieldset>
</form>
</body>
</html>
veditor.jsp
...
<script src="resources/js/taro/Customscripts/veditor.js" type="text/javascript"></script>
...
<!--Container/Canvas-->
<div id="container" class="container">
</div>
<div style="float: left" class="property" id="propertypane">
<h1 class="toolbox-titlex" id="toolbox-titlex">Properties</h1>
<div class="panel" id="lot"></div>
</div>
veditor.js
...
function callTableForm(newAgent, i, e, mouseTop, mouseLeft,elemType)
{
$(".property").show();
$(".property").show();
var iframe = document.createElement('iframe');
iframe.frameBorder=0;
iframe.width="inherit";
iframe.height="inherit";
iframe.id="randomid";
document.getElementById("lot").appendChild(iframe);
$("property").show();
$(".toolbox-titlex").show();
$(".panel").show();
$( "#randomid" ).load( "/tableSelectForm.jsp" );
}
I am currently getting an output as shown here. Under the properties panel, I showld be able to display the form in tableSelectForm.jsp.
I doubt that I am encountering this error due to the incorrect link that I've set in the iframe as var link = "/tableSelectForm.jsp" in my veditor.js
This is the error that I am encountering.
And this is the Project structure along with the modified veditor.js script function.
I would really appreciate a solution to change this path so that I could diplay the form under the properties.
Thanks in advance.

This is will you need jquery.load, this is a better solution than using iframes.
$( "#result" ).load( "/your_jsp_page_html_conten.jsp" );

Saving data from a page in the local storage

This is my first time asking or doing this type of question
So I created this page http://lamp.cse.fau.edu/~mcuervo5/p4/
and it does your basic to do app list thing for adding and deleting stuff.
Apparently the only thing missing is to save the data on the current page. I heard that there a code that can save the current page to a local storage that has everything already in it, so when I re-open the link, instead of having nothing in the "complete and incomplete" list, it should look like this
thanks, it the only part I have left to do & I dont know if it implemented in HTMl or Jquery. I do not know how to do it.
and if you want to see the code here instead of "inspect" from the page with the link above, here it is. for html and Jquery
$(document).ready(function() {
// $('#list').innerhtml = localStorage.getItem("List");
//$('#incomplete-tasks').html("<P>I just replaced your stuff.</P>");
$("#Sumbit_Button").click(function() {
var textbox_Value = $("#textbox").val();
$('#incomplete-tasks').append('<li><span class="text" contenteditable="false">' + textbox_Value + "</span>" +
'<input/ style="display: none" class="new-value">' +
"<button type='button' class='delete'>Delete</button>" +
"<button type='button' class='edit'>Edit</button></li>");
});
$('#incomplete-tasks').on('click', '.delete', function() {
console.log('i am clicked.delete');
$(this).parent().remove();
});
$('#incomplete-tasks').on('click', '.edit', function() {
console.log("complete task click.edit");
$(this).siblings('input').show();
$(this).siblings('.delete').hide();
$(this).hide();
});
$('#incomplete-tasks').on('click', '.edit', function() {
console.log("INcomplete task click.edit");
$(this).siblings('input').show();
$(this).siblings('span').hide();
$(this).siblings('.delete').hide();
$(this).hide();
});
$('#incomplete-tasks').on('keyup', '.new-value', function(e) {
if (e.keyCode == 13) {
console.log("Complete Task _Version 2.new_value");
$(this).siblings('span').text($(this).val()).show();
$(this).siblings('input').hide();
$(this).siblings('.delete').show();
$(this).siblings('.edit').show();
$(this).hide();
}
});
$('#incomplete-tasks').on('click', '.text', function() {
var li = $(this).parent().remove().toggleClass("strikethrough");
$('#complete-tasks').append(li);
});
$('#complete-tasks').on('click', '.delete', function() {
console.log('i am clicked.delete');
$(this).parent().remove();
});
$('#complete-tasks').on('click', '.edit', function() {
console.log("complete task click.edit");
$(this).siblings('input').show();
$(this).siblings('.delete').hide();
$(this).hide();
});
$('#complete-tasks').on('click', '.edit', function() {
console.log("INcomplete task click.edit");
$(this).siblings('input').show();
$(this).siblings('span').hide();
$(this).siblings('.delete').hide();
$(this).hide();
});
$('#complete-tasks').on('keyup', '.new-value', function(e) {
if (e.keyCode == 13) {
console.log("Complete Task _Version 2.new_value");
$(this).siblings('span').text($(this).val()).show();
$(this).siblings('input').hide();
$(this).siblings('.delete').show();
$(this).siblings('.edit').show();
$(this).hide();
}
});
$('#complete-tasks').on('click', '.text', function() {
var li = $(this).parent().remove().toggleClass("strikethrough");
$('#incomplete-tasks').append(li);
});
// var save()
//{
// localStorage.setItem("List", $("#list").innerhtml());
// }
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>The Reminder list</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Custom CSS -->
<link href="css/heroic-features.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]-->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">To Do List</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
<!-- Jumbotron Header -->
<header class="jumbotron hero-spacer">
<h1> The Reminder Friend App </h1>
<p>this is my to do list app. type in the list you want to add & store in the list
</p>
<form>
<!-- textbox -->
<input type="text" id="textbox">
<!--add button -->
<input type="button" id="Sumbit_Button" value="Add">
</form>
</header>
<hr>
<div id='lists'>
<!-- Page Features -->
<div class="row text-center">
<div class="col-md-6 col-sm-6 hero-feature">
<div class="thumbnail">
<div class="caption">
<h3>Incomplete</h3>
<ul id="incomplete-tasks">
</ul>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 hero-feature">
<div class="thumbnail">
<div class="caption">
<h3>Complete</h3>
<ul id="complete-tasks">
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- /.row -->
<hr>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Mauricio Cuervo 2017</p>
</div>
</div>
</footer>
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
<script src="p4.js"></script>
</html>

Hello you can do something like this:
$("#Sumbit_Button").click(function() {
var textbox_Value = $("#textbox").val();
var list = [];
list.push(textbox_Value);
localStorage.setItem("listdata", list);
// do not manage using `append` whole html. Manage through list and display as you want
});
on page load call:
var stored = localStorage.getItem("listdata");
Now here you can manage array of items and iterate on complete & incomplete list.
So whenever any action of edit, delete, add occurs you have to just manage the localstorage instance on each call. and based on that just iterate list whereever you want.

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();" >

Categories