I need to create a timer for my website. I am setting up a form with multiple choice questions. i want users to submit the form/ answers at a specified time say 30 minutes,.. if the time elapses the submit button get disabled and alert message; time is up, Test failed.
Help with entire code; Jquery, and PHP Pease;
For this you can use the setTimeOut() javascript function.
The following line for example shows an alert box with the text Hello, after 3 seconds.
setTimeout(function(){ alert("Hello"); }, 3000);
In your case you want to disable a submit button and show an alert after 30 minutes, 30 minutes = 30*60 = 1800 seconds, equals 1800000 miliseconds.
So the code becomes like this:
setTimeout(function(){
//disable the button with id="submitbutton"
document.getElementById('submitbutton').disabled = true;
alert("Time out!");
}, 1800000);
To make this work once the page is loaded you need to place it in a javascript file or <script></script> tags and wrap it in the on document ready event. The complete code is then:
<html>
<head>
</head>
<body>
Your HTML here with the <input type="submit" id="submitbutton">
<script>
// self executing function
(function() {
setTimeout(function(){
//disable the button with id="submitbutton"
document.getElementById('submitbutton').disabled = true;
alert("Time out!");
}, 1800000);
})();
</script>
</body>
</html>
Related
Having a struggle, I have created a Modal Popup for a mail signup however it has become annoying showing everytime on a page load so I am wanting to just show this once per session and no matter how I adjust the script I cannot get this to happen. Please can anyone help?
The code is as follows for the popup:
<script type="text/javascript">
window.onload = function() {
OpenBootstrapPopup();
};
function OpenBootstrapPopup() {
$("#simpleModal").modal('show');
}
</script>
<script>
$('#simpleModal').on('click', 'button.close', function(eventObject) {
$('#simpleModal').modal('hide');
});
</script>
I just want the modal popup to show once per session
i have a button that i use to delete records
every time bootbox shows the confirm its closes automatically
here in the example the "cancel" button does not word
where is the mistake?
function ConfermaCancella()
{
// e.preventDefault();
bootbox.confirm("Sure to delete?", function (result) {
if (result) {
return true;
} else {
return false;
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://bootboxjs.com/bootbox.js"></script>
<input type="button" onclick = "return ConfermaCancella();" ID="ImageButton3" value="Delete" />
As noted in the documentation:
All Bootstrap modals, unlike native alerts, confirms, or prompts,
generate non-blocking events. Because of this limitation, code that
should not be evaluated until a user has dismissed your dialog should
be placed (or called) within the callback function of the dialog.
So, if you want something to happen only if the user confirms the action, you need to move your code into a callback, like so:
function ConfermaCancella(){
bootbox.confirm('Confirm delete?', function(result){
/* 'result' is a truthy value */
if(result){
/* Do your delete action, probably using AJAX actions */
}
});
return false;
}
I am using the Onsen framework with jQuery and jQuery mobile, it appears that there is no way to catch the event that fires once the new page is loaded.
My current code, which executes in the index.html file (the master page)
<script src="scripts/jQuery.js"></script>
<script src="scripts/jquery.mobile.custom.min.js"></script>
<script src="scripts/app.js"></script>
<script>
ons.bootstrap();
ons.ready(function() {
$(document.body).on('pageinit', '#recentPage', function() {
initRecentPage();
});
});
in app.js is the following code
function initRecentPage() {
$("#yourReports").on("tap", ".showReport", recentShowReport);
var content = document.getElementById("yourReports");
ons.compile(content);
}
and the HTML:
<ons-page id="recentPage">
<ons-toolbar id="myToolbar">
<div id="toolBarTitle" class="center">Recent Checks</div>
<div class="right">
<ons-toolbar-button ng-click="mySlidingMenu.toggleMenu()">
<ons-icon icon="bars"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
<ons-scroller>
<h3 class="headingTitle"> Checks</h3>
<div id="Free" class="tabArea">
<ons-list id="yourReports">
</ons-list>
<ons-button id="clearFreeRecentButton">
<span id="clearRecentText" class="bold">Clear Recent Checks</span>
</ons-button>
</div>
</ons-scroller>
</ons-page>
in this instance the variable 'content' is always null. I've debuged significantly, and the element I am trying to get is not present when this event fires. It is loaded later.
So, the question is, how do I ensure that all of the content is present before using a selector. It feels like this is an onsen specific issue.
In the end I could only find one reliable way of making this work.
Essentially I had to wait, using setTimeout 300 milliseconds for the DOM elements to be ready. It feels like a hack, but honestly there is no other reliable way of making this behave. The app is in the app store and works well, so even though it seems like a hack, it works:
$(document).on('pageinit', '#homePage', function() {
initHomePage();
});
function initHomePage() {
setTimeout(function() {
setUpHomePage();
}, 300);
}
Move your $(document.body).on('pageinit', '#recentPage', function() { outside of ons.ready block.
JS
ons.bootstrap();
ons.ready(function() {
console.log("ready");
});
$(document.body).on('pageinit', '#recentPage', function() {
initRecentPage();
});
function initRecentPage() {
//$("#yourReports").on("tap", ".showReport", recentShowReport);
var content = document.getElementById("yourReports");
alert(content)
ons.compile(content);
}
I commented out a line because I do not have access to that "recentShowReport"
You can see how it works here: 'http://codepen.io/vnguyen972/pen/xCqDe'
The alert will show that 'content' is not NULL.
Hope this helps.
I have a redirection code (working fine) in several pages as follow :
<meta http-equiv="refresh" content ="42; url=http://my url.html#">
But i want the automatic redirection to be cancelled or delayed if the user clicks in any point of the page.
What code should i use ?
Thanks
Here is the code for click on page anywhere:
<script>
$('html').click(function () {
alert("ok"); // Do whatever you want here, just replace. Since i dont know your code. So i can help you till this point.
});
</script>
Remove you <meta http-equiv="refresh"> from Documents <head></head>
Insert a simple JS-Timer and use window.location to refer the User after the Page loaded.
var timeVar = setInterval(function () {myTimer()}, 1000);
var t = 9;
function myTimer() {
if (t>0) {
document.getElementById("timer").innerHTML = t;
t--;
}
else { window.location = 'what/ever/you/are/workingon.html'; }
}
function StopFunction() { clearInterval(timeVar); }
<p>Redirecting in <span id="timer" style="font-weight: bold;">10</span>Seconds.</p>
<p onclick="StopFunction();" style="cursor: pointer; ">Cancel!</p>
The User will load your page and when not canceling the Timer be redirected to the Page you defined. If stopping the Timer the user wont be redirected and stay on the Page. br
Try just to empty cache, it should work.
I want to know how to catch 'Go' pressed event using PhoneGap.
I have a form with 2 input fields. How do I catch when user has pressed "Go" in keyboard. I tried butting the input fields in a Form and added a onSubmit method. And in my Js I have the method.
function onLoginSubmit(e){
console.log('submit pressed');
e.preventDefault();
}
But looks like the method is never called. What is the best way of doing it?
An example would be great.
try following code:
<head>
<script language="javascript">
function show()
{
if(window.event.keyCode == 13)
{
alert(window.event.keyCode);
}
}
</script></head>
<body>
<input type="text" name="textfields" onKeyPress="show();">
</body>