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

Bruce Gust
Bruce Gust used Ask the Experts™
on
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?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
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 Developer

Author

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

Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
@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
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
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.
Bruce GustPHP Developer

Author

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?
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
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.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial