Hi I'm trying to get my SQL database to update with user input via my HTML form that was displayed from my javascript file. Help is very appreciated :)
index.html
Display Events (HTML)
<!---- My Events ----> <div id="my_events" class="menu_link"> <br> <nav class="clean"> <div class="nav-wrapper"> <div class="col s12"> <a href="#home" class="breadcrumb" onclick="hideAll(); loadPage()">Home</a> <a href="#!" class="breadcrumb blue-text accent-3">My Events</a> </div> </div> </nav> <div class="row"> <div class="col s12"> <h4>My Events</h4> <button onclick="displayEvents(); loadPage()" class="waves-effect waves-light btn indigo">Display Events</button> <!-- Preloader --> <div class="loadprogress indigo darken-4" style="width: 100%"> <div class="runningbar indigo lighten-1"></div> </div> <div class="content"> <!-- Table container --> <table> <!-- <th>Event ID</th> --> <th>Event ID</th> <th>Event Name</th> <th>Event Description</th> <th>Event Category</th> <th>Event Address</th> <th>Event Location</th> <th>Event Date</th> <th>Event Time</th> <table id="eventsTable" class="striped"> <!-- List user events --> </table> </table> </div> </div> </div> </div> Update Events Modal (HTML)
<!---- Update Event Section ----> <!-- Modal Structure --> <div id="update_events" class="modal"> <h5 class="modal-close right" onclick="closeModal()">✕</h5> <div class="modal-content"> </div> </div> script.js
Display Events Fetch (JavaScript)
/* - Display Events - */ function displayEvents() { loadPage(); // Define output string that will display the database data var outStr = ''; var outStr2 = ''; fetch('api/ws.php?action=displayEvents', { method: "GET", credentials: "include", }) .then(function (response) { loadPage(); response.json().then(function (data) { localStorage.setItem("events", JSON.stringify(data)); // console.log(data); data.forEach(row => { outStr += '<tr><td>' + row.eventID + '</td><td>' + row.eventName + '</td><td>' + row.eventDescription + '</td><td>' + row.eventCategory + '</td><td>' + row.eventAddress + '</td><td>' + row.eventLocation + '</td><td>' + row.eventDate + '</td><td>' + row.eventTime + '</td><td><button href="#update_events" class="modal-trigger" onclick="fillUpdate(' + row.eventID + ')" value="' + row.eventID + '"><i class="material-icons">edit</i></button>' + '</td><td>' + '<button onclick="deleteRemoveEvent(' + row.eventID + ')" value="' + row.eventID + '"><i class="material-icons">delete</i></button>' + '</td></tr>'; outStr2 = `<div> <h4>Update Events</h4> <form action="api/ws.php" method="POST" onclick="return preventDefault()" novalidate> <div class="input-field"> <i class="material-icons prefix">title</i> <input id="update_ev_name" name="update_ev_name" placeholder="Event Name" type="text"> </div> <div class="input-field"> <i class="material-icons prefix">notes</i> <textarea id="update_ev_desc" name="update_ev_desc" class="materialize-textarea" placeholder="Event Description"></textarea> </div> <div class="input-field"> <i class="material-icons prefix">category</i> <input type="text" id="update_ev_cat" name="update_ev_cat" placeholder="Enter Your Event Type"> </div> <div class="input-field col s6"> <i class="material-icons prefix">map</i> <input type="text" id="update_ev_address" name="update_ev_address" placeholder="Enter Your Address"> </div> <div class="input-field col s6"> <i class="material-icons prefix">flag</i> <input type="text" id="update_ev_loc" name="update_ev_loc" placeholder="Event Location"> </div> <div class="input-field col s6"> <i class="material-icons prefix">date_range</i> <input type="text" id="update_ev_date" class="datepicker" placeholder="Event Date"> </div> <div class="input-field col s6"> <i class="material-icons prefix">schedule</i> <input type="text" id="update_ev_time" class="timepicker" placeholder="Event Time"> </div> <input type="hidden" name="eventid" value="`+ row.eventID +`" id="eventid"> <input type="hidden" name="action" value="update" id="updateEvent"> <button class="btn waves-effect waves-light" type="submit" onclick="postUpdateEvent(`+ row.eventID +`)">Update Event</button> </form> </div>` }); document.getElementById('eventsTable').innerHTML = outStr; document.getElementById('update_events').innerHTML = outStr2; }); }); } Autofill Update Form (JavaScript)
/* - Autofill Update Form - */ function fillUpdate(eventid) { console.log("Fill event with id " + eventid); events = JSON.parse(localStorage.getItem("events")); // console.log(events); selectedEvent = events.filter(event => event[0] == eventid)[0]; if (selectedEvent != null) { console.log(selectedEvent); document.getElementById("update_ev_name").value = selectedEvent[1]; document.getElementById("update_ev_desc").value = selectedEvent[2]; document.getElementById("update_ev_cat").value = selectedEvent[3]; document.getElementById("update_ev_address").value = selectedEvent[4]; document.getElementById("update_ev_loc").value = selectedEvent[5]; document.getElementById("update_ev_date").value = selectedEvent[6]; document.getElementById("update_ev_time").value = selectedEvent[7]; // document.getElementById("eventid").value = selectedEvent[8]; } } Update Events Function with Fetch (JavaScript)
/* - Update Events - */ function postUpdateEvent(eventid) { console.log("Update event with id " + eventid); events = JSON.parse(localStorage.getItem("events")); selectedEvent = events.filter(event => event[0] == eventid)[0]; var eventid = "eventid"; if (selectedEvent != null) { console.log(selectedEvent); document.getElementById("update_ev_name").value = selectedEvent[1]; document.getElementById("update_ev_desc").value = selectedEvent[2]; document.getElementById("update_ev_cat").value = selectedEvent[3]; document.getElementById("update_ev_address").value = selectedEvent[4]; document.getElementById("update_ev_loc").value = selectedEvent[5]; document.getElementById("update_ev_date").value = selectedEvent[6]; document.getElementById("update_ev_time").value = selectedEvent[7]; // document.getElementById("eventid").value = selectedEvent[8]; } var userUpdate = { 'update_ev_name': document.getElementById("update_ev_name").value, 'update_ev_desc': document.getElementById("update_ev_desc").value, 'update_ev_cat': document.getElementById("update_ev_cat").value, 'update_ev_address': document.getElementById("update_ev_address").value, 'update_ev_loc': document.getElementById("update_ev_loc").value, 'update_ev_date': document.getElementById("update_ev_date").value, 'update_ev_time': document.getElementById("update_ev_time").value } // var updatefd = new FormData(); // updatefd.append('action', 'update'); // updatefd.append('eventid', eventid.value); // updatefd.append('update_ev_name', update_ev_name.value); // updatefd.append('update_ev_desc', update_ev_desc.value); // updatefd.append('update_ev_cat', update_ev_cat.value); // updatefd.append('update_ev_address', update_ev_address.value); // updatefd.append('update_ev_loc', update_ev_loc.value); // updatefd.append('update_ev_date', update_ev_date.value); // updatefd.append('update_ev_time', update_ev_time.value); // updatefd.append('updateEvent', updateEvent.value); fetch('api/ws.php?action=updateEvent', { method: "POST", body: JSON.stringify(userUpdate), credentials: 'include', // body: updatefd, }) // Force error into console .then(function (response) { response.text().then(function (text) { console.log(text); }); // HTTP Response Codes if (response.status === 200) { // loadPage(); console.log(eventid.value); } if (response.status === 202) { console.log('Update Successful'); } if (response.status === 400) { errormessage('Error: Bad Request'); console.log('Bad Request'); console.log(eventid.value); return; } if (response.status === 401) { console.log('Not permitted'); return; } if (response.status === 501) { errormessage('Error: Not implemented'); console.log('Not implemented :('); return; } response.text().then(function (text) { console.log(text); }); }); } ws.php
Switch Case API (PHP)
/* - Display User Events - */ case "displayEvents": // if ($_SESSION['se']->is_logged_in()) { $result = $db->displayEvents(); if ($result == false) { http_response_code(501); } else { http_response_code(202); echo json_encode($result); } // } else { // http_response_code(401); // } break; /* - Autofill the update form - */ case "fillUpdate": if (isset($_POST["action"])) { $result = $_SESSION['se']->is_logged_in(); if ($result == true) { $evid = $_POST['evid']; $details = $db->get_details($evid); if ($details == false) { http_response_code(501); } else { http_response_code(201); echo json_encode($details); } } } break; /* - Update the User Event - */ case "updateEvent": if (isset($_POST["action"])) { // $evid = $_GET['evid']; $_SERVER['REQUEST_METHOD'] == 'POST'; $objreg = json_decode(file_get_contents("php://input"), true); $evid = testInput($objreg['evid']); $update_ev_name = testInput($objreg['update_ev_name']); $update_ev_desc = testInput($objreg['update_ev_desc']); $update_ev_cat = testInput($objreg['update_ev_cat']); $update_ev_address = testInput($objreg['update_ev_address']); $update_ev_loc = testInput($objreg['update_ev_loc']); $update_ev_date = testInput($objreg['update_ev_date']); $update_ev_time = testInput($objreg['update_ev_time']); $db->updateEvent($evid, $update_ev_name, $update_ev_desc, $update_ev_cat, $update_ev_address, $update_ev_loc, $update_ev_date, $update_ev_time); // echo "Record updated successfully"; http_response_code(202); } else { http_response_code(400); } // if ($_POST["eventid"] == null) break; db.php
Database Functions (PHP + SQL)
/* -- Display Events Function -- */ function displayEvents() { db_connection(); try { $stmt = $this->dbconn->prepare('SELECT eventID, eventName, eventDescription, eventCategory, eventAddress, eventLocation, eventDate, eventTime FROM events'); $stmt->execute(); $result = $stmt->fetchAll(); return $result; } catch (PDOException $ex) { throw $ex; } } /* - Autofill the Update Event Form - */ function get_details($evid) { $stmt = $this->dbconn->prepare("SELECT * FROM events WHERE eventID = :eid"); $stmt->bindValue(":eid", $evid); $stmt->execute(); $result = $stmt->fetch(); return $result; } /* -- Update Events Function -- */ public function updateEvent($evid, $update_ev_name, $update_ev_desc, $update_ev_cat, $update_ev_address, $update_ev_loc, $update_ev_date, $update_ev_time) { print_r("hello"); db_connection(); try { $this->dbconn->beginTransaction(); /* --- Event Table --- */ $stmt = $this->dbconn->prepare("UPDATE events SET eventName = :update_ev_name, eventDescription = :update_ev_desc, eventCategory = :update_ev_cat, eventAddress = :update_ev_address, eventLocation = :update_ev_loc, eventDate = :update_ev_date, eventTime = :update_ev_time WHERE eventID = :eid"); // bind values $stmt->bindValue(":eid", $evid); $stmt->bindValue(':update_ev_name', $update_ev_name); $stmt->bindValue(':update_ev_desc', $update_ev_desc); $stmt->bindValue(':update_ev_cat', $update_ev_cat); $stmt->bindValue(':update_ev_address', $update_ev_address); $stmt->bindValue(':update_ev_loc', $update_ev_loc); $stmt->bindValue(':update_ev_date', $update_ev_date); $stmt->bindValue(':update_ev_time', $update_ev_time); // Execute the update statement $stmt->execute(); // Commit changes here $this->dbconn->commit(); } catch (PDOException $ex) { $ex->getMessage(); exit(); } } Errors I'm getting :( and no respose/preview errors in network tab 
没有评论:
发表评论