Solved

Autosuggest a valid folder name on keypress

Posted on 2010-11-12
2
408 Views
Last Modified: 2012-05-10
Autosuggest a valid foldername on type

Hello,

Have searched around and cannot seem to find any examples of how to do this.

I'm creating a web application that allows users to create Photo Galleries.  The galleries need a tile and a folder name.

We would have non-technical users therefore I want to ensure the foldername is all lowercase, no spaces, no special characters, and less that 16 chars in length

I'd like users to be able to type a title into a form and have a folder name appear as they type.  Basically this folder name would just be the title with any spaces removed and all lower case.


Any guidance would be appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="http://ajax.microsoft.com/ajax/jQuery.Validate/1.7/jQuery.Validate.min.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="http://c0028810.cdn1.cloudfiles.rackspacecloud.com/form-structure.css">
<link rel="stylesheet" type="text/css" href="http://c0028810.cdn1.cloudfiles.rackspacecloud.com/form-style.css">



<script>
$(document).ready(function(){
  $("#frmMyForm").validate();
});
</script>
</head>
<body>


    <form id="frmMyForm" action="" method="post" class="form">

        <fieldset>
            
            <div class="grid-12-12">
              <label class="form-lbl">
                <em class="form-req">*</em>
                Template Name
                <img src="3rdparty/icons/fatcow/16x16/information.png" style="margin-left: 10px;" class="formtip" title="This is the name of the resizing template you wish to create.  This must be unique.">
              </label>
              <input name="teGstTitle" id="teGstTitle" type="text" class="form-txt required" value="" minlength="2" />
            </div>

            <div class="grid-12-12">
              <label class="form-lbl">
                <em class="form-req">*</em>
                Folder Name
                <img src="3rdparty/icons/fatcow/16x16/information.png" style="margin-left: 10px;" class="formtip" title="This is the name of the folder your template will be created to.  This must be unique.">
              </label>
              <input name="teGstFolderName" id="teGstFolderName" type="text" class="form-txt required" value="" minlength="2" maxlength="16" />
            </div>
    
            <div class="grid-12-12">
                   <label class="form-lbl">Description <em class="form-req">*</em></label>
                   <textarea id="teGstDescription" name="teGstDescription" rows="" cols="" class="form-txt required"></textarea>
            </div>
    
            <div class="grid-12-12 form-no-lbl">
                   <input class="form-button form-right" type="submit" title="Add" value="Create New Template" />
            </div>
    
        </fieldset>

    <input name="submitmode" type="hidden" id="submitmode" value="docreate" />

  </form>



  </body>
</html>

Open in new window

0
Comment
Question by:sonic1234
2 Comments
 
LVL 14

Accepted Solution

by:
sam2912 earned 500 total points
Comment Utility

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Untitled Document</title>

<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>

<script src="http://ajax.microsoft.com/ajax/jQuery.Validate/1.7/jQuery.Validate.min.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="http://c0028810.cdn1.cloudfiles.rackspacecloud.com/form-structure.css" />

<link rel="stylesheet" type="text/css" href="http://c0028810.cdn1.cloudfiles.rackspacecloud.com/form-style.css" />

<script>

$(document).ready(function(){

	$("#frmMyForm").validate();

	$("#teGstTitle").keyup(function() {

		$("#teGstFolderName").val(folderName($(this).val()));

	});

	$("#teGstFolderName").keyup(function() {

		$(this).val(folderName($(this).val()));

	});

});

function folderName(string) {

	return string.toLowerCase().replace(/[^0-9a-zA-Z]/g, "").substr(0,16);

}

</script>

</head>

<body>

<form id="frmMyForm" action="" method="post" class="form">

	<fieldset>

		<div class="grid-12-12">

			<label class="form-lbl"> <em class="form-req">*</em> Template Name <img src="3rdparty/icons/fatcow/16x16/information.png" style="margin-left: 10px;" class="formtip" title="This is the name of the resizing template you wish to create.  This must be unique." /> </label>

			<input name="teGstTitle" id="teGstTitle" type="text" class="form-txt required" value="" minlength="2" />

		</div>

		<div class="grid-12-12">

			<label class="form-lbl"> <em class="form-req">*</em> Folder Name <img src="3rdparty/icons/fatcow/16x16/information.png" style="margin-left: 10px;" class="formtip" title="This is the name of the folder your template will be created to.  This must be unique." /> </label>

			<input name="teGstFolderName" id="teGstFolderName" type="text" class="form-txt required" value="" minlength="2" maxlength="16" />

		</div>

		<div class="grid-12-12">

			<label class="form-lbl">Description <em class="form-req">*</em></label>

			<textarea id="teGstDescription" name="teGstDescription" rows="" cols="" class="form-txt required"></textarea>

		</div>

		<div class="grid-12-12 form-no-lbl">

			<input class="form-button form-right" type="submit" title="Add" value="Create New Template" />

		</div>

	</fieldset>

	<input name="submitmode" type="hidden" id="submitmode" value="docreate" />

</form>

</body>

</html>

Open in new window

0
 

Author Comment

by:sonic1234
Comment Utility
Perfect thanks sam2912
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

763 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

7 Experts available now in Live!

Get 1:1 Help Now