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