<!DOCTYPE html>
<html>
<head>
<title>Bruce Gust</title>
<link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700" rel="stylesheet">
<link rel="stylesheet"href="css/styles.css"/>
<script>
function MM_jumpMenu(targ,selObj,restore){
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
document.querySelector('.javascript-url').addEventListener('change', function() {
var url = this.value;
var slash = url.lastIndexOf('/');
if (slash != -1) url = url.slice(slash + 1);
else {
slash = url.lastIndexOf(':');
if (slash != -1) url = url.slice(slash + 1);
}
url = 'http://' + url;
this.value = url;
});
function validateForm() {
var x = document.forms["property_form"]["region_id"].value;
if (x == "") {
alert("please select a region");
return false;
}
var a = document.forms["property_form"]["brand"].value;
if (a == "") {
alert("please select a brand");
return false;
}
var b = document.forms["property_form"]["phone"].value;
if (b == "") {
alert("please enter a phone number");
return false;
}
var c = document.forms["property_form"]["full_service"].value;
if (c == "") {
alert("please select a full service value");
return false;
}
var d = document.forms["property_form"]["url"].value;
if (d == "") {
alert("please select a web address");
return false;
}
var e = document.forms["property_form"]["name"].value;
if (e == "") {
alert("please enter your property name");
return false;
}
}
</script>
</head>
<body>
<header class="header">
<div class="container">
<span class="logo">
<img src="images/Glyph_greenshadow.png"/>
</span>
<span class="name">Bruce Gust</span>
</div>
</header>
<div class="wrapper">
<div class="container">
<section>
<h1>Regions</h1>
<div class="table_cell" style="width:100%;">
<table class="table">
<tr>
<td>id</td>
<td>name</td>
<td>actions</td>
</tr>
<tr>
<td>18</td>
<td>Northeast</td>
<td>
<select style="width:150px; border:1px solid #cccccc;">
<option></option>
<option value="#">edit</option>
<option value="#">delete</option>
</select>
</td>
</tr>
<tr>
<td>15</td>
<td>Southeast</td>
<td>
<select style="width:150px; border:1px solid #cccccc;">
<option></option>
<option value="#">edit</option>
<option value="#">delete</option>
</select>
</td>
</tr>
</table></div>
<br><br><br><br>
<div class="table_cell" style="width:100%;"><form class="form__group" name="region" action="post">
<table class="table">
<tr>
<td>id <input type="text"/></td>
<td>Name <input type="text"/></td>
<td><input class="form__group" type="submit" value="Add region" ></td>
</tr>
</table></div></form>
</section>
<section style="margin:0;">
<h1>Properties</h1>
<div class="table_cell" style="width:100%;">
<table class="table">
<tr>
<td>id</td>
<td>name</td>
<td>brand</td>
<td>phone</td>
<td>url</td>
<td style="text-align:center;">full service</td>
<td>actions</td>
</tr>
<tbody class="tbody">
<tr>
<td colspan="7" style="background-color:#000000; color:#ffffff;">0</td>
</tr>
<tr>
<td>1</td>
<td>Hilton</td>
<td>Marriot</td>
<td>615.618.2059</td>
<td>http://brucegust.com</td>
<td style="text-align:center;">
<input type="checkbox" value="Y" selected>
</td>
<td>
<select name="select_1" onchange="MM_jumpMenu('top',this,1)" style="border:1px solid #cccccc;">
<option></option>
<option value="property_edit.php?id=1&edit=yes">edit</option>
<option value="property_edit.php?id=1">delete</option>
</select>
</td>
</tr>
</tbody>
</table></div>
<br><br><br><br>
<div class="table_cell" style="width:100%;"><form class="form__group" name="property_form" onsubmit="return validateForm()" action="property_insert.php" method="Post">
<table class="table">
<tr>
<td>region <select name="region_id" style="border:1px solid #cccccc; width:150px;">
<option></option>
<option value="">Northeast</option>
<option value="">Southeast</option>
</td>
<td>Name <input type="text" name="name" maxlength="50"></td>
<td>Brand <input type="text" name="brand" maxlength="25"></td>
</tr>
<tr>
<td>Phone <input type="text" name="phone" maxlength="25" style="width:150px;"></td>
<td>Full Service <select name="full_service" style="border:1px solid #cccccc; width:162px;">
<option></option>
<option value="1">yes</option>
<option value="0">no</option>
</select>
</td>
<td> url <input type="text" name="url" class="javascript-url form-control" maxlength="255"></td>
</tr>
<tr>
<td colspan="3" style="text-align:center;"><br><input class="form__group" style="margin:auto;" type="submit" value="Add Property" ><br></td>
</tr>
</table></div></form>
<br><br><br><br>
Should you have any questions, please call Bruce Gust at 615.618.2059.
<br><br>
Thanks!<br>
<img src="http://brucegust.com/images/signature.jpg">
</section>
</div>
</div>
<footer class="footer">
<div class="container">
© copyright Quore Systems LLC, 2017
</container>
</footer>
</body>
</html>
Open in new window
This does not cater for https or finger trouble (htp://)Might be better to do it like this
HTML
Open in new window
JavaScriptOpen in new window
jQueryOpen in new window
Working sample here