Javascript to write SEF URLs

Posted on 2012-08-21
Last Modified: 2012-08-22
I'm trying to put together a javascript that updates a form hidden input with search engine friendly urls based upon the page title.

My page has the following -

A recordset detailing Parent details -The page may or may not have a parent page, if it does the recordset creates an array 'arrParentDetail' of which the third item is the Parent Page SEF URL. (I'll refer to this as 'Parent-Detail-SEF')

In the event that this exists, the SEF URL for the new page would be -


So in this instance the hidden input should have a value equal to 'Parent-Detail-SEF' +'/' + The New Page Title

The New Page Title should remove all non a-z A-Z 0-9 characters and replace all spaces with a '-' So
New! Page About&* Something Special :) would become -


In the event that the arrParentDetail doesn't exist the hidden input would be just -


my page title input has a name and id of title.

Finally I also need to be able to write the final output to a span so that the user can see what the URL will be.

I'd be grateful for some assistance with this please.

Thank you

without the preceeding '/'
Question by:garethtnash
    LVL 49

    Accepted Solution

    Hi, I made the assumption that you want to update the hidden field everytime the title field changes.
    Also in the example I have the hidden field not hidden, but as plain text, such that later after verification you can change type="text" to type="hidden" yourself.

    		<script type="text/javascript">
    			var arrPageDetails = ['something', 'something', 'Parent-Detail-SEF'];
    			function updateSEF(frm) {
    				var parts = [];
    				// In case of parent SEF, add this to the new page's SEFURL
    				if (typeof arrPageDetails !== "undefined" && arrPageDetails.length > 2) {
    				// Grab the title field as inputed by the end user
    				var pageTitle = frm.title.value;
    				// Remove leading and trailing invalid characters
    				pageTitle = pageTitle.replace(/^\W+|\W+$/ig,'');
    				// Replace all non alphanumerics to dashes.
    				// Construct the final url, and write this back to the form.
    				frm.SEFUrl.value = parts.join("/");
    			<input type="text" name="SEFUrl" value="" />
    					<input type="text" name="title" id="title" onchange="(updateSEF(this.form));" />
    			<input type="submit" value="Submit form" />

    Open in new window


    Author Comment

    Thanks Roonaan, that looks fantastic, just a couple of things,

    my Array is created in VBScript -

    Dim ParentDetail__MMColParam
    ParentDetail__MMColParam = NULL
    If (Request("parent") <> "") Then 
      ParentDetail__MMColParam = Request("parent")
    End If
    Dim ParentDetail
    Dim ParentDetail_cmd
    Dim ParentDetail_numRows
    Set ParentDetail_cmd = Server.CreateObject ("ADODB.Command")
    ParentDetail_cmd.ActiveConnection = MM_GolfConnection_STRING
    ParentDetail_cmd.CommandText = "SELECT ID, PageType, SEOLink, Title FROM dbo.MyPage WHERE ID = ?" 
    ParentDetail_cmd.Prepared = true
    ParentDetail_cmd.Parameters.Append ParentDetail_cmd.CreateParameter("param1", 5, 1, -1, ParentDetail__MMColParam) ' adDouble
    Set ParentDetail = ParentDetail_cmd.Execute
    ParentDetail_numRows = 0
    If not ParentDetail.Eof then
    dim arrParentDetail
    arrParentDetail = ParentDetail.GetRows()
    End if
    Set ParentDetail = Nothing
    Set ParentDetail_cmd = Nothing

    Open in new window

    I can create a variable in VBScript from this like

    Dim Purl
    Purl = arrParentDetail(2,0)instead of creating the code like -

    instead of the 'var arrPageDetails = ['something', 'something', 'Parent-Detail-SEF'];'

    Can I use a variable created in Vbscript within the Javascript? or would it be better to store the value in a hidden input?

    Also sorry, when I finished typing in title the value was displayed in SEFUrl but only the first space was replaced, in other words this 'another url created' looked like 'another-url created'

    Is there a work around for this?

    Thank you so much

    Author Closing Comment

    Thank you

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Training Course: Adobe Dreamweaver CC 2015

    Adobe Dreamweaver Creative Cloud is used by web designers and front-end developers and allows you to visualize your site in real-time as you code. This course covers exam objectives for the Adobe Certified Associate (ACA) certification.

    Suggested Solutions

    Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
    Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
    In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
    In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

    760 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    13 Experts available now in Live!

    Get 1:1 Help Now