title: How to submit an ajax form to a different url
body: <p>I have an ajax form where the select controls actually call the ajax functions and set the other controls dynamically. The submit button does not work at all right now, but I need it to submit the form to the action url normally [not submit to the ajax url]</p>
  
  <p>How is this done correctly? </p>
  
  <p><strong>UPDATE:</strong> the urls are in the same domain. </p>
  
  <p>here is the form:</p>
  
  <pre><code>&lt;div class="sidebar quick-search"&gt;
  
    &lt;h3&gt;&lt;span class="color-primary"&gt;Quick&lt;/span&gt; Search&lt;/h3&gt;
  
    &lt;form role="form" id="searchform" method="post" action="[[~99]]"&gt;
  
  
    &lt;div class="row"&gt;
        &lt;div class="col-xs-6"&gt;
            &lt;div class="form-group"&gt;
            &lt;label for="exampleInputEmail1"&gt;Manufacturer:&lt;/label&gt;
            &lt;select class="form-control input-sm filter-group" data-filter-group="make" id="vehiclemake" name="vehiclemake" &gt;
                [[+vehiclemake]]
            &lt;/select&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-xs-6"&gt;
            &lt;div class="form-group"&gt;
            &lt;label for="exampleInputEmail1"&gt;Model:&lt;/label&gt;
            &lt;select class="form-control input-sm filter-group" data-filter-group="model" id="vehiclemodel" name="vehiclemodel" &gt;
                [[+vehiclemodel]]
            &lt;/select&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="row"&gt;
        &lt;div class="col-xs-6"&gt;
            &lt;div class="form-group"&gt;
            &lt;label for="exampleInputEmail1"&gt;Year:&lt;/label&gt;
            &lt;select class="form-control input-sm filter-group" data-filter-group="year" id="vehicleyear" name="vehicleyear" &gt;
                [[+vehicleyear]]
            &lt;/select&gt;
            &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="col-xs-6"&gt;
            &lt;div class="form-group"&gt;
            &lt;label for="exampleInputEmail1"&gt;Body Type:&lt;/label&gt;
            &lt;select class="form-control input-sm filter-group" data-filter-group="bodytype" id="vehiclebodytype" name="vehiclebodytype" &gt;
                [[+vehiclebodytype]]
            &lt;/select&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="row"&gt;
        &lt;div class="col-xs-6"&gt;
            &lt;div class="form-group"&gt;
            &lt;label for="exampleInputEmail1"&gt;Transmission:&lt;/label&gt;
            &lt;select class="form-control input-sm filter-group" data-filter-group="transmission" id="vehicletransmission" name="vehicletransmission" &gt;
                [[+vehicletransmission]]
            &lt;/select&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;!--div class="col-xs-6"&gt;
            &lt;div class="form-group"&gt;
            &lt;label for="exampleInputPassword1"&gt;Mileage:&lt;/label&gt;
            &lt;select class="form-control input-sm filter-group" data-filter-group="mileage" id="exampleInputEmail1" name="select" &gt;
                  [[+vehiclemileage]]
            &lt;/select&gt;
            &lt;/div&gt;
        &lt;/div--&gt;
    &lt;/div&gt;
  
    &lt;div class="row"&gt;
        &lt;div class="col-xs-6"&gt;
            &lt;div class="form-group submit"&gt;
            &lt;button type="button" class="btn btn-primary form-control input-sm" id="search-form-search"&gt;Search&lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="col-xs-6"&gt;
            &lt;div class="form-group submit"&gt;
            &lt;button type="reset" class="btn btn-primary form-control input-sm" id="search-form-reset" &gt;Reset&lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;/form&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>and the ajax bit:</p>
  
  <pre><code>$('.filter-group').change(function() {
  
      var form = $('#searchform');
  
      $.ajax({
          type: "POST",
          //url: form.attr( 'action' ),
          url: '[[~131]]',
          data: form.serialize(),
          dataType  : "json",
          cache: false,
  
  
          beforeSend: function() {
              console.log( 'before send' );
          },
  
          success: function(data, status) {
  
              $.each(data, function( key, value ) {
  
                  //console.log(key);
  
                  populateSelectControls(key, value);
  
              });
  
          },
  
          error: function(data){
              //this would be a 404 error!    
              console.log('hellooo - this is an error!!!');
          }
      });
  });
  
  
  function populateSelectControls(optKey, optValues){
  
      var $control = $('#' + optKey);
  
      $control.empty(); 
  
      //$control.append($("&lt;option&gt;&lt;/option&gt;").attr('value', 'null'));
      $control.append($("&lt;option&gt;&lt;/option&gt;").attr('value', '').text('select/clear'));
  
      $.each(optValues, function(key, value) {
  
          //console.log('key = ' + key + ' value = ' + value);
  
          //var mycontrol = $control.append($("&lt;option&gt;&lt;/option&gt;").attr("value", '.'+key).text(key));
  
          $("&lt;option /&gt;", {
              value: '.' + key,
              text: key,
              selected: value === 'selected'
          }).appendTo($control);
  
      });
  </code></pre>