Solved: How can I use Javascript to insure proper entry of URL?

Julian Hansen

4/6/2017

Simplest would be

if (url.indexOf('http') == -1) url = 'http://' + url;

Open in new window

This does not cater for https or finger trouble (htp://)

Might be better to do it like this
HTML

  <h2>JavaScript</h2>
  <input type="text" class="javascript-url form-control"/>
  
  <h2>jQuery</h2>
  <input type="text" class="jquery-url form-control"/>

Open in new window

JavaScript

document.querySelector('.url').addEventListener('change', function() {
  var url = this.value;
  var slash = url.lastIndexOf('/');
  if (slash != -1) url = url.slice(slash + 1);
  url = 'http://' + url;
  this.value = url;
});

Open in new window

jQuery

$(function() {
  $('.url').change(function() {
    var url = this.value;
    var slash = url.lastIndexOf('/');
    if (slash != -1) url = url.slice(slash + 1);
    url = 'http://' + url;
    this.value = url;
  });
});

Open in new window

Working sample here

Bruce Gust

4/7/2017

ASKER

Julian, this is awesome! Tested it - works fine. But I can't get it to work in the context of the page that I'm building. Can you look at it and tell me what I'm missing?

Here's the page: http://hihatwebdesign.com/quore/default.php

Here's the code:

<!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&nbsp;<input type="text"/></td>
								<td>Name&nbsp;<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&nbsp;<select name="region_id" style="border:1px solid #cccccc; width:150px;">
							<option></option>
														<option value="">Northeast</option>
														<option value="">Southeast</option>
														</td>
							<td>Name&nbsp;<input type="text" name="name" maxlength="50"></td>
							<td>Brand&nbsp;<input type="text" name="brand" maxlength="25"></td>
						</tr>
						<tr>
							<td>Phone&nbsp;<input type="text" name="phone" maxlength="25" style="width:150px;"></td>
							<td>Full Service&nbsp;<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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url&nbsp;<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">
                &copy; copyright Quore Systems LLC, 2017
            </container>
        </footer>
    </body>
</html>

Open in new window

Julian Hansen

4/7/2017

@Bruce,

Just a heads up

Your link is triggering a security alert - I think this has happened before on your site. Will address the posted source separately

Bruce Gust

4/10/2017

ASKER

Thanks, Julian! Hey, listen, you're right! That "alert" was something I thought I had addressed and apparently I'm still coming up short.

There isn't anything sinister on my site and I set up a service that my ISP offers to help protect against anything that would trigger the alerts that you're getting. I'm stuck. What else do I need to do? Any ideas?

Julian Hansen

4/10/2017

According to this thread they say you should report false positives to ESET.

https://forum.eset.com/topic/2475-blocked-website/

I will send a ticket through from my side to find out why it is happening.