good day! i'm using this code i found in this site to run a countdown timer that when it reaches zero, it will run a php file. what i have noticed is that when the tab on the server is closed is that it does not actually call the php file. do you guys have any solution to this? Any help will be very much appreciated.
switch1.js file and index.html file
var interval;
function start() {
// If a timer is already running, stop it
stop();
// Get and validate user input
var userInput = document.getElementById('userTime').value;
if (userInput.length == 0) {
return alert("Please enter a value");
}
var numericExpression = /^[0-9]+$/
if (!userInput.match(numericExpression)) {
return alert("Please enter a number");
}
// Calculate end date/time
expires = Date.now() + ((userInput * 60000) + 1000); // Assumes userInput is in seconds
localStorage.setItem("expires", expires);
runTimer(); // Start the actual timer
}
function stop() {
if (interval) {
clearInterval(interval);
interval = null;
}
expires = 0;
localStorage.setItem("expires", expires);
// Clear the display
display("notifier", " ");
}
var actions = {
10: function() {
display("notifier", "Just 10 seconds to go");
},
5: function() {
display("notifier", "5 seconds left");
},
0: function() {
window.location = 'off1.php'
}
};
function runTimer() {
interval = setInterval(function() {
var remain = Math.floor((expires - Date.now()) / 1000);
// If expired time come and gone
if (remain < 0) {
clearInterval(interval);
interval = null;
return;
}
display("countdown", toMinuteAndSecond(remain));
actions[remain] && actions[remain]();
}, 1000);
}
function display(notifier, str) {
document.getElementById(notifier).innerHTML = str;
}
function toMinuteAndSecond(x) {
return Math.floor(x / 60) + ":" + x % 60;
}
// If a timer is already setup (page has been refreshed) continue it
var expires = localStorage.getItem("expires");
if (expires > 0) runTimer();
<div>
<br>
<br>
</br>
<div id="countdown"></div>
<div id="notifier"></div>
Please Enter A Number: <input type="text" id="userTime" />
<input type="button" value="Go" onclick="start()" />
<input type="button" onclick="stop()" value="Stop it" />
</br>
</div>
<div>
<br>
<br>
</br>
<div id="countdown1"></div>
<div id="notifier1"></div>
Please Enter A Number: <input type="text" id="userTime1" />
<input type="button" value="Go" onclick="start1()" />
<input type="button" onclick="stop1()" value="Stop it" />
</br>
</div>
<div>
<br>
<br>
</br>
<div id="countdown2"></div>
<div id="notifier2"></div>
Please Enter A Number: <input type="text" id="userTime2" />
<input type="button" value="Go" onclick="start2()" />
<input type="button" onclick="stop2()" value="Stop it" />
</br>
</div>
<div>
<br>
<br>
</br>
<div id="countdown3"></div>
<div id="notifier3"></div>
Please Enter A Number: <input type="text" id="userTime3" />
<input type="button" value="Go" onclick="start3()" />
<input type="button" onclick="stop3()" value="Stop it" />
</br>
</div>
<div>
<br>
<br>
</br>
<div id="countdown4"></div>
<div id="notifier4"></div>
Please Enter A Number: <input type="text" id="userTime4" />
<input type="button" value="Go" onclick="start4()" />
<input type="button" onclick="stop4()" value="Stop it" />
</br>
</div>
<div>
<br>
<br>
</br>
<div id="countdown5"></div>
<div id="notifier5"></div>
Please Enter A Number: <input type="text" id="userTime5" />
<input type="button" value="Go" onclick="start5()" />
<input type="button" onclick="stop5()" value="Stop it" />
</br>
</div>
<div>
<br>
</br>
<br>
<div id="countdown6"></div>
<div id="notifier6"></div>
Please Enter A Number: <input type="text" id="userTime6" />
<input type="button" value="Go" onclick="start6()" />
<input type="button" onclick="stop6()" value="Stop it" />
</br>
</div>
<div>
<br>
<br>
</br>
<div id="countdown7"></div>
<div id="notifier7"></div>
Please Enter A Number: <input type="text" id="userTime7" />
<input type="button" value="Go" onclick="start7()" />
<input type="button" onclick="stop7()" value="Stop it" />
</br>
</div>
You are running a javascript script on the client-side. The browser the user's computer are basically doing everything. When the counter running on the browser reaches zero it tells the browser to navigate to a certain link. The browser sends a GET request to that link.
On the server-side, a php script is initiated when the server receives a GET request to it.
Since when you are closing the tab, you are stopping the script, the event in which the GET request is being sent never occurs. Thus the server never gets this request and never starts the script.
Related
I'm practicing if statements and I'm trying to make a calculator. I can enter the numbers but clicking on the add, subtract, multiply or divide buttons does not give me any results. I know there are easier ways to do it but it was just for practice. What have I done wrong?
function operar(boton) {
var num1, num2, resultado;
num1 = document.getElementById("num1");
num2 = document.getElementById("num2");
resultado = document.getElementById("resultado");
if (boton.value == '+') {
resultado.value = Number(num1.value) + Number(num2.value);
} else {
if (boton.value == '-') {
resultado.value = Number(num1.value) - Number(num2.value);
} else {
if (boton.value == '*') {
resultado.value = Number(num1.value) * Number(num2.value);
} else {
if (boton.value == '/') {
resultado.value = Number(num1.value) / Number(num2.value);
}
}
}
}
}
<form>
<div>
<label>Número 1</label>
<input id="num1" type="text" />
</div>
<div>
<label>Número 2</label>
<input id="num2" type="text" />
</div>
<input type="button" value="+" onclick="operar(this)" />
<input type="button" value="-" onclick="operar(this)" />
<input type="button" value="*" onclick="operar(this)" />
<input type="button" value="/" onclick="operar(this)" />
<div>
<label>Resultado</label>
<input type="text" id="resultado" />
</div>
</form>
The snippet you gave here, this code is running perfectly. What else do you want to do?
how do i grab a value from an input element in javascript? For some reason my code is not executing. This is my HTML code:
<section id ="my-life" style="margin-left:39em;">
<input class="jenny" placeholder="Your First Name"/> <br /><br />
<button id="get">Subscribe</button>
<br /><br />
<div id ="whitelion">Thank You!</div>
This is my javascript code:
function buttonClicked() {
var Niche = document.getElementsByClassName("jenny");
var results = document.getElementById("whitelion");
results.innerHTML = "Hello" + Niche[0].value;
}
function buttonClicked() {
var Niche = document.getElementsByClassName("jenny");
var results = document.getElementById("whitelion");
results.innerHTML = "Hello " + Niche[0].value;
}
<input class="jenny" placeholder="Your First Name"/>
<br /><br />
<button onclick='buttonClicked();'>Subscribe</button>
<br /><br />
<div id ="whitelion">Thank You!</div>
<section id ="my-life" style="margin-left:39em;">
<input class="jenny" placeholder="Your First Name"/> <br /><br />
<button id="get">Subscribe</button>
<br /><br />
<div id ="whitelion">Thank You!</div>
<script>
function buttonClicked() {
var Niche = document.getElementsByClassName("jenny");
var results = document.getElementById("whitelion");
results.innerHTML = "Hello" + Niche[0].value;
}
document.getElementById('get').onclick = buttonClicked;
</script>
I tried your code on the editor. It works fine. But you must include your JS code inside a <script> element. And put it in the bottom of the document.
function buttonClicked() {
var Niche = document.getElementsByClassName("jenny");
var results = document.getElementById("whitelion");
results.innerHTML = "Hello " + Niche[0].value;
}
<section id ="my-life">
<input class="jenny" placeholder="Your First Name"/> <br /><br />
<button id="get" onclick="buttonClicked()">Subscribe</button>
<br /><br />
<div id ="whitelion">Thank You!</div>
<br/>
</section>
I am trying to create a touchscreen calculator like where the button value will be placed on the textbox after i set it on a focus by clicking but it appears on all the textboxes.I tried to use the code
if ($(impo).is(":focus")) {
but it doesnt work. Please see my snippet
Thanks in advance!
var impo = document.getElementById("imp_text");
var tess = document.getElementById("tess_text");
var FKeyPad = document.Keypad;
var Accumulate = 0;
var FlagNewNum = false;
var PendingOp = "";
document.getElementById('tess').onclick = function() {
document.getElementById('tess_text').focus();
}
document.getElementById('imp').onclick = function() {
document.getElementById('imp_text').focus();
}
function NumPressed(Num) {
if (impo) {
if (FlagNewNum) {
FKeyPad.ReadOut.value = Num;
FlagNewNum = false;
} else {
if (FKeyPad.ReadOut.value == " ")
FKeyPad.ReadOut.value = Num;
else
FKeyPad.ReadOut.value += Num;
}
}
if (tess) {
if (FlagNewNum) {
FKeyPad.readtess.value = Num;
FlagNewNum = false;
} else {
if (FKeyPad.readtess.value == " ")
FKeyPad.readtess.value = Num;
else
FKeyPad.readtess.value += Num;
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html lang="en">
<head>
</head>
<body>
<form name="Keypad" action="">
<input type="button" value="Imp" id="imp" /> Importo :
<input name="ReadOut" id="imp_text" type="Text" value=" "> <br>
<input type="button" value="Tes" id="tess" /> Card Tess :
<input name="readtess" id="tess_text" type="Text" value=" ">
<br>
<input type="button" value=" 1" onclick="NumPressed(1)" />
<input type="button" value=" 2" onclick="NumPressed(2)" />
<input type="button" value=" 3" onclick="NumPressed(3)" /> <br>
</form>
</body>
</html>
if (impo) and if (tess) just tests whether the element exists, which they do, so the value gets written to both of them because they both exist. In a desktop environment, you can't do what you're asking - you can give a textbox the focus, but once the user clicks on one of the buttons in order to select that number, the textbox no longer has the focus (because the button has it).
You need a separate way to maintain which textbox is currently selected, something like the snippet below. It will update the currently "selected" element both on the click of the Imp/Tes buttons and whenever either of the textbox gains focus (e.g. by mouse click or touch).
var impo = document.getElementById("imp_text");
var tess = document.getElementById("tess_text");
var current_input = impo;
impo.onfocus = function() {
current_input = impo;
}
tess.onfocus = function() {
current_input = tess;
}
document.getElementById('tess').onclick = function() {
current_input = tess;
tess.focus();
}
document.getElementById('imp').onclick = function() {
current_input = impo;
impo.focus();
}
function NumPressed(Num) {
current_input.value += Num;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html lang="en">
<head>
</head>
<body>
<form name="Keypad" action="">
<input type="button" value="Imp" id="imp" /> Importo :
<input name="ReadOut" id="imp_text" type="Text" value=""> <br>
<input type="button" value="Tes" id="tess" /> Card Tess :
<input name="readtess" id="tess_text" type="Text" value="">
<br>
<br>
<input type="button" value="1" onclick="NumPressed(this.value)" />
<input type="button" value="2" onclick="NumPressed(this.value)" />
<input type="button" value="3" onclick="NumPressed(this.value)" /> <br>
<input type="button" value="4" onclick="NumPressed(this.value)" />
<input type="button" value="5" onclick="NumPressed(this.value)" />
<input type="button" value="6" onclick="NumPressed(this.value)" /> <br>
<input type="button" value="7" onclick="NumPressed(this.value)" />
<input type="button" value="8" onclick="NumPressed(this.value)" />
<input type="button" value="9" onclick="NumPressed(this.value)" /> <br>
<input type="button" value="0" onclick="NumPressed(this.value)" /> <br>
</form>
</body>
</html>
The "onsubmit" isn't working in this code. Can someone help me? It doesn't get to the function. I put there a alert but it didn't react. So it seems like the onsubmit just doesn't do it's work.
It's about the submit in the input
<form onSubmit="maakCookie('user',document.inlog.gebruiker.value,1); maakCookie('password',document.inlog.wachtwoord.value,1);"
name="inlog" action="inloggen.html" method="post"> email-adres:
<input type="text" size="20" id="gebruiker" />
wachtwoord: <input type="password" size="20"
id="wachtwoord" /> <hr /> <input type="
submit" onsubmit="checkEmail()" value="submit"/>
</form>
function maakCookie(naam, waarde, dagen)
{
if(dagen)
{
var datum = new Date();
datum.setTime(datum.getTime() + (dagen * 24 * 60 * 60 * 1000));
var verloopdatum = "; expires="+datum.toGMTString();
}
else
{
var verloopdatum = "";
}
document.cookie = naam+"="+waarde + verloopdatum + ";path=/";
}
function checkEmail()
{
alert("kijken of het werkt");
if(/^[A-Za-z0-9._%-]+#[A-Za-z0-9.-]+\.[A-Za- z]{2,4}$/.test(document.userform.email.value))
{
return (true)
}
else
{
alert("het e-mailadres is onjuist")
return (false)
}
}
onsubmit in not an attribute for an <input>. If you want to check if your onsubmit is firing, you can create a simple function first like below:
HTML:
<form onsubmit="tryalert();" action="" method="post">
<input type="submit" value="submit"/>
</form>
Javascript:
function tryalert()
{
alert("working");
}
If something like that works, there is something wrong with your maakCookie function.
I think you don't need the onsubmit event on your input at all.
Just try the following :
<form onsubmit="checkEmail(); maakCookie('user',document.inlog.gebruiker.value,1); maakCookie('password',document.inlog.wachtwoord.value,1);" name="inlog" action="inloggen.html" method="post">
email-adres: <input type="text" size="20" id="gebruiker" />
wachtwoord: <input type="password" size="20" id="wachtwoord" />
<hr />
<input type="submit" value="submit"/>
</form>
I am looking to build a simple webpage that can check to see if a string contains certain information. I'm taking a summer course in Java and wanted to give Javascript a try. Maybe a bad idea?
I want the user to enter information - name, phone number, and a couple other options in a form. Then I want the user to enter more information in the text area. The text area will reference the input data and if there is a match it will alert the user.
I have limited javascript experience, but I've been able to manipulate user input with javascript in the past.
Not sure what my problem here is. Any tips (especially regarding style and logic) are greatly appreciated! PS - I'm using Bootstrap if that matters...
Thanks in advance :)
HTML
<div class="container">
<div class="col-md-6">
<form>
<input type="text" id="Name" placeholder="Name" style="width:100%"><br /><br />
<input type="text" id="Number" placeholder="Number" style="width:100%"><br /><br />
<input type="text" id="Next" placeholder="Something Else" style="width:100%"><br /><br />
<input type="text" id="WhatEver" placeholder="Something Else" style="width:100%"><br /><br />
</form>
</div>
<div class="col-md-6">
<textarea id="LongText" placeholder="Enter Info" style="width:100%; height:250px">
</textarea> <br />
<input type="submit" class="btn btn-danger" id="tSubmit" value="Submit" onclick="GetInput();Check();">
</div>
<div class="col-md-12">
<h1>Output</h1>
<div id="tOutPut" style="color:red;"></div>
</div>
</div>
JS
GetInput()
{
var tNameValue = document.getElementById("Name").value;
var tValue = document.getElementById("Number").value;
var tArray = document.getElementById('LongText').value.split('\n');
}
Check( tArray, tNameValue, tValue )
{
for(var i = 0; i < tArray.length; i++ )
{
if( i === tNameVaue )
{
document.getElementById( 'tOutPut' ).innerText = "Name Match" <br />;
}
if( i === tValue )
{
document.getElementById( 'tOutPut' ).innerText = "Match" <br />;
}
}
}
*
Your javascript has many things wrong. Here is the HTML and the Javascript. The logic must be improved but the code is working.
<div class="container">
<div class="col-md-6">
<form>
<input type="text" id="Name" placeholder="Name" style="width:100%"><br /><br />
<input type="text" id="Number" placeholder="Number" style="width:100%"><br /><br />
<input type="text" id="Next" placeholder="Something Else" style="width:100%"><br /><br />
<input type="text" id="WhatEver" placeholder="Something Else" style="width:100%"><br /><br />
</form>
</div>
<div class="col-md-6">
<textarea id="LongText" placeholder="Enter Info" style="width:100%; height:250px">
</textarea> <br />
<input type="submit" class="btn btn-danger" id="tSubmit" value="Submit" onclick="ExecuteAll();">
</div>
<div class="col-md-12">
<h1>Output</h1>
<div id="tOutPut" style="color:red;"></div>
</div>
</div>
And here is the Javascript:
var tNameValue;
var tValue;
var tArray;
function ExecuteAll()
{
GetInput();
Check();
}
function GetInput()
{
tNameValue = document.getElementById("Name").value;
tValue = document.getElementById("Number").value;
tArray = document.getElementById('LongText').value.split('\n');
}
function Check()
{
if (tArray != null) {
for(var i = 0; i < tArray.length; i++ )
{
if( i == tNameValue )
{
document.getElementById( 'tOutPut' ).innerText = "Name Match <br />";
}
if( i == tValue )
{
document.getElementById( 'tOutPut' ).innerText = "Match <br />";
}
}
}
}
I will tell you what I did to fix the bugs:
Added function keyword to the javascript functions.
Put the variables as global so they can be used for the whole code.
Verified whether tArray is not null.
Fixed variable names.
Here is the Fiddle code: http://jsfiddle.net/3U6mE/6/
I hope it helps you get started.