I try to develop credit card payment form through using pure CSS and Vanilla JS. Almost, It is done. After submitting the form, thank you section supposed to be displayed, however, it does not work. That section has created by using JS. I do not get it what I am missing. In addition, despite using prevent default, it continues to refresh the page.
Also, after clicking submit button, I want to show alert if input is string rather than number or vice versa. I did not use input number because of the pattern issue. How can I solve it?
Thank you for taking the time.
const holderName = document.querySelector("#name")
const cardNumber = document.querySelector("#card-number");
const cardMonth = document.querySelector("#month")
const cardYear = document.querySelector("#year")
const cvcNumber = document.querySelector("#cvc")
const form = document.querySelector("#form")
const submitBtn = document.querySelector("#submit")
const displayedName = document.querySelector(".displayed-name")
const displayedNumber = document.querySelector(".displayed-number")
const displayedMonth = document.querySelector(".displayed-month")
const displayedYear = document.querySelector(".displayed-year")
const displayedCvc = document.querySelector(".displayed-cvc")
holderName.oninput = () => {
displayedName.textContent = holderName.value.toUpperCase();
}
cardNumber.oninput = () => {
displayedNumber.textContent = cardNumber.value.replace(/[^0-9]+/gi, '').replace(/(.{4})/g, '$1 ');
}
cardMonth.oninput = () => {
displayedMonth.textContent = cardMonth.value.replace(/[^0-9]+/gi, "")
}
cardYear.oninput = () => {
displayedYear.textContent = cardYear.value.replace(/[^0-9]+/gi, "");
}
cvcNumber.oninput = () => {
displayedCvc.textContent = cvcNumber.value.replace(/[^0-9]+/gi, "")
}
submitBtn.addEventListener("submit", (e) => {
e.preventDefault()
ThankYouDisplay()
form.classList.add("hidden");
})
function ThankYouDisplay () {
const main = document.querySelector("main")
const thankSection = document.createElement("section");
thankSection.classList.add("thank-you")
main.appendChild(thankSection)
const thanksDIV = document.createElement("div")
thanksDIV.classList.add("thank-you-wrapper")
thankSection.appendChild(thanksDIV)
const imgComplete = document.createElement("img");
imgComplete.src = "images/icon-complete.svg";
imgComplete.alt = "complete icon"
thanksDIV.appendChild(imgComplete);
const thankYouHeader = document.createElement("h3");
thankYouHeader.textContent = "THANK YOU";
thanksDIV.appendChild(thankYouHeader);
const thankYouText = document.createElement("p");
thankYouText.textContent = "We've added your card details";
thanksDIV.appendChild(thankYouText);
const continueBtn = document.createElement("button");
continueBtn.textContent = "Continue";
thanksDIV.appendChild(continueBtn);
}
Hidden class involves display: none;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="style.css">
<title>Frontend Mentor | Interactive card details form</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk&display=swap" rel="stylesheet">
<script src="credit-card.js" defer></script>
</head>
<body>
<main>
<section class="background-image">
<aside>
<img id="background-img" src="images/bg-main-desktop.png" alt="background-for-desktop">
</aside>
</section>
<section class="card-front">
<div class="logos">
<img src="images/card-logo.svg" alt="">
</div>
<div class="displayed-number">
<span>0000 0000 0000 0000</span>
</div>
<div class="displayed-info">
<span class="displayed-name">Jonathan</span>
<div>
<span class="displayed-month">00</span>
<span>/</span>
<span class="displayed-year">00</span>
</div>
</div>
</section>
<section class="card-back">
<span class="displayed-cvc">000</span>
</section>
<!-- <section class="thank-you hidden">
<div class="thank-you-wrapper">
<img src="images/icon-complete.svg" alt="">
<h3>THANK YOU!</h3>
<p>We've added your card details</p>
<button>Continue</button>
</div>
</section> -->
<section class="form-wrapper">
<div class="form-div">
<form id="form">
<label for="name">CARDHOLDER NAME</label>
<input type="text" name="name" id="name" maxlength="25" required>
<label for="card-number">CARD NUMBER</label>
<input type="text" name="card-number" id="card-number" autocomplete="cc-number" maxlength="16" placeholder="xxxx xxxx xxxx xxxx" required>
<div class="date-and-cvc">
<div class="datefield">
<label for="month">DATE</label>
<div class="date">
<input type="text" name="month" id="month" maxlength="2" placeholder="month" required>
<input type="text" name="year" id="year" maxlength="2" placeholder="year" required>
</div>
</div>
<div class="cvc-field">
<label for="cvc">CVC</label>
<div class="cvc">
<input type="text" name="cvc" id="cvc" maxlength="3" minlength="3" required>
</div>
</div>
</div>
<button id="submit" type="submit">Confirm</button>
</form>
</div>
</section>
</main>
</body>
</html>
The submit should be on the form not on the submission button.
const holderName = document.querySelector("#name")
const cardNumber = document.querySelector("#card-number");
const cardMonth = document.querySelector("#month")
const cardYear = document.querySelector("#year")
const cvcNumber = document.querySelector("#cvc")
const form = document.querySelector("#form")
const submitBtn = document.querySelector("#submit")
const displayedName = document.querySelector(".displayed-name")
const displayedNumber = document.querySelector(".displayed-number")
const displayedMonth = document.querySelector(".displayed-month")
const displayedYear = document.querySelector(".displayed-year")
const displayedCvc = document.querySelector(".displayed-cvc")
holderName.oninput = () => {
displayedName.textContent = holderName.value.toUpperCase();
}
cardNumber.oninput = () => {
displayedNumber.textContent = cardNumber.value.replace(/[^0-9]+/gi, '').replace(/(.{4})/g, '$1 ');
}
cardMonth.oninput = () => {
displayedMonth.textContent = cardMonth.value.replace(/[^0-9]+/gi, "")
}
cardYear.oninput = () => {
displayedYear.textContent = cardYear.value.replace(/[^0-9]+/gi, "");
}
cvcNumber.oninput = () => {
displayedCvc.textContent = cvcNumber.value.replace(/[^0-9]+/gi, "")
}
form.addEventListener("submit", (e) => {
e.preventDefault()
ThankYouDisplay()
form.classList.add("hidden");
})
function ThankYouDisplay () {
const main = document.querySelector("main")
const thankSection = document.createElement("section");
thankSection.classList.add("thank-you")
main.appendChild(thankSection)
const thanksDIV = document.createElement("div")
thanksDIV.classList.add("thank-you-wrapper")
thankSection.appendChild(thanksDIV)
const imgComplete = document.createElement("img");
imgComplete.src = "images/icon-complete.svg";
imgComplete.alt = "complete icon"
thanksDIV.appendChild(imgComplete);
const thankYouHeader = document.createElement("h3");
thankYouHeader.textContent = "THANK YOU";
thanksDIV.appendChild(thankYouHeader);
const thankYouText = document.createElement("p");
thankYouText.textContent = "We've added your card details";
thanksDIV.appendChild(thankYouText);
const continueBtn = document.createElement("button");
continueBtn.textContent = "Continue";
thanksDIV.appendChild(continueBtn);
}
.hidden {
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="style.css">
<title>Frontend Mentor | Interactive card details form</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk&display=swap" rel="stylesheet">
<script src="credit-card.js" defer></script>
</head>
<body>
<main>
<section class="background-image">
<aside>
<img id="background-img" src="images/bg-main-desktop.png" alt="background-for-desktop">
</aside>
</section>
<section class="card-front">
<div class="logos">
<img src="images/card-logo.svg" alt="">
</div>
<div class="displayed-number">
<span>0000 0000 0000 0000</span>
</div>
<div class="displayed-info">
<span class="displayed-name">Jonathan</span>
<div>
<span class="displayed-month">00</span>
<span>/</span>
<span class="displayed-year">00</span>
</div>
</div>
</section>
<section class="card-back">
<span class="displayed-cvc">000</span>
</section>
<!-- <section class="thank-you hidden">
<div class="thank-you-wrapper">
<img src="images/icon-complete.svg" alt="">
<h3>THANK YOU!</h3>
<p>We've added your card details</p>
<button>Continue</button>
</div>
</section> -->
<section class="form-wrapper">
<div class="form-div">
<form id="form">
<label for="name">CARDHOLDER NAME</label>
<input type="text" name="name" id="name" maxlength="25" required>
<label for="card-number">CARD NUMBER</label>
<input type="text" name="card-number" id="card-number" autocomplete="cc-number" maxlength="16" placeholder="xxxx xxxx xxxx xxxx" required>
<div class="date-and-cvc">
<div class="datefield">
<label for="month">DATE</label>
<div class="date">
<input type="text" name="month" id="month" maxlength="2" placeholder="month" required>
<input type="text" name="year" id="year" maxlength="2" placeholder="year" required>
</div>
</div>
<div class="cvc-field">
<label for="cvc">CVC</label>
<div class="cvc">
<input type="text" name="cvc" id="cvc" maxlength="3" minlength="3" required>
</div>
</div>
</div>
<button id="submit" type="submit">Confirm</button>
</form>
</div>
</section>
</main>
</body>
</html>
Related
I'm trying to get the percentage from the "timeSpend" and "breakTime" and store in fSubject,sSubject, tSubject and store it in dataset: date[],
so that it can output it but it just gives the value of "timeSpend" and "breakTime" not fSubject,sSubject, tSubject. Also the colour is not working I don't know why enter image description here
let timeSpend = document.querySelector("#time_spend");
let breakTime = document.querySelector("#break_time");
let fSubject = document.querySelector("#first_subjects");
let sSubject = document.querySelector("#second_subjects");
let tSubject = document.querySelector("#third_subjects");
let mostCon = document.querySelector("#first_percentage");
let secCon = document.querySelector("#second_percentage");
let thirdCon = document.queryCommandValue("#third_percentage");
let fSubjectV = (mostCon/100) * (timeSpend + breakTime);
let sSubjectV = (secCon/100)* (timeSpend + breakTime);
let tSubjectV = (thirdCon/100)* (timeSpend + breakTime);
let myChart = document.getElementById("myChart").getContext("2d");
document.querySelector("button").addEventListener("click", () => {
let pieChart = new Chart(myChart, {
type: "pie",
data: {
labels: [
"Time spend",
"Break Time",
fSubject.value,
sSubject.value,
tSubject.value,
],
datasets: [
{
label: "Plan",
data: [
timeSpend.value,
breakTime.value,
mostCon.value,
secCon.value,
thirdCon.value,
],
},
],
},
options: {},
});
});
HTML where I make an input and get the input from
<!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.0" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<link rel="stylesheet" href="CSS/main-style.css" />
<title>Student Planner</title>
</head>
<body>
<header>
<div class="title">
<h1>THE STUDENT PLANNER</h1>
</div>
<div class="sub_header">
<h3>A SIMPLE PLANNER TO ORGANISE YOUR TIME</h3>
<h3>LET'S PLAN YOUR SESSION</h3>
</div>
</header>
<main>
<input type="number" id="time_spend" class="text-box" placeholder="How much time do you have?" />
<input type="number" id="break_time" class="text-box" placeholder="how many breaks do you want to have?" /><br>
<input type="text" id="first_subjects" class="subjects-box" placeholder="Most confident subject?" /><input type="number" id="first_percentage" class="percantage_subject" placeholder="Understand percentage ">
<input type="text" id="second_subjects" class="subjects-box" placeholder="Second confident subject?" /><input type="number" id="second_percentage" class="percantage_subject" placeholder="Understand percentage ">
<input type="text" id="third_subjects" class="subjects-box" placeholder="Third subject?" /> <input type="number" id="third_percentage" class="percantage_subject" placeholder="Understand percentage ">
<br>
<button type="button" class="button">Finished</button>
<div class="container">
<canvas id="myChart"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script src="JS/main.js"></script>
</main>
<footer>
<p>© DK_CODE</p>
<p>12/3/2022</p>
</footer>
</body>
</html>
you need to initialize all variables into the function of button click, instead of the outside that function.
what happening in your case is, all variables are loading only once when main.js is loading and at that time your input field's values will be blank. so, your all variables will be loaded with blank values, that's why the chart is blank.
Check below code:
document.querySelector("button").addEventListener("click", () => {
let timeSpend = document.querySelector("#time_spend").value;
let breakTime = document.querySelector("#break_time").value;
let fSubject = document.querySelector("#first_subjects").value;
let sSubject = document.querySelector("#second_subjects").value;
let tSubject = document.querySelector("#third_subjects").value;
let mostCon = document.querySelector("#first_percentage").value;
let secCon = document.querySelector("#second_percentage").value;
let thirdCon = document.querySelector("#third_percentage").value;
let fSubjectV = (mostCon / 100) * (timeSpend + breakTime);
let sSubjectV = (secCon / 100) * (timeSpend + breakTime);
let tSubjectV = (thirdCon / 100) * (timeSpend + breakTime);
const canvasEle = document.createElement("canvas");
canvasEle.id = "myChart";
let myChart = canvasEle.getContext("2d");
const firstEle = document.getElementsByClassName("container")[0].children[0];
if (firstEle) {
document
.getElementsByClassName("container")[0]
.replaceChild(canvasEle, firstEle);
} else {
document.getElementsByClassName("container")[0].appendChilde(canvasEle);
}
let pieChart = new Chart(myChart, {
type: "pie",
data: {
labels: ["Time spend", "Break Time", fSubject, sSubject, tSubject],
datasets: [
{
label: "Plan",
data: [timeSpend, breakTime, mostCon, secCon, thirdCon],
backgroundColor: ["black", "red", "orange", "green", "blue"]
}
]
},
options: {}
});
});
.container{
height:500px;
width:500px;
}
<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.0" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<link rel="stylesheet" href="CSS/main-style.css" />
<title>Student Planner</title>
</head>
<body>
<header>
<div class="title">
<h1>THE STUDENT PLANNER</h1>
</div>
<div class="sub_header">
<h3>A SIMPLE PLANNER TO ORGANISE YOUR TIME</h3>
<h3>LET'S PLAN YOUR SESSION</h3>
</div>
</header>
<main>
<input type="number" id="time_spend" class="text-box" placeholder="How much time do you have?" />
<input type="number" id="break_time" class="text-box" placeholder="how many breaks do you want to have?" />
<br>
<input type="text" id="first_subjects" class="subjects-box" placeholder="Most confident subject?" />
<input type="number" id="first_percentage" class="percantage_subject" placeholder="Understand percentage ">
<input type="text" id="second_subjects" class="subjects-box" placeholder="Second confident subject?" />
<input type="number" id="second_percentage" class="percantage_subject" placeholder="Understand percentage ">
<input type="text" id="third_subjects" class="subjects-box" placeholder="Third subject?" />
<input type="number" id="third_percentage" class="percantage_subject" placeholder="Understand percentage ">
<br>
<button type="button" class="button">Finished</button>
<div class="container">
<canvas id="myChart"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script src="JS/main.js"></script>
</main>
<footer>
<p>© DK_CODE</p>
<p>12/3/2022</p>
</footer>
</body>
</html>
I am trying to add a style [text-decoration: line-through] to a value of an object property. How to add the style at javascript code line no 28 closeIssue?
I want to add style to the currentIssue.description.
Here is my code:
document.getElementById('issueInputForm').addEventListener('submit', submitIssue);
function submitIssue(e) {
const getInputValue = id => document.getElementById(id).value;
const description = getInputValue('issueDescription');
const severity = getInputValue('issueSeverity');
const assignedTo = getInputValue('issueAssignedTo');
const id = Math.floor(Math.random() * 100000000) + '';
const status = 'Open';
const issue = { id, description, severity, assignedTo, status }; // issue = object
let issues = [];
if (localStorage.getItem('issues')) {
issues = JSON.parse(localStorage.getItem('issues'));
}
issues.push(issue);
localStorage.setItem('issues', JSON.stringify(issues));
document.getElementById('issueInputForm').reset();
fetchIssues();
e.preventDefault();
}
const closeIssue = id => {
const issues = JSON.parse(localStorage.getItem('issues'));
const currentIssue = issues.find(issue => issue.id == id);
currentIssue.status = 'Closed';
// How to add a style on "currentIssue.description"
localStorage.setItem('issues', JSON.stringify(issues));
fetchIssues();
}
const deleteIssue = id => {
const issues = JSON.parse(localStorage.getItem('issues'));
const remainingIssues = issues.filter(issue => issue.id != id)
localStorage.setItem('issues', JSON.stringify(remainingIssues));
fetchIssues();
}
const fetchIssues = () => {
const issues = JSON.parse(localStorage.getItem('issues'));
const issuesList = document.getElementById('issuesList');
issuesList.innerHTML = '';
for (var i = 0; i < issues.length; i++) {
const { id, description, severity, assignedTo, status } = issues[i];
issuesList.innerHTML += `<div class="well">
<h6>Issue ID: ${id} </h6>
<p><span class="label label-info"> ${status} </span></p>
<h3 id="xxx"> ${description} </h3>
<p><span class="glyphicon glyphicon-time"></span> ${severity}</p>
<p><span class="glyphicon glyphicon-user"></span> ${assignedTo}</p>
Close
Delete
</div>`;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Issue Tracker: </title>
<!-- 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">
<style>
.lt {
text-decoration: line-through;
}
</style>
</head>
<body onload="fetchIssues()">
<div class="container">
<h1>Issue Tracker: <span id="issue-counter"></span></h1>
<div class="jumbotron">
<h3>Add New Issue:</h3>
<form id="issueInputForm">
<div class="form-group">
<label for="issueDescription">Description</label>
<input type="text" class="form-control" id="issueDescription" placeholder="Describe the issue ...">
</div>
<div class="form-group">
<label for="issueSeverity">Severity</label>
<select id="issueSeverity" class="form-control">
<option value="Low">Low</option>
<option value="Medium">Medium</option>
<option value="High">High</option>
</select>
</div>
<div class="form-group">
<label for="issueAssignedTo">Assigned To</label>
<input type="text" class="form-control" id="issueAssignedTo" placeholder="Enter responsible ...">
</div>
<button type="submit" class="btn btn-primary">Add</button>
</form>
</div>
<div class="col-lg-12">
<div id="issuesList"></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<!-- 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>
<script src="main.js"></script>
</body>
</html>
How can I do that?
man u can try this :
value.style.textDecoration = 'line-through'
hey i need help with creating a delete button for my "notes" so it will delete it from the screen and the localstorage (u will notice i tried to make a delBtn function but with no success) i would appreciate if someone could post a fix to mine and explain me where i went wrong.
My JS
const tableBody = document.getElementById("tableBody");
const taskInfo = document.getElementById("taskInfo");
const taskDate = document.getElementById("taskDate");
const taskTime = document.getElementById("taskTime");
const delBtn = document.getElementById("delBtn")
let x = new Task("this is a test", "2021-04-14", "03:19");
let y = new Task("this is a 2nd test", "2021-04-14", "03:19");
//x.add();
//y.add();
let taskList = [
x, y, (new Task("this is a 3rd test", "2021-04-14", "03:19"))
];
if (localStorage.savedTaskList)
taskList = JSON.parse(localStorage.savedTaskList);
displayTable();
function displayTable() {
tableBody.innerHTML = "";
for (let task of taskList) {
const div = document.createElement("div");
div.setAttribute("class","taskZone");
const divTaskInfo = document.createElement("div");
divTaskInfo.setAttribute("class","taskInfo");
const divTaskDate = document.createElement("div");
divTaskDate.setAttribute("class","taskDate");
const divTaskTime = document.createElement("div");
divTaskTime.setAttribute("class","taskTime");
const delBtn = document.createElement("span");
delBtn.setAttribute("class","delBtn");
divTaskInfo.innerText = task.taskInfo;
divTaskDate.innerText = task.taskDate;
divTaskTime.innerText = task.taskTime;
div.append(divTaskInfo, divTaskDate, divTaskTime);
tableBody.appendChild(div);
}
}
delBtn.onclick = function delTask() {
delBtn.parentNode.removeChild(taskZoneElmToDel)
}
function addTask() {
if (taskInfo.value == '' || taskDate.value == '' || taskTime.value == '') {
return alert(`Please fill all the fields.`);
}else{newTask = new Task(taskInfo.value, taskDate.value, taskTime.value);
taskList.push(newTask);
localStorage.savedTaskList = JSON.stringify(taskList);
displayTable();
}
}
Thats the Html part of it
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Task Board</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
</head>
<body>
<div class="scaleable-wrapper" id="scaleable-wrapper">
<div class="very-specific-design" id="very-specific-design">
<header class="Title">
My Task Board
</header>
<div id="Input">
</br>
</br>
<form class="Form" id="formInfo">
<label for="taskInfo">Task Info:</label>
<input type="text" id="taskInfo" name="taskInfo" required autofocus></input></br>
<label for="taskDate">Task Date:</label>
<input type="date" id="taskDate" name="taskDate" required></input></br>
<label for="taskTime">Task Time:</label>
<input type="time" id="taskTime" name="taskTime" required></input></br>
<input type="submit" id="addTaskDiv" class="btn" value="Save" onclick="addTask()"></input>
<input type="reset" id="resetForm" class="btn"></input>
</form>
</br>
</br>
</div>
<div class="outNotes"></div>
<div class="tableBody">
<table>
<tbody id="tableBody">
</tbody>
</table>
</div>
</div>
</div>
<input type="button" id="delBtn">x</input>
</body>
<script src="Task.js"></script>
<script src="script2.js"></script>
</html>
I got this code for an array an infinite array in javascript and I can add more to it delete from it update elements inside of it.
I need to show that array as a table in html page the design does not matter I can work on that.
I am only allowed to use JavaScript not jQuery, I'm really not sure what to do here.
let students = [];
let x = 0;
document.getElementById("submit").addEventListener("click", (e) => {
e.preventDefault();
let nameInputEl = document.getElementById("name");
let idInputEl = document.getElementById("idNumber");
let gdpaInputEl = document.getElementById("gdpa");
// Validation for input
inputValidation(nameInputEl.value, idInputEl.value, gdpaInputEl.value);
// insert student
if (x == 1) {
insertStudent(nameInputEl.value, idInputEl.value, gdpaInputEl.value);
}
// Show success message
});
function inputValidation(name, id, gdpa) {
// check for the value of each element
if (name == "") {
document.getElementById("Error101").style.display = "block";
} else if (id == "") {
document.getElementById("Error101").style.display = "block";
} else if (gdpa == "") {
document.getElementById("Error101").style.display = "block";
} else {
document.getElementById("Succes101").style.display = "block";
x = 1;
}
setTimeout(function() {
document.getElementById("Error101").style.display = "none";
document.getElementById("Succes101").style.display = "none";
}, 3000);
}
function insertStudent(name, id, gdpa) {
let student = {
name: name,
id: id,
gdpa: gdpa,
};
students.push(student);
console.log("students array: ", students);
x = 0;
}
function showList() {
students.forEach(element => {
document.getElementById("showLi").innerHTML = (students);
});
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="assets/style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>School Managment System</title>
</head>
<body>
<div class="container">
<div class="big-title">
<h2 class="title">Assignment</h2>
<span class="ligne"> </span>
</div>
<div class="big_box col-md-12">
<form>
<!-- student name -->
<div class="from-control col-md-4">
<label for="name" class="Name_Label">Student Name</label>
<input type="text" class="Name_Input" id="name" placeholder="jo aqra" />
</div>
<!-- student name -->
<!-- student id -->
<div class="from-control col-md-4">
<label for="idNumber" class="NO_Label">Student ID</label>
<input type="number" class="NO_Input" id="idNumber" placeholder="411420876" />
</div>
<!-- student id -->
<!-- student gdpa -->
<div class="from-control col-md-4">
<label for="gdpa" class="gp_Label">Student GDPA</label>
<input type="number" step="0.01" class="gp_Input" id="gdpa" placeholder="3.50" />
</div>
<!-- student gdpa -->
<div class="col-md-12">
<button id="submit" type="submit">Add</button>
<button id="list" id="list" type="button" onclick="showList()">Show</button>
</div>
</form>
</div>
</div>
<div id="ShowLi"></div>
<div class="Error" id="Error101" aria-hidden="true"><i class="far fa-times-circle"></i>Please fill all the empty fields</div>
<div class="Succes" id="Succes101" aria-hidden="true"><i class="fas fa-check"></i>Student added</div>
<script src="./src/main.js"></script>
</body>
</html>
You mean this
document.getElementById("ShowLi").innerHTML = students
.map(({ name, id, gdpa }) => `<tr><td>${name}</td><td>${id}</td><td>${gdpa}</td></tr>`)
.join("");
I added a table inside the div
let students = [];
let x = 0;
document.getElementById("submit").addEventListener("click", (e) => {
e.preventDefault();
let nameInputEl = document.getElementById("name");
let idInputEl = document.getElementById("idNumber");
let gdpaInputEl = document.getElementById("gdpa");
// Validation for input
inputValidation(nameInputEl.value, idInputEl.value, gdpaInputEl.value);
// insert student
if (x == 1) {
insertStudent(nameInputEl.value, idInputEl.value, gdpaInputEl.value);
}
// Show success message
});
function inputValidation(name, id, gdpa) {
// check for the value of each element
if (name == "") {
document.getElementById("Error101").style.display = "block";
} else if (id == "") {
document.getElementById("Error101").style.display = "block";
} else if (gdpa == "") {
document.getElementById("Error101").style.display = "block";
} else {
document.getElementById("Succes101").style.display = "block";
x = 1;
}
setTimeout(function() {
document.getElementById("Error101").style.display = "none";
document.getElementById("Succes101").style.display = "none";
}, 3000);
}
function insertStudent(name, id, gdpa) {
let student = {
name: name,
id: id,
gdpa: gdpa,
};
students.push(student);
console.log("students array: ", students);
x = 0;
}
function showList() {
document.getElementById("ShowLi").innerHTML = students
.map(({ name, id, gdpa }) => `<tr><td>${name}</td><td>${id}</td><td>${gdpa}</td></tr>`)
.join("");
document.getElementById("showTable").classList.remove("hide");
}
.hide { display:none }
#showTable tr td { border: 1px solid black; padding: 3px; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="assets/style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>School Managment System</title>
</head>
<body>
<div class="container">
<div class="big-title">
<h2 class="title">Assignment</h2>
<span class="ligne"> </span>
</div>
<div class="big_box col-md-12">
<form>
<!-- student name -->
<div class="from-control col-md-4">
<label for="name" class="Name_Label">Student Name</label>
<input type="text" class="Name_Input" id="name" placeholder="jo aqra" />
</div>
<!-- student name -->
<!-- student id -->
<div class="from-control col-md-4">
<label for="idNumber" class="NO_Label">Student ID</label>
<input type="number" class="NO_Input" id="idNumber" placeholder="411420876" />
</div>
<!-- student id -->
<!-- student gdpa -->
<div class="from-control col-md-4">
<label for="gdpa" class="gp_Label">Student GDPA</label>
<input type="number" step="0.01" class="gp_Input" id="gdpa" placeholder="3.50" />
</div>
<!-- student gdpa -->
<div class="col-md-12">
<button id="submit" type="submit">Add</button>
<button id="list" id="list" type="button" onclick="showList()">Show</button>
</div>
</form>
</div>
</div>
<div>
<table id="showTable" class="hide">
<thead>
<tr>
<th>Name</th>
<th>ID</th>
<th>GDPA</th>
</tr>
</thead>
<tbody id="ShowLi"></tbody>
</table>
</div>
<div class="Error" id="Error101" aria-hidden="true"><i class="far fa-times-circle"></i>Please fill all the empty fields</div>
<div class="Succes" id="Succes101" aria-hidden="true"><i class="fas fa-check"></i>Student added</div>
<script src="./src/main.js"></script>
</body>
</html>
let students = [];
let x = 0;
document.getElementById("submit").addEventListener("click", (e) => {
e.preventDefault();
let nameInputEl = document.getElementById("name");
let idInputEl = document.getElementById("idNumber");
let gdpaInputEl = document.getElementById("gdpa");
// Validation for input
inputValidation(nameInputEl.value, idInputEl.value, gdpaInputEl.value);
// insert student
if (x == 1) {
insertStudent(nameInputEl.value, idInputEl.value, gdpaInputEl.value);
}
// Show success message
});
function inputValidation(name, id, gdpa) {
// check for the value of each element
if (name == "") {
document.getElementById("Error101").style.display = "block";
} else if (id == "") {
document.getElementById("Error101").style.display = "block";
} else if (gdpa == "") {
document.getElementById("Error101").style.display = "block";
} else {
document.getElementById("Succes101").style.display = "block";
x = 1;
}
setTimeout(function() {
document.getElementById("Error101").style.display = "none";
document.getElementById("Succes101").style.display = "none";
}, 3000);
}
function insertStudent(name, id, gdpa) {
let student = {
name: name,
id: id,
gdpa: gdpa,
};
students.push(student);
console.log("students array: ", students);
x = 0;
}
function showList() {
const resultElement = document.getElementById("showli");
while(resultElement.firstChild && resultElement.removeChild(resultElement.firstChild));
var table = document.getElementById("showli").appendChild( document.createElement('table') );
students.forEach((element, i) => {
var row = table.insertRow(i);
var j = 0;
for (const v of Object.keys(element)) {
row.insertCell(j).innerText = element[v];
j++;
}
});
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="assets/style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>School Managment System</title>
</head>
<body>
<div class="container">
<div class="big-title">
<h2 class="title">Assignment</h2>
<span class="ligne"> </span>
</div>
<div class="big_box col-md-12">
<form>
<!-- student name -->
<div class="from-control col-md-4">
<label for="name" class="Name_Label">Student Name</label>
<input type="text" class="Name_Input" id="name" placeholder="jo aqra" />
</div>
<!-- student name -->
<!-- student id -->
<div class="from-control col-md-4">
<label for="idNumber" class="NO_Label">Student ID</label>
<input type="number" class="NO_Input" id="idNumber" placeholder="411420876" />
</div>
<!-- student id -->
<!-- student gdpa -->
<div class="from-control col-md-4">
<label for="gdpa" class="gp_Label">Student GDPA</label>
<input type="number" step="0.01" class="gp_Input" id="gdpa" placeholder="3.50" />
</div>
<!-- student gdpa -->
<div class="col-md-12">
<button id="submit" type="submit">Add</button>
<button id="list" id="list" type="button" onclick="showList()">Show</button>
</div>
</form>
</div>
</div>
<div id="showli"></div>
<div class="Error" id="Error101" aria-hidden="true"><i class="far fa-times-circle"></i>Please fill all the empty fields</div>
<div class="Succes" id="Succes101" aria-hidden="true"><i class="fas fa-check"></i>Student added</div>
<script src="./src/main.js"></script>
</body>
</html>
So I am working on this project and I use a barcode scanner that has Windows CE 5.0 as its operating system. whenever I scan the barcode, the page automatically refreshes which should not. After it scans the barcode the user should be able to enter a number for quantity and after that the user will click the preview button which will take the user to another page. I've searched the net for solutions for this problem but still does not work. Help Please. Thank you.
<?php
include("webconfig.php");
ob_start();
session_start();
if(!isset($_SESSION["USER_CODE"]) || $_SESSION["ACTIVE"] == '0')
header("location:login.php");
$barcode = $_REQUEST["barcode"];
$item_desc = $_REQUEST["item_desc"];
$price = $_REQUEST["price"];
$quantity = $_REQUEST["txtQty"];
$pricef = number_format($price, 2);
$sql = ibase_query($conn, "SELECT * FROM ITEM_MASTER WHERE ITEM_CODE = '$barcode'") or die(ibase_errmsg());
$row = ibase_fetch_assoc($sql);
$imgname = $row['IMGNAME'];
?>
<!DOCTYPE html>
<html>
<head>
<link href="docs/css/metro.css" rel="stylesheet">
<link href="docs/css/metro-icons.css" rel="stylesheet">
<link href="docs/css/docs.css" rel="stylesheet">
<script src="docs/js/jquery-2.1.3.min.js"></script>
<script src="docs/js/metro.js"></script>
<script src="docs/js/docs.js"></script>
<script src="docs/js/prettify/run_prettify.js"></script>
<script src="docs/js/ga.js"></script>
<script src="js/jquery.js"></script>
<script src="js/jquery.ajaxcomplete.js"></script>
<script type="text/javascript" src="keyboard.js" charset="UTF-8"></script>
<link rel="stylesheet" type="text/css" href="keyboard.css">
<link rel="shortcut icon" href="_img/assigns-favicon.PNG">
<title>Albert Smith Signs - Warehouse Inventory System</title>
</head>
<body>
<div class="page-content">
<div class="align-center">
<div class="container">
<!-- Default -->
<div class="panel">
<div class="content">
<div class="grid">
<div class="row cells12">
<!-- Default -->
<div class="panel">
<div class="heading">
<span class="title">ENTER QUANTITY</span>
</div>
<div class="content">
<div class="grid">
<div class="row cells12">
<div class="cell colspan12">
<form onsubmit="return false;" method="post">
<label>Enter Quantity</label>
<br />
<div class="input-control text full-size" placeholder="Type search keyword here" data-role="input">
<!-- <input name="txtQty" class="keyboardInput" style="width: 225px;" type="text" value="1" autocomplete="off" /> -->
Scan Barcode
<input name="txtBarcode" id="ip" type="text" autofocus />
<br />
<br />
Enter Quantity
<input name="txtQty" id="next" type="text" />
</div>
<div class="cell colspan12">
<hr>
<br />
<br />
<br />
<br />
<br />
<input type="submit" onsubmit="return true;" name="btnPreview" style="width:80px; height:50px;" class="button primary rounded large-button" value="Preview" />
</div>
</div>
<?php
if(isset($_POST['btnPreview']) && $_POST['txtQty'] > 0)
{
$quantity = $_POST['txtQty'];
$barcode = $_POST['txtBarcode'];
$sql = "SELECT * FROM ITEM_MASTER WHERE ITEM_CODE = '$barcode'";
$query = ibase_query($conn, $sql) or die(ibase_errmsg());
if ($row = ibase_fetch_assoc($query))
{
$item_desc = $row['ITEM_DESC'];
$price = $row['COST'];
header("location:preview.php?barcode=$barcode&quantity=$quantity&item_desc=$item_desc&price=$price");
}
else{
echo "Barcode not found";
}
}
?>
</form>
<div class="cell colspan1">
</div>
</div>
</div>
</div>
</div><!-- panel -->
</div><!-- row cells12 -->
</div><!-- grid -->
</div><!-- content -->
</div><!-- panel -->
</div>
</div>
</div>
<script>
//$("#ip").focus();
/*var d = false;
$("#ip").on('change', function(){
//$("#ip").keyup(function(){
if(d == false){
$(".block").animate({"top": "-=50px"});
d = true;
}
var v = $(this).val();
$(".res").html("Search results for " + v );
$("#next").focus();
});*/
$("#ip").focus();
function init() {
key_count_global = 0; // Global variable
document.getElementById("ip").onkeypress = function() {
key_count_global++;
setTimeout("lookup("+key_count_global+")", 1000);//Function will be called 1 second after user types anything. Feel free to change this value.
}
}
window.onload = init; //or $(document).ready(init); - for jQuery
function lookup(key_count) {
if(key_count == key_count_global) { // The control will reach this point 1 second after user stops typing.
// Do the ajax lookup here.
$("#next").focus();
}
}
</script>
</body>
</html>
It is supposed to do that. But you can stop it this way:
<form method="post" name="form" id="form" onsubmit="return false;">
Add this to your FORM like you see above.
onsubmit="return false;"
That will stop it from refreshing the page.