Disapper notification dot when click and appear when browser reopened - javascript

I have one notification icon with dot.
I want is when we click on that notification icon dot will be disappear. And again appears only when we closed or reopened browser.
This is my code :`
<div class="notification">
<i class="fa fa-bell-o"></i>
<div class="notify-count count1 common-count" count="0">
<div class="value"></div>
</div>
</div>`
class of that dot is " common-count"

Added event considering without your css. In snippet click on count it will disappear.
$(document).ready(function(){
$(".common-count").click(function(){
$(this).hide();
});
});
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="notification">
<i class="fa fa-bell-o notification"></i>
<div class="notify-count count1 common-count" count="0">
<div class="value">12</div>
</div>
</div>

Related

ondrop function never called in electron

onDragEnter and onDragLeave are called, but not onDrop.
evreything works when run in firefox and chrome but not electron
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="css/upload.css">
<link rel="stylesheet" href="css/popups.css">
<script src="https://kit.fontawesome.com/8edc1bc1b3.js" crossorigin="anonymous"></script>
<title>popup test</title>
</head>
<body>
<!-- popups sit here -->
<div class="uploadTestPopup">
<!-- upload / folder popup -->
<div class="uploadSelector" data-showing="content">
<i class="uploadSelectorItem" onclick="">content</i>
<i class="uploadSelectorItem" onclick="">folder</i>
</div>
<div id="uploadContentArea" class="uploadContentArea" ondrop="FileDrop(event)" ondragenter="allowDrop(event)" ondragleave="dropLeave(event)" ondragend="dragEnd(event)">
<!-- <i id="uploadIcon" class="fa-solid fa-circle-plus uploadIcon"></i>
<i class="uploadText">well upload something</i> -->
</div>
<div class="tagArea">
<div class="tagAreaDevider">
<input type="text">
</div>
<div class="tagAreaDevider">
<i class="tag">tag</i>
<i class="tag">hello</i>
<i class="tag">hello</i>
</div>
<div class="tagAreaDevider">
<i class="tag">hello</i>
<i class="tag">hello</i>
</div>
</div>
<div class="uploadArea">
<i class="uploadButtonCancel">exit</i>
<i class="uploadButtonAccept">done</i>
</div>
</div>
<script src="./js/upload.js"></script>
</body>
</html>
upload.js
function FileDrop(e) {
e.preventDefault();
e.stopPropagation();
console.log('drop call')
}
function allowDrop(e) {
e.preventDefault();
e.stopPropagation();
document.getElementById('uploadContentArea').style = 'background-color: blue;'
console.log('allow event')
}
function dropLeave(e){
e.preventDefault();
e.stopPropagation();
document.getElementById('uploadContentArea').style = ''
console.log('drag leave event')
}
i've tied adding event listeners, document.body.onDrop and doing it within the html doc.
but each attempt it never logged the drop call to the console.
only works in the browser.
is there some sort of electon setting or package i need to install???

Add a JS click event on a CoreUI element on .c-class-toggler

