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

I want to make sure that a person entering the url of a particular website either uses "http://" or the system automatically adds that.

How?
Bruce GustPHP DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
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 GustPHP DeveloperAuthor Commented:
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 HansenCommented:
@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
ss111.jpg
Price Your IT Services for Profit

Managed service contracts are great - when they're making you money. Yes, you’re getting paid monthly, but is it actually profitable? Learn to calculate your hourly overhead burden so you can master your IT services pricing strategy.

Download eBook
Julian HansenCommented:
The problem with your code is that it is not inside a document ready.

When code is just raw in a document it executes immediately which means that this line (line 13)
		document.querySelector('.javascript-url').addEventListener('change', function() {

Open in new window

Goes on the hunt for an element with class javascript-url. Unfortunately at this point in the document (which is only partially rendered) there is no such class because it is only defined on line 174 so that querySelector is going to return nada which is going to irritate the JavaScript interpreter because you are asking it to run a function addEventListener on a null object so it throws its toys and says
TypeError: document.querySelector(...) is null

Open in new window


You could move the code down below the HTML and it will work - but probably better to put it in a document ready.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Bruce GustPHP DeveloperAuthor Commented:
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 HansenCommented:
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.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.