title: I have 2 radio buttons and i want to make a different ajax page load into a div element depending on which one is selected
body: <p>I have 2 Radio Buttons that are used to select between 2 locations so that a different PHP page can be loaded from an external file when selected. But the file does also need to have an automatic refresh so that it can show the most up to date information every 3 minutes.</p>
  <p>These are my radio buttons:</p>
  <pre><code>&lt;div class=&quot;locationdrop&quot;&gt;
      &lt;div class=&quot;dropbtn&quot;&gt;Location&lt;/div&gt;
          &lt;div class=&quot;locationlist&quot;&gt;
              &lt;input type=&quot;radio&quot; id=&quot;location1&quot; name=&quot;location&quot; value=&quot;Location 1&quot; class=&quot;locationinput&quot; checked=&quot;checked&quot;&gt;
              &lt;label for=&quot;location1&quot; class=&quot;locationlabel&quot;&gt;Location 1&lt;/label&gt;
              &lt;input type=&quot;radio&quot; id=&quot;location2&quot; name=&quot;location&quot; value=&quot;Location 2&quot; class=&quot;locationinput&quot;&gt;
              &lt;label for=&quot;location2&quot; class=&quot;locationlabel&quot;&gt;Location 2&lt;/label&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>This is my Script (using an auto updating AJAX):</p>
  <pre><code>&lt;script&gt;
      $(document).ready(function() {
          function getData() {
              if(document.getElementById('location1').checked) {
                  $.ajax({
                      type: 'POST',
                      url: 'location1data.php',
                      success: function(data){
                          $('#locationoutput').html(data);
                      } 
                  });
              }else if(document.getElementById('location2').checked) {
                  $.ajax({
                      type: 'POST',
                      url: 'location2data.php',
                      success: function(data){
                          $('#locationoutput').html(data);
                      } 
                  });
                  getData();
                  setInterval(function () {
                      getData(); 
                  }, 120000);  // it will refresh your data every 3 mins
              };
          };
      });
  &lt;/script&gt;
  </code></pre>
  <p>This is my original (working) code to load the php into the div:</p>
  <pre class="lang-js prettyprint-override"><code>&lt;script&gt;
      $(document).ready(function(){
          function getData(){
              $.ajax({
                  type: 'POST',
                  url: 'locationData.php',
                  success: function(data){
                      $('#locationoutput').html(data);
                  }
              });
          }
          getData();
          setInterval(function () {
              getData(); 
          }, 120000);  // it will refresh your data every 1 sec
       });
  &lt;/script&gt;
  </code></pre>
  <p>I just need it to choose between 2 of these using the radio buttons.</p>
  <p>Assistance would be greatly appreciated :)</p>