Question
How can I add an additional click event on a CoreUI element.
As far as my debugging goes, the main problem is that CoreUI a lot of event.stopPropagation(); uses. This seems to destroy any further added click event.
Workaround
A hack I found was to comment out line 2293 in the coreui.js.
It's interesting, as this seams to be changed with Version 3.3.0. Even more confusing is, that version "3.2" (really 3.2.2) on https://unpkg.com has already this changes (s. code snippet below).
Example
In the code snippet you can see that the menu opens/closes correctly but the additional click event doesn't get trigger.
$(document).ready(function () {
// Trigger when sidebar change, only works with hack of coreui.js
$(document).on('click', '.c-class-toggler', function (event) {
console.log('hello world!');
});
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<link href="https://unpkg.com/#coreui/coreui#3.2/dist/css/coreui.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/1.5.0/css/perfect-scrollbar.min.css" rel="stylesheet"/>
<body class="c-app">
<div id="sidebar" class="c-sidebar c-sidebar-fixed c-sidebar-lg-show">
<div class="c-sidebar-brand d-md-down-none">
<a class="c-sidebar-brand-full h4" href="#">
Example
</a>
</div>
<ul class="c-sidebar-nav ps m-4">
<li class="c-sidebar-nav-item"><h3>Menu<h3></li>
</ul>
</div>
<div id="app" class="c-wrapper">
<header class="c-header c-header-fixed px-3">
<button class="c-header-toggler c-class-toggler d-lg-none" type="button" data-target="#sidebar" data-class="c-sidebar-show">
Menu
</button> <pre class="ml-2 mt-4"><- additional click event is not working</pre>
<button id="test" class="c-header-toggler c-class-toggler mfs-3 d-md-down-none" type="button" data-target="#sidebar" data-class="c-sidebar-lg-show" responsive="true">
Menu
</button>
<ul class="c-header-nav ml-auto">
</ul>
</header>
<div class="c-body">
<main class="c-main">
<div class="container-fluid">
<div class="card">
<div class="card-body">
<h2>Content</h2>
</div>
</div>
</div>
</main>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/1.5.0/perfect-scrollbar.min.js"></script>
<script src="https://unpkg.com/#coreui/coreui#3.2/dist/js/coreui.min.js"></script>
</body>
Note: It seems like I'm not the only one with this issue: https://github.com/coreui/coreui/issues/155
I just run again over my question, the whole thing works also without my described hack.
The trick is to hook on existing JS events.
The debugger console normal show you the exciting events, eg. in case of the sitebar there is a classtoggle event you can hook on (s. example in jsfiddle or below).
One issue withe coreui is that the events have often different names to the normal bootstrap events.
$(document).ready(function () {
// Triggers when existing sidebar events are called
$('#sidebar').on('classtoggle', function (event) {
console.log('hello world!');
$('.working').append('!');
});
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<link href="https://unpkg.com/#coreui/coreui#3.2/dist/css/coreui.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/1.5.0/css/perfect-scrollbar.min.css" rel="stylesheet"/>
<body class="c-app">
<div id="sidebar" class="c-sidebar c-sidebar-fixed c-sidebar-lg-show">
<div class="c-sidebar-brand d-md-down-none">
<a class="c-sidebar-brand-full h4" href="#">
Example
</a>
</div>
<ul class="c-sidebar-nav ps m-4">
<li class="c-sidebar-nav-item"><h3>Menu<h3></li>
</ul>
</div>
<div id="app" class="c-wrapper">
<header class="c-header c-header-fixed px-3">
<button id="test" class="c-header-toggler c-class-toggler mfs-3 d-md-down-none" type="button" data-target="#sidebar" data-class="c-sidebar-lg-show" responsive="true"> Menu
</button>
<button class="c-header-toggler c-class-toggler d-lg-none" type="button" data-target="#sidebar" data-class="c-sidebar-show">
Menu
</button> <pre class="working ml-2 mt-4"><- additional click event works when hooked to existing events</pre>
</header>
<div class="c-body">
<main class="c-main">
<div class="container-fluid">
<div class="card">
<div class="card-body">
<h2>Content</h2>
</div>
</div>
</div>
</main>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/1.5.0/perfect-scrollbar.min.js"></script>
<script src="https://unpkg.com/#coreui/coreui#3.2/dist/js/coreui.min.js"></script>
</body>

classList.toggle Only Partially Works

I'm having a very confusing problem using classList.toggle and Font Awesome icons. I want my hamburger menu to change to an X when clicked and I'm attempting to use a JavaScript function to accomplish this. I just can't get it to work right. The weird thing is, when I set the X as the default icon, and then change the icon class to the hamburger menu upon click, it works perfectly fine. Here is my working code, changing the X to a hamburger:
function myFunction(x) {
x.classList.toggle("fa-bars");
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="test">
<i onclick="myFunction(this)" class="fa fa-times"></i>
</div>
That works fine. But when I try to reverse the order, changing a hamburger to an X, it doesn't work. Here's that code:
function myFunction(x) {
x.classList.toggle("fa-times");
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="test">
<i onclick="myFunction(this)" class="fa fa-bars"></i>
</div>
I've got to be missing something. What is it?!
When you do toggle("fa-times"), it doesn't remove the fa-bars class, it just adds or removes the fa-times class. And when the icon has class="fa fa-bars fa-times", the fa-bars class has priority, so you see the hamburger.
You need to goggle both classes to make it work reliably. This will work no matter which class you set initially.
function myFunction(x) {
x.classList.toggle("fa-times");
x.classList.toggle("fa-bars");
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="test">
<i onclick="myFunction(this)" class="fa fa-bars"></i>
</div>
You need to remove the old bars two , you can toggle the two classes and that's will work perfect at any order
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="test">
<i onclick="myFunction(this)" class="fa fa-bars"></i>
</div>
<script>
function myFunction(x) {
x.classList.toggle("fa-times");
x.classList.toggle("fa-bars");
console.log(x.classList)
}
</script>
</body>

Image not working when clicked

When you click a navigation item at the top of the screen, a blank div pops up with a huge "x" image that when clicked, the x image is suppose to close the blank div and everything else. For "jobs, contact, press, and legal" it doesn't work when clicked but for "support" it works perfectly. I put the code side by side to see errors, copy the support code and paste for others... basically everything imaginable for 1-2hours. I found a glitch that when you open the "support" first then close it out and open another one, the x image works but I don't know why. Here is my html and the rest of the code will be uploaded to codeine
demo:
http://codepen.io/anon/pen/dvzgrY
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Nunito:700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="magicstyle.css">
<body>
<!-- Section for Jobs Popup -->
<div id="job-popup">
<div class="x-div1"><img class="x-icon1" id="fadeX1" src="Pictures/web%20x%20icon%20white.png"></div>
<div id="job-content">
<h1 id="jobWords"></h1>
</div>
</div>
<!-- Section for Contact Popup -->
<div id="contact-popup">
<div class="x-div2"><img class="x-icon2" id="fadeX2" src="Pictures/web%20x%20icon%20white.png"></div>
<div id="contact-content">
<h1 id="contactWords"></h1>
</div>
</div>
<!-- Section for Press Popu -->
<div id="press-popup">
<div class="x-div3"><img class="x-icon3" id="fadeX3" src="Pictures/web%20x%20icon%20white.png"></div>
<div id="press-content">
<h1 id="pressWords"></h1>
</div>
</div>
<div id="legal-popup">
<div class="x-div4"><img class="x-icon4" id="fadeX4" src="Pictures/web%20x%20icon%20white.png"></div>
<div id="legal-content">
<h1 id="legalWords"></h1>
</div>
</div>
<div id="support-popup">
<div class="x-div5"><img class="x-icon5" id="fadeX5" src="Pictures/web%20x%20icon%20white.png"></div>
<div id="support-content">
<h1 id="supportWords"></h1>
</div>
</div>
<div id="top-bar">
<a class="burger-nav"></a>
<div id="nav-menu">
<span id="job">Jobs</span>
<span id="contact">Contact</span>
<span id="press">Press</span>
<span id="legal">Legal</span>
<span id="support">Support</span>
</div>
</div>
<div id="container">
<div id="name-div">
<h1 id="name">Open Touch</h1>
</div>
<ul class="bubbles">
<li id="firstCircle"></li>
<li id="secondCircle"></li>
<li id="thirdCircle"></li>
<li id="fourthCircle"></li>
<li id="fifthCircle"></li>
<li id="sixthCircle"></li>
</ul>
</div>
</body>
</head>
</html>
Any help will be greatly appreciated :D
The problem is that all your popup containers (job-popup, contact-popup, etc) are positioned absolutely at the same location with the same z-index. Since the support-popup is last in your html, it's hiding all the popup containers underneath it. You are never actually clicking on the other x-icons (only on the top support one), and therefore, the click handlers are not getting triggered.
For a quick fix, you could update the z-index, in your nav click handlers. For example:
$("#job").click(function() {
$("#job-popup").fadeIn(300);
$("#job-popup").css({'z-index': 15});
$("#job-content").fadeIn(300);
$("#jobWords").fadeIn(300);
$(".x-icon1").fadeIn(300);
$("#name").fadeOut(300);
$("#container").css("-webkit-filter", "blur(10px)");
}
and then move it back down here
$(".x-icon1").click(function() {
$("#job-popup").fadeOut();
$("#job-popup").css({'z-index': 10});
$("#job-content").fadeOut();
$("#jobWords").fadeOut();
$(".x-icon1").fadeOut();
$("#name").fadeIn();
$("#container").css("-webkit-filter", "blur(0px)");
}
and then replicate this for all your click handlers.
But you should also consider refactoring your html/css, since the structure is incorrect (body within head, for example), and a lot of the css is probably unnecessary.

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