diff --git a/pages/teamdetails.html b/pages/teamdetails.html
index 2433d56..2513dd6 100644
--- a/pages/teamdetails.html
+++ b/pages/teamdetails.html
@@ -21,11 +21,9 @@
 </head>
 <body>
 
-
-
 	<nav>
 		<div class = "heading">
-			<h1> Longmetal 7127 </h1>
+			<h1> Longmetal 7127 pineapple</h1>
 		</div>
 		<div class = "topnav">
 			<a href="../index.html"> Teams </a> 
@@ -66,10 +64,98 @@ <h1> Team Details </h1>
     <h2> Abilities </h2>
 
     <br>
+<!-- Autonomous Survey-->
+    <label for="Autonomous Starting position"> Autonomous Starting Position: </label>
+        <input type="text" id="startingpos" name="startingpos" maxlength="1">
+    
+    <form action="/action_page.php">
+        <input type="checkbox" id="action1" name="Leaveszone" value="leaves">
+        <label for="action1"> Leaves zone</label><br>
+        <input type="checkbox" id="action2.0" name="scores1amp" value="scores1amp">
+        <label for="action2.0"> Scores 1st in amp</label><br>
+        <input type="checkbox" id="action2.1" name="scores1speaker" value="scores1speaker">
+        <label for="action2.1"> Scores 1st in speaker</label><br><br>
+        <input type="checkbox" id="action3" name="picksup" value="picksup">
+        <label for="action3"> Picks up new note</label><br><br>
+        <input type="checkbox" id="action4.0" name="scores2amp" value="scores2amp">
+        <label for="action4.0"> Scores 2nd in amp</label><br>
+        <input type="checkbox" id="action4.1" name="scores2speaker" value="scores2speaker">
+        <label for="action4.1"> Scores 2nd in speaker</label><br><br>
+        
+        </form> 
+
+        <br>
+<!-- Teleop Survey-->
+    <form action="/action_page.php">
+        <p>Preferred scoring method:</p>
+        <input type="radio" id="amp" name="score" value="amp">
+        <label for="amp">Amp</label><br>
+        <input type="radio" id="speaker" name="score" value="speaker">
+        <label for="css">Speaker</label><br>
+        <input type="radio" id="either" name="score" value="either">
+        <label for="either">Either</label>
+        </form>    
+
+        <br>
+
+        <p>Preferred Intake method:</p>
+        <input type="radio" id="ground" name="intake" value="ground">
+        <label for="ground">Ground</label><br>
+        <input type="radio" id="human" name="intake" value="human">
+        <label for="human">Human Player</label><br>
+        <input type="radio" id="" name="intake" value="either">
+        <label for="either">Either</label>
+    </form>    
+
+    <label for="prefintake"> Other: </label>
+    <input type="text" id="" name="prefintake" maxlength="1">
+
+    <br>
+
+    <form action="/action_page.php">
+        <p>Preferred scoring method:</p>
+        <input type="radio" id="amp" name="score" value="amp">
+        <label for="amp">Amp</label><br>
+        <input type="radio" id="speaker" name="score" value="speaker">
+        <label for="css">Speaker</label><br>
+        <input type="radio" id="either" name="score" value="either">
+        <label for="either">Either</label>
+    </form>      
+    
+    <form action="/action_page.php">
+        <p>Stage abilities:</p>
+        <input type="checkbox" id="spotlight" name="spotlight" value="spotlight">
+        <label for="spotlight"> Enters stage</label><br>
+        <input type="checkbox" id="trap" name="trap" value="trap">
+        <label for="trap"> Scores in trapdoor </label><br>
+        <input type="checkbox" id="alone" name="alone" value="alone">
+        <label for="alone"> Hangs alone </label><br>
+        <input type="checkbox" id="another" name="another" value="another">
+        <label for="another"> Hangs with another </label><br>
+    </form>
+
+    <br>
+
+    <!-- Human Player Survey-->
+    <form action="/action_page.php">
+        <input type="checkbox" id="spotlight" name="spotlight" value="spotlight">
+        <label for="spotlight"> Attempts Spotlight</label><br>
+        <input type="checkbox" id="coop" name="coop" value="coop">
+        <label for="coop"> Favors coopertition button</label><br>
+    </form>
+
+    <br>
+
+    <!-- <h1>Team Details</h1>
+    <div id="team-details">
+       Team details will be displayed here 
+    </div> -->
+    
+    <input type="submit" class="submit" id="submit">
+
+    <!-- NOTE: add a "CANCEL" button if any changes are made to the text fields in case changes are not to be saved-->
+
 
-    <input type="submit" class="submitButton" id="submitButton">
-</form>
-</div>
     <script src="teamdetails.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/pages/teamdetails.js b/pages/teamdetails.js
