Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Sep 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Replacing characters in a form then passing string

    Hi there!

    What I have here is a basic search form that will take the entered text -- in this case a product number -- and reload the page with that text appended to the URL.

    Code:
    <form action="detail.php?recordID=<?php echo $HTTP_GET_VARS['recordID']?>" method="get" name="searchform" id="searchform">
    	<p>Item Number: <br />
    	<input name="recordID" type="text" id="recordID" />
    	</p>
    	<p><input name="SubmitNumber" type="submit" id="SubmitNumber" value="Search" /></p>
    </form>
    The problem is that some people will enter the product number with spaces instead of hyphens or a combination of the two (for example, "xxx-xxx xx" or "xxx xxx xx" instead of "xxx-xxx-xx") and retrieving the record is dependent on using all hyphens. What I want to do when someone presses "Submit" is search the string for spaces, replace any with hyphens, and send the modified string on.

    It seems that Javascript would be the best way to do this. I've found several snippets of code -- irt.org and Zend explained it best -- for replacing characters in a string but (knowing pretty much jack about JS) I can't for the life of me figure out how to make them work together with the form.

    Any help here would be greatly appreciated. Thanks in advance!

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 503 Times in 490 Posts
    why let them type in the incorrect format
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    
    var zxcTypingColor='blue';
    var zxcGoodColor='black';
    var zxcBadColor='red';
    
    function zxcFormat(zxcobj,zxctem){
     if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
     var zxctxt=zxcobj.value;
     if (zxctxt.length>zxctem.length-1){ zxcobj.value=zxctxt.substring(0,zxctxt.length-1); return; }
     zxcobj.style.color=zxcTypingColor;
     zxcobj.value=zxcobj.value.replace(/\W/g,'');
     zxcTemp=zxctem;
     for (zxc0=0;zxc0<zxcobj.value.length;zxc0++){
      zxcLgth=zxcTemp.indexOf('~');
      zxcTemp=zxcTemp.replace('~',zxcobj.value.charAt(zxc0));
     }
     zxcobj.value=zxcTemp.substring(0,zxcTemp.indexOf('~'));
     if (zxcobj.value.length==zxctem.length-1){ zxcobj.style.color=zxcGoodColor; }
    }
    
    function Blur(zxcobj,zxcnu){
     if (zxcobj.value.length!=zxcnu){
      zxcobj.style.color=zxcBadColor;
      zxcobj.focus;
      return false
     }
     return true
    }
    
    function Validate(frm){
     if (!Blur(frm.tst,11)){ alert('Complete\n'+(frm.tst.title||frm.tst.name)); return false; }
     return true;
    
    }
    //-->
    </script></head>
    
    <body>
    
    <script> vic=0; </script>
    
    <form onsubmit="return Validate(this);" action="http://www.codingforums.com" >
    <input title="Product Code" name="tst" onkeypress="zxcFormat(this,'~~~-~~~~-~~');" onblur="Blur(this,11)"><br>
    <input type="submit" name="" value="Submit">
    </form>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New to the CF scene
    Join Date
    Sep 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's a fantastic solution, fixing the problem before it ever gets submitted!

    The problem I see though (which is my fault for not explaining in the previous post) is that not all the numbers are in xxxx-xxx-xx format; some are xxxxx-xxx or xxx or... well, several different permutations and this script is based on having the hyphens in set positions.

    But it brings up another possibility I hadn't considered before... is there a way to replace a character as it's being typed, so if someone types a space it shows up in the field as a hyphen? I've tried searching for this and have found how to prevent certain keys from being pressed and even how to change a lowercase letter to uppercase but not how to change one character to a different character.
    Last edited by Theora; 09-06-2006 at 07:32 PM.

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 503 Times in 490 Posts
    zxcFormat(this,'~~~-~~~~-~~')

    the ~ will be replaced by typed characters
    so
    zxcFormat(this,'~~~~/~~~/~~')

    will result in

    qwer/234/e4

    after typing


    qwer234e4
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #5
    New to the CF scene
    Join Date
    Sep 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vwphillips View Post
    zxcFormat(this,'~~~-~~~~-~~')
    Drat, I was unclear again -- I mean to convey that not all product numbers should have hyphens in the same place. For instance, "CHAIR-TAN-33778" and "LOVESEAT-BLUE-67" would both be valid. Sorry!

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 503 Times in 490 Posts
    "CHAIR-TAN-33778" has hyphens at char 5 & 9 = '~~~~~-~~~-~~~~~'

    "LOVESEAT-BLUE-67" has hyphens at char 8 & 13 = '~~~~~~~~-~~~~-~~'

    each format would require a separate input else
    will need conditional statement to ensure that the input conforms to one of the formats,
    this is not difficult,
    boring but can do, if that is what you want but you will need to specify what are valid characters.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #7
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    This work for you?

    Code:
    <html>
    	<head>
    		<script type="text/javascript">
    			function spaceToHyphen(obj)
    			{
    				var re=/-\s{1,}/g
    				var str=obj.value.replace(re," ");
    				re=/\s{1,}/g
    				str=str.replace(re,"-")
    				if(str.charAt(str.length-1)=="-")
    				{
    					str=str.substring(0,str.length-1);	
    				}
    				if(str.charAt(0)=="-")
    				{
    					str=str.substring(1,str.length);	
    				}
    				obj.value=str;
    			}
    		</script>
    	</head>
    	<body>
    	<input type="text" onblur="spaceToHyphen(this);" />
    	</body>
    </html>
    _______________________________________________________________________________

    Or if you want it even more in depth, based on your provided examples this may be nice.

    Code:
    <html>
    	<head>
    		<script type="text/javascript">
    			function spaceToHyphen(obj)
    			{
    				var re=/-\s{1,}/g
    				var str=obj.value.replace(re," ");
    				re=/\s{1,}/g
    				str=str.replace(re,"-")
    				if(str.charAt(str.length-1)=="-")
    				{
    					str=str.substring(0,str.length-1);	
    				}
    				if(str.charAt(0)=="-")
    				{
    					str=str.substring(1,str.length);	
    				}
    				re=/[A-Za-z]{1,}-[A-Za-z]{1,}-[0-9]{1,}$/g
    				var str_test=re.test(str);
    				var err_obj=document.getElementById('code_err');
    				if(str_test)
    				{
    					clearNodes(err_obj);	
    				}
    				else
    				{
    					clearNodes(err_obj);
    					err_obj.style.color='red';
    					var txt="Invalid product code proper format should be: PRODUCT-COLOR-Model";
    					err_obj.appendChild(document.createTextNode(txt));
    				}
    				obj.value=str;
    			}
    			function clearNodes(obj)
    			{
    				while(obj.hasChildNodes())
    				{
    					obj.removeChild(obj.childNodes[0]);
    				}
    			}
    			window.onload=function()
    			{
    				document.getElementById('p_code').onblur=function()
    				{
    					spaceToHyphen(this);
    				}
    			}
    		</script>
    	</head>
    	<body>
    	<form>
    		<input type="text" id="p_code" />
    		<br />
    		<span id="code_err"></span>
    	</form>
    	</body>
    </html>

    Basscyst
    Last edited by Basscyst; 09-06-2006 at 10:50 PM.
    Helping to build a bigger box. - Adam Matthews


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •