title: Jquery change HTML to div on button click function :selected
body: <p>Ok, I have this form written in JavaScript and I want to change it to Jquery. So far I have managed to call text on click using the 'change()' method. then, I have also been able to set the inner div of an element using the set  element function. I for the life of me can not find how to this and have the function store the information selected from a selected option dropdown menu and then on submit the html of an element. Here is what I have so far.</p>
  
  <hr>
  
  <pre><code>&lt;script&gt;
      $('#btn1').click(function(){
          $('#test1').text('You Picked' + :selected);
      });
  &lt;/script&gt;
  
  &lt;!-- Body --&gt;
  &lt;select name="create" id="create"&gt;
    &lt;option&gt;Red&lt;/option&gt;
    &lt;option&gt;Green&lt;/option&gt;
    &lt;option&gt;Blue&lt;/option&gt;
  &lt;/select&gt;
  &lt;select name="somethingElse" id="somethingElse"&gt;
    &lt;option&gt;Option 1&lt;/option&gt;
    &lt;option&gt;Option 2&lt;/option&gt;
    &lt;option&gt;Option 3&lt;/option&gt;
  &lt;/select&gt;
  &lt;button id="btn1"&gt;Submit&lt;/button&gt;
  &lt;p id="test1"&gt;This is a paragraph.&lt;/p&gt;
  </code></pre>
  
  <hr>
  
  <p>the JavaScript version is a lot longer; However, to give you an Idea of what I am trying to accomplish here see below</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  //Auto Array
  var autoArray = new Array();
  autoArray[0] = "Auto Repair on Monday";
  autoArray[1] = "Auto Repair on Tuesday";
  autoArray[2] = "Auto Repair on Wednesday";
  autoArray[3] = "Auto Repair on Thursday";
  
  //Computer Array
  var computerArray = new Array();
  computerArray[0] = "Computer on Monday";
  computerArray[1] = "Computer on Tuesday";
  computerArray[2] = "Computer on Wednesday";
  computerArray[3] = "Computer on Thursday";
  
  //HomeRepair
  var homeArray = new Array();
  homeArray[0] = "Home Repair on Monday";
  homeArray[1] = "Home Repair on Tuesday";
  homeArray[2] = "Home Repair on Wednesday";
  homeArray[3] = "Home Repair on Thursday";
  
  //Plumbing
  var plumbingArray = new Array();
  plumbingArray[0] = "Plumbing on Monday";
  plumbingArray[1] = "Plumbing on Tuesday";
  plumbingArray[2] = "Plumbing on Wednesday";
  plumbingArray[3] = "Plumbing on Thursday";
  //Gets called and does all the main work
  
  function getServices()
  {
      //Date Selected
      datesVal = getDatesVal();
      //Service Selected
      serviceVal = getServicesVal();
      //Initial value for services
      serviceText = "Your Service date is: ";
  
      if(datesVal == 0)
      {
          if(serviceVal == 0)
          {
              serviceText = serviceText + autoArray[0];
          }
          if(serviceVal == 1)
          {
              serviceText = serviceText + computerArray[0];
          }
          if(serviceVal == 2)
          {
              serviceText = serviceText + homeArray[0];
          }
          if(serviceVal == 3)
          {
              serviceText = serviceText + plumbingArray[0];
          }
      }
  
      if(datesVal == 1)//Tuesday
      {
          if(serviceVal == 0)
          {
              serviceText = serviceText + autoArray[1];
          }
          if(serviceVal == 1)
          {
              serviceText = serviceText + computerArray[1];
          }
          if(serviceVal == 2)
          {
              serviceText = serviceText + homeArray[1];
          }
          if(serviceVal == 3)
          {
              serviceText = serviceText + plumbingArray[1];
          }
      }
  
      if(datesVal == 2)
      {
          if(serviceVal == 0)//Wednesday
          {
              serviceText = serviceText + autoArray[2];
          }
          if(serviceVal == 1)
          {
              serviceText = serviceText + computerArray[2];
          }
          if(serviceVal == 2)
          {
              serviceText = serviceText + homeArray[2];
          }
          if(serviceVal == 3)
          {
              serviceText = serviceText + plumbingArray[2];
          }
      }
  
      if(datesVal == 3)//Thursday
      {
          if(serviceVal == 0)
          {
              serviceText = serviceText + autoArray[3];
          }
          if(serviceVal == 1)
          {
              serviceText = serviceText + computerArray[3];
          }
          if(serviceVal == 2)
          {
              serviceText = serviceText + homeArray[3];
          }
          if(serviceVal == 3)
          {
              serviceText = serviceText + plumbingArray[3];
          }
      }
  
      writeText(serviceText);
  }
  
  
  //Gets the value of the dates RadioButtons
  //Returns an integer
  function getDatesVal()
  {
      //Use the document object model to get the radio button that is checked
      //Format is document.&lt;formName&gt;"."&lt;Objectname&gt;;
      if(document.radioButtonForm.datesRB[0].checked)
      {
          return 0;//Monday
      }
      if(document.radioButtonForm.datesRB[1].checked)
      {
          return 1;//Tuesday
      }
      if(document.radioButtonForm.datesRB[2].checked)
      {
          return 2;//Wednesday
      }
      if(document.radioButtonForm.datesRB[3].checked)
      {
          return 3;//Thursday
      }
  
      //Default value
      return 0;
  }
  
  //Gets the value of the Classes RadioButtons
  //Returns an integer
  function getServicesVal()
  {
      //Use the document object model to get the radio button that is checked
      //Format is document.&lt;formName&gt;.&lt;Objectname&gt;
      if(document.radioButtonForm.servicesRB[0].checked)
      {
          return 0;//Auto
      }
      if(document.radioButtonForm.servicesRB[1].checked)
      {
          return 1;//Computer
      }
      if(document.radioButtonForm.servicesRB[2].checked)
      {
          return 2;//Home Repair
      }
      if(document.radioButtonForm.servicesRB[3].checked)
      {
          return 3;//Plumbing
      }
  
      //Default value
      return 0;   
  }
  
  //Writes text in to the Text Area
  //Takes a string to write in to the text area
  
  function writeText(serviceText)
  { 
      document.radioButtonForm.textA.value = serviceText;
  }
  &lt;/script&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>&lt;!--Body--&gt;
  &lt;form name="radioButtonForm" class="form" role="form"&gt;
  &lt;p&gt;Select your Services from the list: &lt;/p&gt;
      &lt;div class="form-group"&gt;
          &lt;div class="radio"&gt;
              &lt;label&gt;
                  &lt;input type="radio" name="datesRB" checked="checked"&gt;
                   &lt;span class="radio-label"&gt;Monday&lt;/span&gt;
              &lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="radio"&gt;
              &lt;label&gt;
                  &lt;input type="radio" name="datesRB"&gt;
                  &lt;span class="radio-label"&gt;Tuesday&lt;/span&gt;
              &lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="radio"&gt;
              &lt;label&gt;     
                  &lt;input type="radio" name="datesRB"&gt; 
                  &lt;span class="radio-label"&gt;Wednesday&lt;/span&gt;
              &lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="radio"&gt;
              &lt;label&gt;
                  &lt;input type="radio" name="datesRB"&gt;
                  &lt;span class="radio-label"&gt;Thursday&lt;/span&gt;
              &lt;/label&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;div class="radio"&gt;
              &lt;label&gt;
                  &lt;input type="radio" name="servicesRB" checked="checked"&gt;
                  &lt;span class="radio-label"&gt;Auto&lt;/span&gt;
              &lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="radio"&gt;
              &lt;label&gt;
                  &lt;input type="radio" name="servicesRB"&gt;
                  &lt;span class="radio-label"&gt;Computer&lt;/span&gt;
              &lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="radio"&gt;
              &lt;label&gt;
                  &lt;input type="radio" name="servicesRB"&gt;
                  &lt;span class="radio-label"&gt;Home Repair&lt;/span&gt;
              &lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="radio"&gt;
              &lt;label&gt;
                  &lt;input type="radio" name="servicesRB"&gt;
                  &lt;span class="radio-label"&gt;Plumbing&lt;/span&gt;
              &lt;/label&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;textarea name="textA" class="form-control"&gt;Your Scheduled Appointment here...&lt;/textarea&gt; 
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;a type="button" value="Submit" class="btn btn-success" onclick="getServices()"&gt;Submit&lt;/a&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <hr>
  
  <p>I have spent over 7 hours digging through jquery.com and every other site to include this one and just seem to not understand the syntax well enough to get where I am messing up</p>
  
  <p><a href="http://jsfiddle.net/blayderunner123/kfx11cgm/" rel="nofollow">FIDDLE</a></p>