Add Form Logic
This commit is contained in:
parent
22c0f04cde
commit
2dd1c87bb7
@ -201,9 +201,12 @@ p<!DOCTYPE html>
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
<<<<<<< HEAD
|
<<<<<<< HEAD
|
||||||
|
<<<<<<< HEAD
|
||||||
>>>>>>> a260428 (Dashboard Entry Update)
|
>>>>>>> a260428 (Dashboard Entry Update)
|
||||||
=======
|
=======
|
||||||
|
|
||||||
|
=======
|
||||||
|
>>>>>>> 69bfc65 (Add Form Logic)
|
||||||
<div id="entrycontainer" class="hidden">
|
<div id="entrycontainer" class="hidden">
|
||||||
<div class="addentrydiv">
|
<div class="addentrydiv">
|
||||||
|
|
||||||
@ -212,29 +215,29 @@ p<!DOCTYPE html>
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="fieldcontainer">
|
<div class="fieldcontainer">
|
||||||
<form>
|
<form id="formdata">
|
||||||
<div>
|
<div>
|
||||||
<input type="text" name="sitename" placeholder="Site Name">
|
<input type="text" name="sitename" placeholder="Site Name">
|
||||||
<input type="text" name="url" placeholder="Site URL">
|
<input type="text" name="url" placeholder="Site URL">
|
||||||
<button type="button"></button>
|
<button type="button" onclick="submitForm()"></button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="inputfieldpanel">
|
<div class="inputfieldpanel">
|
||||||
<div>
|
<div>
|
||||||
<input type="checkbox" id="checkbox">
|
<input type="checkbox" id="u_checkbox">
|
||||||
<input type="text" name="Username" placeholder="Username"><br>
|
<input type="text" name="Username" placeholder="Username" id="u_input" disabled><br>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<input type="checkbox" id="checkbox">
|
<input type="checkbox" id="p_checkbox">
|
||||||
<input type="text" name="Password" placeholder="Password"><br>
|
<input type="text" name="Password" placeholder="Password" id="p_input" disabled><br>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<input type="checkbox" id="checkbox">
|
<input type="checkbox" id="e_checkbox">
|
||||||
<input type="text" name="Email" placeholder="Email Address"><br>
|
<input type="text" name="Email" placeholder="Email Address" id="e_input" disabled><br>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<input type="checkbox" id="checkbox">
|
<input type="checkbox" id="n_checkbox">
|
||||||
<input type="text" name="PhNumber" placeholder="Phone Number"><br>
|
<input type="text" name="PhNumber" placeholder="Phone Number" id="n_input" disabled><br>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
@ -54,7 +54,7 @@ function updateListGui(field) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//----------------------------------------------------------------------------------------- Search Bar and Content Formatting
|
||||||
|
|
||||||
|
|
||||||
// const data = {
|
// const data = {
|
||||||
@ -100,7 +100,7 @@ function getDisplayList(fieldnames,userdata){
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//-----------------------------------------------------------------------------------------
|
//----------------------------------------------------------------------------------------- Filter Search
|
||||||
|
|
||||||
const search = document.getElementById('search');
|
const search = document.getElementById('search');
|
||||||
|
|
||||||
@ -127,7 +127,7 @@ function getFilterList(keyword,data) { //Gets Filtered Fie
|
|||||||
//console.log(filterarray)
|
//console.log(filterarray)
|
||||||
}
|
}
|
||||||
|
|
||||||
//-----------------------------------------------------------------------------------------
|
//----------------------------------------------------------------------------------------- "Add Data" Window Logic
|
||||||
|
|
||||||
const addentry = document.getElementById('addentry')
|
const addentry = document.getElementById('addentry')
|
||||||
const entrywindow = document.querySelector('#entrycontainer')
|
const entrywindow = document.querySelector('#entrycontainer')
|
||||||
@ -135,6 +135,7 @@ const entrywindow = document.querySelector('#entrycontainer')
|
|||||||
addentry.addEventListener('click', function() {
|
addentry.addEventListener('click', function() {
|
||||||
entrywindow.classList.toggle("hidden");
|
entrywindow.classList.toggle("hidden");
|
||||||
entrywindow.style.display = "flex";
|
entrywindow.style.display = "flex";
|
||||||
|
addFieldLogic()
|
||||||
})
|
})
|
||||||
|
|
||||||
const exitentrywin = document.getElementById('backbtn')
|
const exitentrywin = document.getElementById('backbtn')
|
||||||
@ -143,13 +144,44 @@ exitentrywin.addEventListener('click', function() {
|
|||||||
entrywindow.style.display = "none"
|
entrywindow.style.display = "none"
|
||||||
})
|
})
|
||||||
|
|
||||||
//-----------------------------------------------------------------------------------------
|
//----------------------------------------------------------------------------------------- Form Behaviour Logic
|
||||||
|
|
||||||
|
function addFieldLogic() {
|
||||||
|
const forminputs = document.querySelectorAll('.inputfieldpanel div input[type="text"]')
|
||||||
|
const formcheckbox = document.querySelectorAll('.inputfieldpanel div input[type="checkbox"]')
|
||||||
|
formcheckbox.forEach((checkbox, index) => {
|
||||||
|
forminputs[index].disabled = true
|
||||||
|
forminputs[index].value = ''
|
||||||
|
checkbox.checked = false;
|
||||||
|
})
|
||||||
|
formcheckbox.forEach((checkbox, index) =>
|
||||||
|
checkbox.addEventListener('change', function(){
|
||||||
|
forminputs[index].disabled = !checkbox.checked;
|
||||||
|
if(forminputs[index].disabled){
|
||||||
|
forminputs[index].value = ''
|
||||||
|
}
|
||||||
|
})
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
//----------------------------------------------------------------------------------------- Form Data Logic
|
||||||
|
|
||||||
|
function submitForm() {
|
||||||
|
const form = document.getElementById('formdata')
|
||||||
|
const formdata = new FormData(form)
|
||||||
|
console.log(formdata)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//----------------------------------------------------------------------------------------- Display User Information
|
||||||
|
|
||||||
function updateInfoGui(call) {
|
function updateInfoGui(call) {
|
||||||
console.log(call)
|
console.log(call)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//----------------------------------------------------------------------------------------- Welcome Message
|
||||||
|
|
||||||
const greettext = document.querySelector('#greetname')
|
const greettext = document.querySelector('#greetname')
|
||||||
const masterusername = localStorage.getItem("username");
|
const masterusername = localStorage.getItem("username");
|
||||||
console.log(masterusername)
|
console.log(masterusername)
|
||||||
@ -158,7 +190,7 @@ function greet(){
|
|||||||
greettext.textContent = masterusername;
|
greettext.textContent = masterusername;
|
||||||
}
|
}
|
||||||
|
|
||||||
//-----------------------------------------------------------------------------------------
|
//----------------------------------------------------------------------------------------- Logout
|
||||||
|
|
||||||
async function logOut() {
|
async function logOut() {
|
||||||
try{
|
try{
|
||||||
@ -193,7 +225,6 @@ logoutbtn.addEventListener('click', () => {
|
|||||||
window.onload = function() {
|
window.onload = function() {
|
||||||
getData();
|
getData();
|
||||||
greet()
|
greet()
|
||||||
|
// entrywindow.classList.toggle("hidden");
|
||||||
entrywindow.classList.toggle("hidden");
|
// entrywindow.style.display = "flex";
|
||||||
entrywindow.style.display = "flex";
|
|
||||||
};
|
};
|
@ -394,7 +394,7 @@ footer p{
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: hsl(0, 0%, 100%, 10%);
|
background-color: hsl(0, 0%, 100%, 10%);
|
||||||
display: flex;
|
display: none;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
backdrop-filter: blur(20px);
|
backdrop-filter: blur(20px);
|
||||||
|
Loading…
x
Reference in New Issue
Block a user