title: How to change jQuery AJAX URL with input text on form submit?
body: <p>I'm kind of new to AJAX and form submission. I have a page that loads stock market data and populates fields with latest price, change, high, low etc...</p>
  
  <p>I'm trying to change the stock market symbol (AJAX URL) by taking an input field's value and changing the AJAX URL without a page refresh hopefully.</p>
  
  <p>In this plunkr, you can see I have a hard-coded value for the AJAX URL that pulls in data for AAPL and this works, however, I need to change that URL to whatever value is in the html form input field but can't figure out how. All that needs to change is the last stock symbol part of the URL. I would really appreciate someone's help.</p>
  
  <p><a href="http://plnkr.co/edit/WKco9AAPeSl3PvlyA4Z9?p=streamer" rel="nofollow">click the eye/live-preview icon on Plunker</a></p>
  
  <pre><code>$.ajax({
  dataType: 'jsonp',
  url: 'http://dev.markitondemand.com/Api/v2/Quote/jsonp?symbol=AAPL',
  success: function(data) {
  $('h1').html(data.Name);
  $('.container #companyName').html(data.Name);
  $('#lastPrice').html(data.LastPrice.toFixed(2));
  $('#change').html(data.Change.toFixed(2));
  $('#changePercent').html("(" + data.ChangePercent.toFixed(2) + "%)");
  $('#range p').html(data.Low + '- ' + data.High);
  $('#open p').html(data.Open.toFixed(2));
  $('#volume p').html(Math.round(data.Volume / 100000));
  $('#marketCap p').html(Math.round(data.MarketCap / 1000000000));
  
  var vol = data.Volume.toString();
  if (vol &gt; 6) {
  $('#volume p').append('M');
  }
  
  var cap = data.Volume.toString();
  if (cap &gt; 7) {
  $('#marketCap p').append('B')
  }
  
  
  var date = new Date();
  var hours = date.getHours() &gt; 12 ? date.getHours() - 12 : date.getHours();
  var am_pm = date.getHours() &gt;= 12 ? "PM" : "AM";
  //hours = hours &lt; 10 ? "" + hours : hours;
  var minutes = date.getMinutes() &lt; 10 ? "0" + date.getMinutes():date.getMinutes();
  var seconds = date.getSeconds() &lt; 10 ? "0" + date.getSeconds() :date.getSeconds();
  time = hours + ":" + minutes + ":" + seconds + " " + am_pm;
  $('#time').html('As of ' + time);
  
  $("#getQuote").submit(function(event) {
  var newURL = 'http://dev.markitondemand.com/Api/v2/Quote/jsonp?symbol=' + $('#symbolInput').val();
  $.ajax({url:newURL});
  event.preventDefault();
  });
  }
  });
  </code></pre>
  
  <p>and here is what the HTML looks like (it's using bootstrap):</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;title&gt;Stock Quotes&lt;/title&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="quote-module" class="col-md-12"&gt;
      &lt;h1&gt;&lt;/h1&gt;
    &lt;/div&gt;
    &lt;hr id='hruleFat' /&gt;
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div class='col-md-1' id='companyName'&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id='prices'&gt;
        &lt;div class='row'&gt;
          &lt;div id='lastPrice' class='col-md-6 pull-left'&gt;&lt;/div&gt;
          &lt;div id='changes'&gt;
            &lt;div id='changePercent' class='col-md-3 pull-right'&gt;&lt;/div&gt;
            &lt;div id='change' class='col-md-3 pull-right'&gt;&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;hr&gt;
      &lt;div id='range'&gt;
        &lt;p class='pull-right'&gt;&lt;/p&gt;Range&lt;/div&gt;
      &lt;hr&gt;
      &lt;div id='open'&gt;
        &lt;p class='pull-right'&gt;&lt;/p&gt;Open&lt;/div&gt;
      &lt;hr&gt;
      &lt;div id='volume'&gt;
        &lt;p class='pull-right'&gt;&lt;/p&gt;Volume&lt;/div&gt;
      &lt;hr&gt;
      &lt;div id='marketCap'&gt;
        &lt;p class='pull-right'&gt;&lt;/p&gt;Market Cap&lt;/div&gt;
      &lt;hr&gt;
    &lt;/div&gt;
    &lt;div class='row'&gt;
      &lt;div id='time' class='col-md-6 pull-right'&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;hr&gt;
    &lt;div id='getQuoteForm' class='row'&gt;
      &lt;form class="form-inline" id='getQuote'&gt;
        &lt;div class="form-group" id='formGroup'&gt;
          &lt;div class='col-xs-6'&gt;
            &lt;input type="text" class="form-control" id="symbolInput"&gt;
          &lt;/div&gt;
          &lt;div class='col-xs-6'&gt;
            &lt;button type="submit" class="btn btn-default"&gt;Get New Quote&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/form&gt;
    &lt;/div&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" /&gt;
    &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;script src="script.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="style.css" /&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>