index 97ea393..b15eac4 100644
--- a/pages/teamdetails.js
+++ b/pages/teamdetails.js
@@ -1,27 +1,131 @@
 document.addEventListener('DOMContentLoaded', async () => {
-    // Initialize Dexie database
-    const db = new Dexie("Todo App");
-    db.version(1).stores({
-        todos: '++id, todo, globalid'
+    const urlParams = new URLSearchParams(window.location.search);
+    const id = urlParams.get('id');
+  
+    const nameInput = document.getElementById('teamnumber');
+    const emailInput = document.getElementById('email');
+  
+    // Check if ID exists, if yes, populate the form fields
+    if (id) {
+      try {
+        const response = await fetch(`/getData?id=${id}`);
+        const data = await response.json();
+  
+        // Populate the form fields with existing data
+        nameInput.value = data.teamnumber || '';
+        emailInput.value = data.email || '';
+      } catch (error) {
+        console.error('Error fetching data:', error);
+      }
+    }
+  
+    const form = document.getElementById('dataForm');
+    form.addEventListener('submit', async (event) => {
+      event.preventDefault();
+  
+      const formData = {
+        name: nameInput.value,
+        email: emailInput.value
+      };
+  
+      try {
+        // Handle submitting new information
+        // Here you can send the formData to your server
+        console.log('Submitting data:', formData);
+  
+        // Optionally, you can also save the submitted data to IndexedDB
+        // This ensures that the form is pre-filled the next time it's accessed with the same ID
+        await saveDataToIndexedDB(formData, id);
+  
+        // Reset the form after submission
+        form.reset();
+      } catch (error) {
+        console.error('Error submitting data:', error);
+      }
     });
-
-    // Retrieve data from IndexedDB and fill the textbox if it exists
-    const existingData = await db.todos.get(1); // Assuming you have only one record
-    if (existingData && existingData.todo) {
-        document.getElementById('teamname').value = existingData.todo;
+  });
+  
+  async function saveDataToIndexedDB(data, id) {
+    const db = await openDB('myIndexedDB', 1);
+    const tx = db.transaction('storeName', 'readwrite');
+    const store = tx.objectStore('storeName');
+  
+    // If an ID exists, update existing data; otherwise, add new data
+    if (id) {
+      await store.put(data, id);
+    } else {
+      await store.add(data);
     }
+  
+    await tx.done;
+  }
 
-    // Event listener for submit button
-    document.getElementById('submitButton').addEventListener('click', async () => {
-        const newData = document.getElementById('teamname').value;
 
-        // Save or update data in IndexedDB
-        if (existingData) {
-            await db.todos.update(1, { todo: newData });
-        } else {
-            await db.todos.add({ todo: newData });
-        }
+/* function submitform() {
+    console.log("hello world")
+}
 
-        alert('Data saved successfully!');
-    });
-});
\ No newline at end of file
+document.getElementById("submit").onclick = submitform; */
+
+
+
+// // Initialize IndexedDB database
+
+// //NOTE: we need to rename all of the variables in here from the "To-Do List" template to our "Teams" 
+
+// //NOTE: I added ChatGPT-based explanations to break down this code because otherwise it's unintelligible lol
+
+// // QUESTION: Are teams that are deleted from the site also deleted from the local DB? 
+
+// const db = new Dexie("Todo App");
+// db.version(1).stores({ todos: "++id, todo, globalid" });
+
+//     // the database sets up an object "todos" (need to rename) that consists of:
+//         // ++id - auto-incrementing primary key/field named "id"
+//         // todo - a field called "todo"
+//         // globalid - a field called "globalid," used to identify teams
+
+// // Function to extract query parameter from URL
+// function getQueryParam(name) {
+//     const urlParams = new URLSearchParams(window.location.search);
+//     return urlParams.get(name);
+// }
+
+//     // URLs look like ... /scouting2024/pages/teamdetails.html?globalid=____
+//     // the ? denotes the start of URL/query parameters (which are used to pass data to web page thru URL)
+//     // and globalid has a value (unique UTC time) that identifies the team (i.e. 1708014161661)
+
+// // Function to fetch team details using globalid
+// async function fetchTeamDetails(globalid) {
+//     const team = await db.todos.where({ globalid: Number(globalid) }).first();
+//     return team;
+// }
+
+//     // fetchTeamDetails is where info is pulled from local database 
+
+// // Fetch globalid from URL query parameter
+// const globalid = getQueryParam("globalid");
+
+//     // searches the URL parameters for a key called globalid and saved value in constant 
+
+// /*document.getElementById("submit").addEventListener("submit", function(event){
+//     print("hello world")
+// })*/
+
+// // Fetch and display team details
+// if (globalid) { // if globalid isn't null, undef, empty, etc.
+//     fetchTeamDetails(globalid).then(team => {
+//         if (team) { // if team details successfully fetched
+//             const teamDetailsDiv = document.getElementById("team-details"); // there is a div with id "team-details" on team details page
+//             teamDetailsDiv.innerHTML = `<p>Team Name: ${team.todo}</p>`;
+//         } else { // team details not fetched
+//             const teamDetailsDiv = document.getElementById("team-details");
+//             teamDetailsDiv.innerHTML = `Team not found`;
+//             console.error("Team not found");
+//         }
+//     }).catch(error => {
+//         console.error("Error fetching team details:", error);
+//     });q
+// } else {
+//     console.error("Global ID not found in URL");
+// }
\ No newline at end of file
