mirror of
https://github.com/ClaytonWWilson/FightHub.git
synced 2025-12-15 15:18:46 +00:00
Updated update.php and add JS to it for textbox error checking
This commit is contained in:
parent
d82c70f94c
commit
dbe0ba85fb
@ -4,6 +4,7 @@
|
||||
<link rel="stylesheet" href="main.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Titlebar -->
|
||||
<form class="search" action="search.php">
|
||||
<h1 class="title-text">FightHub</h1>
|
||||
<input type="text" name="query" class="search" placeholder="Search..">
|
||||
|
||||
47
main.css
47
main.css
@ -3,23 +3,9 @@ body {
|
||||
}
|
||||
|
||||
|
||||
/* form.search {
|
||||
width: 80%;
|
||||
height: 150px;
|
||||
border: white solid 1px;
|
||||
border-bottom: #727272 solid 2px;
|
||||
} */
|
||||
/* Styles for titlebar */
|
||||
|
||||
/* div.upload {
|
||||
width: 5%;
|
||||
height: 150px;
|
||||
border: white solid 1px;
|
||||
border-bottom: #727272 solid 2px;
|
||||
display: block;
|
||||
float: left;
|
||||
} */
|
||||
|
||||
form {
|
||||
form.search {
|
||||
/* border: white solid 1px; */
|
||||
height: 150px;
|
||||
margin-top: -10px !important;
|
||||
@ -27,11 +13,6 @@ form {
|
||||
border-bottom: #727272 solid 2px;
|
||||
}
|
||||
|
||||
/* div.titlebar-container {
|
||||
border: white solid 1px;
|
||||
border-bottom: #727272 solid 2px;
|
||||
} */
|
||||
|
||||
.title-text {
|
||||
float: left;
|
||||
margin-top: 26px;
|
||||
@ -59,4 +40,28 @@ img.upload {
|
||||
/* margin-bottom: -17px; */
|
||||
margin-top: 45px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
|
||||
/* Styles for upload.php */
|
||||
|
||||
form.upload-form {
|
||||
/* border: white solid 1px; */
|
||||
border-left: #727272 solid 2px;
|
||||
border-right: #727272 solid 2px;
|
||||
margin: 0 25% 0 25%;
|
||||
}
|
||||
|
||||
.upload-form input, .upload-form textarea, .upload-form select {
|
||||
display: block;
|
||||
margin-left: 20px;
|
||||
/* margin-bottom: 30px; */
|
||||
/* border: white solid 1px; */
|
||||
}
|
||||
|
||||
.upload-form h3 {
|
||||
color: #FF3D53;
|
||||
/* border: white solid 1px; */
|
||||
margin-bottom: 0px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
106
scripts/main.js
Normal file
106
scripts/main.js
Normal file
@ -0,0 +1,106 @@
|
||||
|
||||
// Validates the data inputs on the upload form
|
||||
function validateUpload() {
|
||||
// console.log("Validated!");
|
||||
// document.getElementById("upload-form").submit();
|
||||
|
||||
var url_bar = document.getElementById('url');
|
||||
var video_title = document.getElementById('title');
|
||||
var username = document.getElementById('username');
|
||||
// var description = document.getElementById('description'); // optional
|
||||
var video_date = document.getElementById('video-date');
|
||||
// var length = document.getElementById('length'); // optional
|
||||
var characters = document.getElementById('characters');
|
||||
var players = document.getElementById('players');
|
||||
var game = document.getElementById('game');
|
||||
var stage = document.getElementById('stage');
|
||||
|
||||
// console.log('url_bar: ' + url_bar);
|
||||
// console.log('video_title: ' + video_title);
|
||||
// console.log('username: ' + username);
|
||||
// console.log('description: ' + description);
|
||||
// console.log('video_date: ' + video_date);
|
||||
// console.log('length: ' + length);
|
||||
// console.log('characters: ' + characters);
|
||||
// console.log('players: ' + players);
|
||||
// console.log('game: ' + game);
|
||||
// console.log('stage: ' + stage);
|
||||
|
||||
|
||||
// Checking that the required text boxes are filled in, and highlighting them red
|
||||
// if they are not
|
||||
var form_complete = true;
|
||||
|
||||
// URL
|
||||
if (url_bar.value == "") {
|
||||
form_complete = false;
|
||||
url_bar.style = "border-color:red;"
|
||||
} else {
|
||||
url_bar.style = "border-color:green;"
|
||||
}
|
||||
|
||||
// Video Title
|
||||
if (video_title.value == "") {
|
||||
form_complete = false;
|
||||
video_title.style = "border-color:red;"
|
||||
} else {
|
||||
video_title.style = "border-color:green;"
|
||||
}
|
||||
|
||||
// Username
|
||||
if (username.value == "") {
|
||||
form_complete = false;
|
||||
username.style = "border-color:red;"
|
||||
} else {
|
||||
username.style = "border-color:green;"
|
||||
}
|
||||
|
||||
// Video Date
|
||||
if (video_date.value == "") {
|
||||
form_complete = false;
|
||||
video_date.style = "border-color:red;"
|
||||
} else {
|
||||
video_date.style = "border-color:green;"
|
||||
}
|
||||
|
||||
// Characters
|
||||
if (characters.value == "") {
|
||||
form_complete = false;
|
||||
characters.style = "border-color:red;"
|
||||
} else {
|
||||
characters.style = "border-color:green;"
|
||||
}
|
||||
|
||||
// Players
|
||||
if (players.value == "") {
|
||||
form_complete = false;
|
||||
players.style = "border-color:red;"
|
||||
} else {
|
||||
players.style = "border-color:green;"
|
||||
}
|
||||
|
||||
// Game
|
||||
if (game.value == "") {
|
||||
form_complete = false;
|
||||
game.style = "border-color:red;"
|
||||
} else {
|
||||
game.style = "border-color:green;"
|
||||
}
|
||||
|
||||
// Stage
|
||||
if (stage.value == "") {
|
||||
form_complete = false;
|
||||
stage.style = "border-color:red;"
|
||||
} else {
|
||||
stage.style = "border-color:green;"
|
||||
}
|
||||
|
||||
// If the form is completely filled out, call the submit function for the form
|
||||
// and redirect them to submit.php, otherwise alert them that they've forgotten to
|
||||
// fill in some of the form
|
||||
if (form_complete) {
|
||||
document.getElementById("upload-form").submit();
|
||||
} else {
|
||||
alert('Please fill out the rest of the upload form.');
|
||||
}
|
||||
}
|
||||
63
upload.php
Normal file
63
upload.php
Normal file
@ -0,0 +1,63 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>FightHub - Upload</title>
|
||||
<link rel="stylesheet" href="main.css">
|
||||
<script src="scripts/main.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Titlebar -->
|
||||
<form class="search" action="search.php">
|
||||
<h1 class="title-text">FightHub</h1>
|
||||
<input type="text" name="query" class="search" placeholder="Search..">
|
||||
<input type="submit" name="submit" class="submit" value="Search">
|
||||
<a href="upload.php"><img src="images/upload.png" class="upload" alt="upload"></a>
|
||||
</form>
|
||||
|
||||
<!-- submit.php will read the variables from the url and add it to the database -->
|
||||
<form class="upload-form" id="upload-form" action="submit.php">
|
||||
|
||||
<h3>Youtube URL *</h3>
|
||||
<input type="text" name="url" id="url">
|
||||
|
||||
<h3>Video Title *</h3>
|
||||
<input type="text" name="title" id="title">
|
||||
|
||||
<h3>Username *</h3>
|
||||
<input type="text" name="username" id="username">
|
||||
|
||||
<h3>Description</h3>
|
||||
<textarea name="description" cols="30" rows="10" id="description"></textarea>
|
||||
|
||||
<h3>Event Date *</h3>
|
||||
<input type="date" name="video-date" id="video-date">
|
||||
|
||||
<h3>Video Length</h3>
|
||||
<input type="text" name="length" id="length">
|
||||
|
||||
<h3>Characters (Seperated by commas) *</h3>
|
||||
<input type="text" name="characters" id="characters">
|
||||
|
||||
<h3>Players (Seperated by commas) *</h3>
|
||||
<input type="text" name="players" id="players">
|
||||
|
||||
<h3>Select Game *</h3>
|
||||
<select name="game" id="game">
|
||||
<option disabled selected value>-- Game --</option>
|
||||
<option value="Street Fighter V">Street Fighter V</option>
|
||||
<option value="Mortal Kombat 11">Mortal Kombat 11</option>
|
||||
<option value="Super Smash Bros Melee">Super Smash Bros Melee</option>
|
||||
<option value="Super Smash Bros Ultimate">Super Smash Ultimate</option>
|
||||
<option value="Killer Instinct">Killer Instinct</option>
|
||||
<option value="Injustice">Injustice</option>
|
||||
</select>
|
||||
|
||||
<h3>Stage Name *</h3>
|
||||
<input type="text" name="stage" id="stage">
|
||||
|
||||
|
||||
<input type="button" name="submit_button" value="Submit" onclick="validateUpload()">
|
||||
</form>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user