title: Using Javascript to add predefined strings to user input using a form
body: <p><br />
  I have very recently started to learn Javascript to help me at work and I can't help but think I've bitten off much more than I can chew.</p>
  
  <p><strong>The idea:</strong><br />
  Using a form, take a single piece of inputted information, prefix and suffix the information with a predefined values and output it to a textarea so that I can copy/use it.</p>
  
  <p>For some reason, I've found learning javascript particularly hard so far, and the code I've put together does work, exactly how I want but I can't help but think the code I've thrown together is incredibly sloppy.</p>
  
  <p><strong>The Form</strong></p>
  
  <pre><code>&lt;form name="invalidateForm"  action=""&gt;
  Image Name:&lt;br /&gt;&lt;input id="imageName" type="text" name="imageName" value=""&gt;&lt;br /&gt;
  &lt;input class="btn" type="button" onclick="invalidateUrls()" value="Generate URLs"&gt;
  &lt;input class="btn" type="reset"&gt;&lt;br /&gt;           
  &lt;textarea id="icdnResults"&gt;&lt;/textarea&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>The JavaScript</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function invalidateUrls()
  {
  var txt = "";
  document.getElementById("icdnResults").value = "";
  
  if (document.getElementById("imageName").value != ""){
  txt = "";
  
  //Category Thumbnails
  txt += "prefix text";
  txt += document.getElementById("imageName").value;
  txt += "suffix text\n";
  
  //Product Page Main Image
  txt += "prefix text 2";
  txt += document.getElementById("imageName").value;
  txt += "suffix text 2\n";
  
  //Flyout image on product page
  txt += "prefix text 3";
  txt += document.getElementById("imageName").value;
  txt += "suffix text 3\n";
  
  //Product page thumbnails
  txt += "prefix text 4";
  txt += document.getElementById("imageName").value;
  txt += "suffix text 4\n";
  
  document.getElementById("icdnResults").value += txt;
  }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>I'm 99% sure that what I've done takes it one step further than sloppy and I'm also guessing that it's not 'future proof' in the slightest.</p>
  
  <p>Should I be using and defining variables more, or is there a completely different way of doing it?</p>
  
  <p>If someone could tell if I'm on the right tracks or if I should completely scrap it, it would be greatly appreciated.</p>
  
  <p>Thanks :)
  Alex
  <br /><br />
  <strong>EDIT</strong><br />
  My  apologies to anyone that read this, it would seem I didn't properly explain and forgot to mention one critical thing; the prefix and suffix both have 4 different strings.
  So, the user would input a value into the input field and it would prefix this with 4 different values, and also suffix with 4 different values.</p>
  
  <pre><code>http://www.somedomain.com/folder/?fmy=&lt;&lt;USER_INPUT&gt;&gt;&amp;type=etc
  http://www.somedomain.com/folder/?someCmd=&lt;&lt;USER_INPUT&gt;&gt;&amp;layer=etc
  http://www.somedomain.com/folder/?itemId=&lt;&lt;USER_INPUT&gt;&gt;&amp;value=etc
  http://www.somedomain.com/folder/?pageR=&lt;&lt;USER_INPUT&gt;&gt;&amp;caption=etc
  </code></pre>
  
  <p>So where "?" there are 4 different values, and where "&amp;" there are also 4 completely different values.</p>
  
  <p><strong>EDIT 2</strong><br />
  Ok, as per John's reply... I've tweaked it a little.
  How does it look? Just a rubbish as my first attempt at altering code?</p>
  
  <pre><code>var processForm = function(){
  var value = $('#imageName').val(),
      outputElement = $('#icdnResults'),
      html = '',
      s_imageTag = function(size){
          return size + value;
      },
  
      e_imageTag = function(size2){
          return size2 + "\n";
      },
  
     size = ['s_catThumb', 's_productMain'], 
     size2 = ['e_catThumb', 'e_productMain'];
  
  html += s_imageTag('s_catThumb ');
  html += e_imageTag(' e_catThumb');
  html += s_imageTag('s_productMain '); 
  html += e_imageTag(' e_productMain'); 
  
  outputElement.val(html);
  };
  
  $(function(){
  $('#gen').on('click', processForm);
  });
  </code></pre>