Add Form Logic

This commit is contained in:
Modo 2023-10-21 22:22:49 +05:30
parent 22c0f04cde
commit 2dd1c87bb7
3 changed files with 53 additions and 19 deletions

View File

@ -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>

View File

@ -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";
}; };

View File

@ -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);