Link to home
Start Free TrialLog in
Avatar of Bruce Gust
Bruce GustFlag for United States of America

asked on

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?
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

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
Avatar of Bruce Gust

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

@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
User generated image
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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?
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.