I am developing a system, where the user will have to make the payment via credit card. When he starts typing the first numbers on the card, the flag will be automatically identified and selected. I don't know much about jQuery or JavaScript.
JS
var cartoes = {
visa: /^4[0-9]{12}(?:[0-9]{3})/,
mast: /^5[1-5][0-9]{14}/,
diners: /^3(?:0[0-5]|[68][0-9])[0-9]{11}/,
amex: /^3[47][0-9]{13}/,
discover: /^6(?:011|5[0-9]{2})[0-9]{12}/,
hipercard: /^(606282\d{10}(\d{3})?)|(3841\d{15})/,
elo: /^((((636368)|(438935)|(504175)|(451416)|(636297))\d{0,10})|((5067)|(4576)|(4011))\d{0,12})/
};
The problem is that when entering the flag it is not working, that is, he is not selecting the flag as I type the card number. I tried with the cards I have: MasterCard, Amex and Visa. I will put the complete code.
var cartoes = {
visa: /^4[0-9]{12}(?:[0-9]{3})/,
mast: /^5[1-5][0-9]{14}/,
diners: /^3(?:0[0-5]|[68][0-9])[0-9]{11}/,
amex: /^3[47][0-9]{13}/,
discover: /^6(?:011|5[0-9]{2})[0-9]{12}/,
hipercard: /^(606282\d{10}(\d{3})?)|(3841\d{15})/,
elo: /^((((636368)|(438935)|(504175)|(451416)|(636297))\d{0,10})|((5067)|(4576)|(4011))\d{0,12})/
};
document.getElementById('num').addEventListener('keyup', testarCC);
var inputs = document.querySelectorAll('.fsResDir input[type="radio"]');
function testarCC(e) {
var nr = this.value;
var tipo;
for (var cartao in cartoes)
if (nr.match(cartoes[cartao])) tipo = cartao;
// alert(tipo);
if (tipo) document.getElementById(tipo).click();
else
for (var i = 0; i < inputs.length; i++) inputs[i].checked = false;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Testando a Braspag</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<body>
<fieldset class="fsResDir">
<legend>Dados do Cartão </legend>
<input type="radio" name="RadBand" id="visa" />
<label for="visa">
<img src="bandeiras/visa.png" style="width: 90px" />
</label>
<input type="radio" name="RadBand" id="mast" />
<label for="mast">
<img src="bandeiras/mastercard.png" style="width: 90px"/>
</label>
<input type="radio" name="RadBand" id="amex" />
<label for="amex">
<img src="bandeiras/amex.png" style="width: 90px"/>
</label>
<label for="val" class="lab90">Validade:</label>
<input type="text" class="ent20Form" id="val" name="TxtValMes" class="form-control" />/
<input type="text" class="ent40Form" name="TxtValAno" class="form-control" />
<label for="num" class="lab90">Numero:</label>
<input type=text class="ent120Form" id="num" name="TxtNumero" class="form-control" />
</fieldset>
</body>
</html>
Related
i cannot change language for my placeholder text. i can only change language for normal button text , head text but i cannot change language for placeholder text. please help to suggest anything i need to add on in my code. thanks
<!DOCTYPE html>
<html>
<head>
<title>Node.js app</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="Style.css" />
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<label class="switch">
<input type="checkbox" id="togBtn">
<div class="slider round">
<span language='myanmar' class="on">MYN</span>
<span language='english' class="off">ENG</span>
</div>
</label>
<div class="form-group">
<input type="text" class="form-control usrplaceholder" placeholder="Username" required="required">
</div>
<div class="form-group">
<input type="password" class="form-control pwplaceholder" name="pw" placeholder="Password" required="required">
</div>
<script>
document.querySelector('#togBtn').addEventListener('input', (event) => {
document.querySelector('.usrplaceholder').textContent = data[event.currentTarget.checked ? 'myanmar' : 'english'].usrplaceholder;
document.querySelector('.pwplaceholder').textContent = data[event.currentTarget.checked ? 'myanmar' : 'english'].pwplaceholder;
});
var data = {
"english": {
"usrplaceholder": "Username",
"pwplaceholder": "Password"
},
"japanese": {
"usrplaceholder": "အသုံးပြုသူအမည်",
"pwplaceholder": "စကားဝှက်",
}
}
</script>
</body>
</html>
There's two problems in your code.
Firstly you're trying to access the myanmar property of the data object when it doesn't exist. The only properties, in the example code at least, as english and japanese.
Secondly, the input elements do not have a textContent property. From the context it looks like you're trying to set the placeholder property instead.
document.querySelector('#togBtn').addEventListener('input', (event) => {
document.querySelector('.usrplaceholder').placeholder = data[event.currentTarget.checked ? 'japanese' : 'english'].usrplaceholder;
document.querySelector('.pwplaceholder').placeholder = data[event.currentTarget.checked ? 'japanese' : 'english'].pwplaceholder;
});
var data = {
"english": {
"usrplaceholder": "Username",
"pwplaceholder": "Password"
},
"japanese": {
"usrplaceholder": "အသုံးပြုသူအမည်",
"pwplaceholder": "စကားဝှက်",
}
}
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<label class="switch">
<input type="checkbox" id="togBtn">
<div class="slider round">
<span language='myanmar' class="on">MYN</span>
<span language='english' class="off">ENG</span>
</div>
</label>
<div class="form-group">
<input type="text" class="form-control usrplaceholder" placeholder="Username" required="required">
</div>
<div class="form-group">
<input type="password" class="form-control pwplaceholder" name="pw" placeholder="Password" required="required">
</div>
I am a freshman at a university. I have been given an assignement where I need to use addEventListener. The problem is that I haven't used it before.
What this assignment is, is that I have a json file With a list of student names. My first exercise was to show a list of all the students. I did that. But then comes the hard part, where I can't find a possible solution, when I need to show only students that are in a certain program. There are radio buttons for each of the programs and when clicked a list of the members of the program need to show up. Also there is a radio button that says "all", which need to Select all the students.
Here is my javascript file:
.then((response) => {
return response.json();
})
.then(function appendData(data) {
var unordered = document.querySelector(".studenter");
for (var i = 0; i < data.length; i++) {
var li = document.createElement("li");
li.innerHTML = 'Name: ' + data[i].fornavn + ' ' + data[i].etternavn;
unordered.appendChild(li);
}
});
Here is the HTML file:
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Studenter i IIKG1002 og IDG1011</title>
<script defer src="js/studenterIKlasse.js"></script>
<link rel="stylesheet" href="css/studenterIKlasse.css" />
</head>
<body>
<h1>Studenter i IIKG1002 og IDG1011</h1>
<p>Velg klasse</p>
<div class="klasseVelger">
<div>
<input type="radio" name="programvelger" id="BIGEOMAT" />
<label for="BIGEOMAT">Bachelor in Engineering, Geomatics</label>
</div>
<div>
<input type="radio" name="programvelger" id="BWU" />
<label for="BWU">Bachelor in Web Development</label>
</div>
<div>
<input type="radio" name="programvelger" id="ÅRWEB" />
<label for="ÅRWEB">Web Design - One-year programme</label>
</div>
<div>
<input type="radio" name="programvelger" id="BIXD" />
<label for="BIXD">Interaction Design - Bachelor's Programme</label>
</div>
<div>
<input type="radio" name="programvelger" id="all" />
<label for="all">Show all</label>
</div>
</div>
<p>
<ul class="studenter"></ul>
</p>
</body>
</html>
And here is an example of what the student Object look like (json):
{
"fornavn": "Marcus Gimse",
"etternavn": "Blikstad",
"studieprogram": "Bachelor in Engineering, Geomatics",
"forkortelse": "BIGEOMAT"
},
JavaScript codes and HTML codes
I'm trying to put a generated value of the qr code a input text to be save in my SQLite database can't pust the darn value of the qr code
var resultDiv;
document.addEventListener("deviceready", init, false);
function init() {
document.querySelector("#startScan").
addEventListener("touchend", startScan, false);
resultDiv = document.querySelector("#results");//works in <p id="results"></p>
resultDiv = document.querySelector('#text4');//wont work at all <input id="text4" type="text" placeholder="Book Info"/>
}
function startScan() {
cordova.plugins.barcodeScanner.scan(
function (result) {
var s = result.text.split('|');
result.format;
result.cancelled;
resultDiv.innerHTML = s;
},
function (error) {
alert("Scanning failed: " + error);
}
);
}
JavaScript codes and HTML codes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>qrBorrowers</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script type="text/javascript" src="cordova.js"></script>
<nav>
<div class="topnav">
Add
Borrow
Return
QR code
</div>
</nav>
<Label>
<h1> Borrow a Book </h1>
</Label>
<div class="borrow">
<input id="text1" type="text" placeholder="Borrower Number" onfocus="this.value=''"/>
<input id="text2" type="text" placeholder="Borrower Last Name" onfocus="this.value=''" />
<input id="text3" type="text" placeholder="Borrower First Name" onfocus="this.value=''" />
<input id="text4" type="text" placeholder="Book Info"/>
<input id="text6" type="date" placeholder="Date Borrowed" />
<br>
</div>
<div class="borrow">
<p id="results"></p>
<button id="startScan">Start Scan</button>
<button id="savedb">Save </button>
</div>
<script type="text/javascript" src="js/scanQR.js"></script>
</body>
</html>
With inner HTML it will not going to save your generated QR code to input box. You need to change the innerHTML to value to save the value in input box such that you can use that when form submit as value to save in database.
var resultDiv;
document.addEventListener("deviceready", init, false);
function init() {
document.querySelector("#startScan").
addEventListener("touchend", startScan, false);
resultDiv = document.querySelector("#results");//works in <p id="results"></p>
resultDiv = document.querySelector('#text4');//wont work at all <input id="text4" type="text" placeholder="Book Info"/>
}
function startScan() {
cordova.plugins.barcodeScanner.scan(
function (result) {
var s = result.text.split('|');
result.format;
result.cancelled;
resultDiv.value = s;
},
function (error) {
alert("Scanning failed: " + error);
}
);
}
JavaScript codes and HTML codes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>qrBorrowers</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script type="text/javascript" src="cordova.js"></script>
<nav>
<div class="topnav">
Add
Borrow
Return
QR code
</div>
</nav>
<Label>
<h1> Borrow a Book </h1>
</Label>
<div class="borrow">
<input id="text1" type="text" placeholder="Borrower Number" onfocus="this.value=''"/>
<input id="text2" type="text" placeholder="Borrower Last Name" onfocus="this.value=''" />
<input id="text3" type="text" placeholder="Borrower First Name" onfocus="this.value=''" />
<input id="text4" type="text" placeholder="Book Info"/>
<input id="text6" type="date" placeholder="Date Borrowed" />
<br>
</div>
<div class="borrow">
<p id="results"></p>
<button id="startScan">Start Scan</button>
<button id="savedb">Save </button>
</div>
<script type="text/javascript" src="js/scanQR.js"></script>
</body>
</html>
To save the value in input box should not use "resultDiv.innerHTML = s;"
Rather you should use "resultDiv.value = s" which will save your code to input box which you can use to save in SQLite Database.
In this code i try to get the difference between two date and time
ex(09/05/2014 09:10:00 - 09/05/2014 11:18:00 ) it should return 78 minutes with a single function for multiple textboxes but unfortunately this piece of code is not working can some one suggest me the correct code or is there is any alternative way to perform this function , thanks in advance.
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="JS/datejquery.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$("id^='endTime'".change(function(){
var index = $(this).attr('id').replace('endTime','');
alert(index);
var startTime = $('#startTime'+index).val();
var endTime = $(this).val();
$('#result'+index).val(endTime-startTime);
});
} );
</script>
</head>
<body>
<form name="wrs">
<input type="text" name="time1" id= "startTime1" class="num-box type1" />
<input type="text" name="time2" id = "endTime1" class="num-box type2" />
<input type="text" name="result1" class="num-box type5" />
<input type="text" name="startTime2" id= "time3" class="num-box type3" />
<input type="text" name="endTime2" id = "time4" class="num-box type4" />
<input type="text" name="result2" class="num-box type6" />
</form>
</body>
</html>
You missed the brackets.
$("[id^='endTime']").change(function(){
var index = $(this).attr('id').slice(7);
alert(index);
var startTime = $('#startTime'+index).val();
var endTime = $(this).val();
$('#result'+index).val(endTime-startTime);
});
Hello everybody i am trying to refresh a div in javascript every 1 second i have got one of the variables to refresh but cannot seem to get the second one to refresh.
I am looking to refresh the text with the id of refresh1 either correct or incorrect
many thanks in advance.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Binary Learning Tool!</title>
<meta name="description" content="Change image on click with jQuery">
<meta name="keywords" content="Change image on click with jQuery">
<meta name="author" content="">
<link rel="stylesheet" href="style.css" media="all" type="text/css">
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
</head>
<body>
<script type='text/javascript'>
var total=1;
var answer;
var randnum=(Math.floor(Math.random() * 2 + 1))
document.write(randnum);
</script>
</br></br></br></br>
</br>
<img
id="num1" onclick="swapImage1( 'num1','/img/1.png','/img/0.png');" src="/img/0.png" alt="num1" value="32"
/>
<img
id="num2" onclick="swapImage2( 'num2','/img/1.png','/img/0.png');" src="/img/0.png" alt="num2" value="16"
/>
<img
id="num3" onclick="swapImage3( 'num3','/img/1.png','/img/0.png');" src="/img/0.png" alt="num3" value="8"
/>
<img
id="num4" onclick="swapImage4( 'num4','/img/1.png','/img/0.png');" src="/img/0.png" alt="num4" value="4"
/>
<img
id="num5" onclick="swapImage5( 'num5','/img/1.png','/img/0.png');" src="/img/0.png" alt="num5" value="2"
/>
<img
id="num6" onclick="swapImage6( 'num6','/img/1.png','/img/0.png');" src="/img/1.png" alt="num6" value="1"
/>
</body>
<script type="text/javascript" src="var.js"></script>
</html>
</br></br>
<head>
<script langauge="javascript">
window.setInterval("refreshDiv()", 1);
function refreshDiv(){
document.getElementById("refresh").innerHTML = + total;
}
</script>
<script langauge="javascript">
window.setInterval("refreshDiv()", 1);
function refreshDiv(){
document.getElementById("refresh1").innerHTML;
}
</script>
</head>
<div id="refresh">
<script type="text/javascript">
document.write(total);
</script>
</div></br>
<div id="refresh1">
<script type="text/javascript">
if (total === randnum)
{
answer=("Correct");
document.write(answer);
}
else
{
answer=("Incorrect");
document.write(answer);
}
</script></div></br></br>
<input type="button" value="Restart" onClick="history.go(0)">
So, I don't really get, what you want to do, but I tried to realize what you want to do:
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Binary Learning Tool!</title>
<meta charset="utf-8">
<meta name="description" content="Change image on click with jQuery">
<meta name="keywords" content="Change image on click with jQuery">
<meta name="author" content="">
<link rel="stylesheet" href="style.css" media="all" type="text/css">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script type="text/javascript">
// Define your Variables
var total = 1;
var answer = '';
var randnum = (Math.floor(Math.random() * 2 + 1));
// This function decides whether 'correct' or 'incorrect' should be displayed
function decide_refresh1(tot,rand) {
if(tot == rand) {
return 'correct';
}
return 'incorrect';
}
// This function is called when you click on one of your images, and just calls the decide_refresh1() function and writes the result to the div refresh1.
function reload_refresh1(triggering_object) {
$('#refresh1').html(decide_refresh1(total,randnum));
}
// Code's executed after Website has finsihed loading
$(document).ready(function () {
// Save your divs to variables, makes easier accessable
var div_randum = $('#div_randum');
var div_refresh = $('#refresh');
var div_refresh1 = $('#refresh1');
// Write randnum to div_randnum and total to refresh
div_randum.html('Randnum: '+randnum);
div_refresh.html('Total: '+total);
// Fill refresh1 with correct or incorrect
div_refresh1.html(decide_refresh1(total,randnum));
});
</script>
</head>
<body>
</br>
</br>
</br>
<div id="div_randum"></div>
</br>
<img id="num1" onclick="reload_refresh1(this);" src="/img/0.png" alt="num1" value="32"/>
<img id="num2" onclick="reload_refresh1(this);" src="/img/0.png" alt="num2" value="16" />
<img id="num3" onclick="reload_refresh1(this);" src="/img/0.png" alt="num3" value="8" />
<img id="num4" onclick="reload_refresh1(this);" src="/img/0.png" alt="num4" value="4" />
<img id="num5" onclick="reload_refresh1(this);" src="/img/0.png" alt="num5" value="2" />
<img id="num6" onclick="reload_refresh1(this);" src="/img/1.png" alt="num6" value="1" />
</br>
</br>
<div id="refresh"></div>
</br>
<div id="refresh1"></div>
</br>
</br>
<input type="button" value="Restart" onClick="history.go(0)">
</body>
</html>
I know it is not exactly what you want, but maybe it's a good start. If you have problems, just ask ;-)
Btw: Your source is hell of a mess.
Btw2: Removed your "swap_image();" function for simplicity
Looks like there is an error in your refreshDiv() calls.
Your code:
s<script langauge="javascript">
window.setInterval("refreshDiv()", 1);
function refreshDiv(){
document.getElementById("refresh").innerHTML = + total;
}
</script>
<script langauge="javascript">
window.setInterval("refreshDiv()", 1);
function refreshDiv(){
document.getElementById("refresh1").innerHTML;
}
I suggest not having 2 functions named refreshDiv(). Also, the second RefreshDiv does not have any code to update! The first refreshDiv() has
document.getElementById("refresh").innerHTML = + total
The second one does not.
HTH!