www.webdeveloper.com
Results 1 to 12 of 12

Thread: Format input value on 'onkeyup'

  1. #1
    Join Date
    Oct 2008
    Posts
    7

    Format input value on 'onkeyup'

    Hello:

    Could someone help me to join the following two codes? I'm a PHP/MySQL programmer but have no experience with Javascript coding. I've tried various combinations and have read some online Javascript tutorials but I cannot figure out how to create a code to dynamically format information typed into an input field and have it transfer to another input field on 'onkeyup.'

    Here's what I have so far for copying the data from one input field to another:

    HTML Code:
    <form name="test">
        <p>First Name: <input type="text" name="Afname" onkeyup="copy()"></p>
        <p>First Name: <input type="text" name="Bfname"></p>
    </form>
    <script type="text/javascript">
    function copy()
    {
        document.test.Bfname.value = document.test.Afname.value;
    }
    </script>

    And here's what I found online to do the formatting:
    HTML Code:
    <script type="text/javascript">
    // Store the current title value
    var title = 'This is a title with a symbol &'
    	// alert(title); // debug
      	// Clean up the title		
    var url
      	.toLowerCase() // change everything to lowercase
      	.replace(/^\s+|\s+$/g, "") // trim leading and trailing spaces		
      	.replace(/[_|\s]+/g, "-") // change all spaces and underscores to a hyphen
      	.replace(/[^a-z0-9-]+/g, "") // remove all non-alphanumeric characters except the hyphen
      	.replace(/[-]+/g, "-") // replace multiple instances of the hyphen with a single instance
      	.replace(/^-+|-+$/g, ""); // trim leading and trailing hyphens
    	alert(url); // outputs 'this-is-a-title-with-a-symbol'
    </script>
    The second code is exactly what I need (see comments) but I don't know how to format the first code to work with the second one. There are scripts online that do this but only after clicking on the submit button. I don't want to click on a submit button. I want the script to work dynamically and format the input field data as I type. Can this be done?


    Can someone please help?

    Thank you!
    Last edited by JsusSalv; 10-30-2008 at 04:26 AM.

  2. #2
    Join Date
    Jun 2003
    Location
    here
    Posts
    4,551
    HTML Code:
    <form name="test">
        <p>First Name: <input type="text" name="Afname" id="Afname" onkeyup="copy()"></p>
        <p>First Name: <input type="text" name="Bfname" id="Bfname"></p>
    </form>
    Code:
    <script type="text/javascript">
    function copy()
    {
        var tmp = document.getElementById('Afname');
        tmp = tmp.toLowerCase().replace(/^\s+|\s+$/g, "").replace(/[_|\s]+/g, "-");
        tmp = tmp.replace(/[^a-z0-9-]+/g, "").replace(/[-]+/g, "-").replace(/^-+|-+$/g, "");
        document.getElementById('Bfname').value = tmp;
    }
    </script>
    If you are using PHP please use the [PHP] and [/PHP] forum tags for highlighting...
    The same applies to HTML and the forums [HTML][/HTML] tags.

  3. #3
    Join Date
    Oct 2008
    Posts
    7

    RE: Format input value on 'onkeyup'

    Thank you for the help with this. I tried the following but it isn't working:

    HTML Code:
    <html>
    <head>
    </head>
    <body>
    <form name="test">
        <p>First Name: <input type="text" name="Afname" onkeyup="copy()"></p>
        <p>First Name: <input type="text" name="Bfname"></p>
    </form>
    <script type="text/javascript">
    function copy()
    {
        var tmp = document.getElementById('Afname');
        tmp = tmp.toLowerCase().replace(/^\s+|\s+$/g, "").replace(/[_|\s]+/g, "-");
        tmp = tmp.replace(/[^a-z0-9-]+/g, "").replace(/[-]+/g, "-").replace(/^-+|-+$/g, "");
        document.getElementById('Bfname').value = tmp;
    }
    </script>
    </body>
    </html>
    What am I doing wrong?

    The duplicating portion of the code looked like this and worked ok:
    HTML Code:
    <html>
    <head>
    </head>
    <body>
    <form name="test">
        <p>First Name: <input type="text" name="Afname" onkeyup="copy()"></p>
        <p>First Name: <input type="text" name="Bfname"></p>
    </form>
    <script type="text/javascript">
    function copy()
    {
        document.test.Bfname.value = document.test.Afname.value;
    }
    </script>
    </body>
    </html>
    I'm hoping it's just a matter of placing the script code in the proper location.

    Thank you!

  4. #4
    Join Date
    Jun 2003
    Location
    here
    Posts
    4,551
    Put IDs on your elements like I did, using the name options for forms etc isn't a standards compliant way to code and could cause problems with later browser versions and such.
    If you are using PHP please use the [PHP] and [/PHP] forum tags for highlighting...
    The same applies to HTML and the forums [HTML][/HTML] tags.

  5. #5
    Join Date
    Oct 2008
    Posts
    7
    Yes, you are correct about the compatibility issues. I apologize, I rather hastily posted my coded without thinking about those issues. However, I still can't get the code to copy over to the second input field. This is what I have now:

    HTML Code:
    <html>
    <head>
    <script type="text/javascript">
    function copy()
    {
        var tmp = document.getElementById('Afname');
        tmp = tmp.toLowerCase().replace(/^\s+|\s+$/g, "").replace(/[_|\s]+/g, "-");
        tmp = tmp.replace(/[^a-z0-9-]+/g, "").replace(/[-]+/g, "-").replace(/^-+|-+$/g, "");
        document.getElementById('Bfname').value = tmp;
    }
    </script>
    </head>
    <body>
    <form id="test" method="post" action="">
    <p>Page Name: <input type="text" name="Afname" id="Afname" onkeyup="copy()" /></p>
    <p>SEO URL: <input type="text" name="Bfname" id="Bfname" /></p>
    </form>
    </body>
    </html>
    I know I can do the formatting in PHP but I want to be able to do this dynamically and in real-time via javascript.

    Any suggestions on what I should change?

  6. #6
    Join Date
    Jun 2003
    Location
    here
    Posts
    4,551
    My mistake this time, edit the first line of the function:
    Code:
        var tmp = document.getElementById('Afname').value;
    If you are using PHP please use the [PHP] and [/PHP] forum tags for highlighting...
    The same applies to HTML and the forums [HTML][/HTML] tags.

  7. #7
    Join Date
    Oct 2008
    Posts
    7
    THAT'S IT!!!

    Here's the final code:

    HTML Code:
    <html>
    <head>
    <script type="text/javascript">
    function copy()
    {
    	var tmp = document.getElementById('Afname').value;
        tmp = tmp.toLowerCase().replace(/^\s+|\s+$/g, "").replace(/[_|\s]+/g, "-");
        tmp = tmp.replace(/[^a-z0-9-]+/g, "").replace(/[-]+/g, "-").replace(/^-+|-+$/g, "");
        document.getElementById('Bfname').value = tmp;
    }
    </script>
    </head>
    <body>
    <form id="test" method="post" action="">
    	<p>Page Name: <input type="text" name="Afname" id="Afname" onkeyup="copy()" /></p>
    	<p>SEO URL: <input type="text" name="Bfname" id="Bfname" /></p>
    </form>
    </body>
    </html>
    Let me ask a quick question. Is the above code the best way to go? I don't mean to undermind all the work we have here. I am just not up to date with AJAX or if using a framework like Mootools would be best. I figured using straight javascript as above would be good. But can I get your opinion? I've got some tutorials on Javascript but it's just not as fun for me as PHP is. There are so many similarities but for some reason I am just not grasping the JS concepts as readily as I would with PHP.
    Thanks for your input and for the awesome work!

  8. #8
    Join Date
    Jun 2003
    Location
    here
    Posts
    4,551
    Well for this tiny amount of code there is no reason to go and use a library. if you were to write something larger and more complex then I would at least look at a few libraries(I'm not a big fan of them though, not going to get into that here though).

    As for your code, if it works leave it, it's tiny and won't have a noticable impact on performance to optimise it(which almost always reduces readability and your ability to edit it in future).

    Can I also ask you to make sure that you try the page with javascript enabled and disabled, just to check that your pages are still accessible(it's way too common for people to get engrossed in client side code without considering the 7-10&#37;(depending on who's stats you listen to) of users without javascript enabled).
    If you are using PHP please use the [PHP] and [/PHP] forum tags for highlighting...
    The same applies to HTML and the forums [HTML][/HTML] tags.

  9. #9
    Join Date
    Oct 2008
    Posts
    7
    Seems to work fine with/without JS enabled. I just embedded the code into a customized CMS I've created. It's just a simple way of helping my clients stay focused on the important things and not have to worry about the more technical SEO stuff. It's being used within the webpage creation scripts. Thank you for all the help. I sure would like to get your opinion as to why you think frameworks are not your flavor. Perhaps we can Skype sometime. Thanks for all your help!

  10. #10
    Join Date
    Oct 2006
    Posts
    2

    Replace single "/" slash with a Letter

    I took the same concept described here and modified the code to replace a single "/" slash with a Letter.

    HTML Code:
    <html>
    <head>
    <script type="text/javascript">
    function copy()
    {
      var tmp = document.getElementById('Afname').value;
      tmp = tmp.replace(/[/]+/g, "R");
      document.getElementById('Bfname').value = tmp;
    }
    </script>
    </head>
    <body>
    <form id="test" method="post" action="">
    	<p>Number: <input type="text" name="Afname" id="Afname" onkeyup="copy()" /></p>
    	<p>New Number: <input type="text" name="Bfname" id="Bfname" /></p>
    </form>
    </body>
    </html>
    -Chip

  11. #11
    Join Date
    Oct 2008
    Posts
    7
    Awesome! Nice touch.

    Oh, and the line above, "Seems to work fine with/without JS enabled", was a mistake as Firefox didn't really turn JS off. I thought it had but, nope. So it should read: "Seems to work fine with JS enabled." Not a big deal but just wanted to correct it.

    Thank you!

  12. #12
    Join Date
    Apr 2013
    Posts
    1

    Multiple / array input text

    bad english:: Sorry

    how to insert 1 value for multiple input text / array..

    this example :
    PHP Code:
    <html>
    <
    head>
    <
    script type="text/javascript">
    function 
    copy()
    {
        var 
    tmp document.getElementById('Afname').value;
        
    tmp tmp.toLowerCase().replace(/^\s+|\s+$/g"").replace(/[_|\s]+/g"-");
        
    tmp tmp.replace(/[^a-z0-9-]+/g"").replace(/[-]+/g"-").replace(/^-+|-+$/g"");
        
    document.getElementById('Bfname').value tmp;
    }
    </script>
    </head>
    <body>
    <form id="test" method="post" action="">
        <p>Page Name: <input type="text" name="Afname" id="Afname" onkeyup="copy()" /></p>
        <p>SEO URL: 
    foreach($Bfnames as $Bfname)
    {
    <input type="text" name="$Bfname[title]" id="Bfname" />
    }

    </p>
    </form>
    </body>
    </html> 
    thanks...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles