Solved

Autosuggest a valid folder name on keypress

Posted on 2010-11-12
2
421 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
ID: 34126298

<!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
ID: 34126528
Perfect thanks sam2912
0

Featured Post

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

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…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

785 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