title: Strip out non-alpha chracters with Jquery when copying text from one input to another
body: <p>On my website, I have two input fields: Title &amp; Stock Code. I have two goals:</p>
  
  <ol>
  <li><p>The text from the Title field should be be copied to the stock
  code field as the user enters text in the title field.   </p></li>
  <li><p>I also want non-alphanumeric chracters to be stripped out during
  the copy.</p></li>
  </ol>
  
  <p>I have found <a href="https://stackoverflow.com/questions/8515265/jquery-clone-element-altering-id-then-use-keyup-not-working">this tutorial</a> that explains how to do the first goal.
  Here is my working example:</p>
  
  <p><a href="http://jsfiddle.net/2gezC/1/" rel="noreferrer">http://jsfiddle.net/2gezC/1/</a></p>
  
  <p>For the second part, I have found it hard to find a tutorial about stripping characters in Jquery, as most tutorials are for JavaScript. </p>
  
  <p>I have found <a href="http://php.refulz.com/validations-with-jquery-%E2%80%93-strip-whitespaces-special-characters-and-html-tags/" rel="noreferrer">this tutorial</a> and have tried to integrate it into my code as follows:</p>
  
  <pre><code>(function ($) {
      $(document).ready(function () {
  
          $('input#edit-title-fragment').keyup(function () {
              var str = $(this).val();
              str = str.replace(/[^a-zA-Z 0-9]+/g, '');
              var txtClone = $(this).val();
              $('input#edit-sku-fragment').val(txtClone);
          });
      });
  
  })(jQuery);
  </code></pre>
  
  <p>However, it does not work. Could someone tell me what I am doing wrong. Thanks!</p>