Question

我有一个ajax表单，其中select控件实际调用ajax函数并动态设置其他控件。提交按钮现在不能正常工作，但是我需要它通常将表单提交到动作网址[不提交给ajax网址]

这是如何正确完成的？

更新：网址位于同一个域中。

这是表格：

<div class="sidebar quick-search">

  <h3><span class="color-primary">Quick</span> Search</h3>

  <form role="form" id="searchform" method="post" action="[[~99]]">


  <div class="row">
      <div class="col-xs-6">
          <div class="form-group">
          <label for="exampleInputEmail1">Manufacturer:</label>
          <select class="form-control input-sm filter-group" data-filter-group="make" id="vehiclemake" name="vehiclemake" >
              [[+vehiclemake]]
          </select>
          </div>
      </div>
      <div class="col-xs-6">
          <div class="form-group">
          <label for="exampleInputEmail1">Model:</label>
          <select class="form-control input-sm filter-group" data-filter-group="model" id="vehiclemodel" name="vehiclemodel" >
              [[+vehiclemodel]]
          </select>
          </div>
      </div>
  </div>

  <div class="row">
      <div class="col-xs-6">
          <div class="form-group">
          <label for="exampleInputEmail1">Year:</label>
          <select class="form-control input-sm filter-group" data-filter-group="year" id="vehicleyear" name="vehicleyear" >
              [[+vehicleyear]]
          </select>
          </div>
      </div>

      <div class="col-xs-6">
          <div class="form-group">
          <label for="exampleInputEmail1">Body Type:</label>
          <select class="form-control input-sm filter-group" data-filter-group="bodytype" id="vehiclebodytype" name="vehiclebodytype" >
              [[+vehiclebodytype]]
          </select>
          </div>
      </div>
  </div>

  <div class="row">
      <div class="col-xs-6">
          <div class="form-group">
          <label for="exampleInputEmail1">Transmission:</label>
          <select class="form-control input-sm filter-group" data-filter-group="transmission" id="vehicletransmission" name="vehicletransmission" >
              [[+vehicletransmission]]
          </select>
          </div>
      </div>
      <!--div class="col-xs-6">
          <div class="form-group">
          <label for="exampleInputPassword1">Mileage:</label>
          <select class="form-control input-sm filter-group" data-filter-group="mileage" id="exampleInputEmail1" name="select" >
                [[+vehiclemileage]]
          </select>
          </div>
      </div-->
  </div>

  <div class="row">
      <div class="col-xs-6">
          <div class="form-group submit">
          <button type="button" class="btn btn-primary form-control input-sm" id="search-form-search">Search</button>
          </div>
      </div>

      <div class="col-xs-6">
          <div class="form-group submit">
          <button type="reset" class="btn btn-primary form-control input-sm" id="search-form-reset" >Reset</button>
          </div>
      </div>
  </div>

  </form>

</div>

和ajax位：

$('.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($("<option></option>").attr('value', 'null'));
    $control.append($("<option></option>").attr('value', '').text('select/clear'));

    $.each(optValues, function(key, value) {

        //console.log('key = ' + key + ' value = ' + value);

        //var mycontrol = $control.append($("<option></option>").attr("value", '.'+key).text(key));

        $("<option />", {
            value: '.' + key,
            text: key,
            selected: value === 'selected'
        }).appendTo($control);

    });

Answer 1

是这样的？

jQuery('#search-form-search').click(function() {
    var form = jQuery('#searchform');
    var url = jQuery('#searchform').attr('action');
    jQuery.ajax({
        type: "POST",
        url: url,
        data: form.serialize(),
        dataType  : "json",
        cache: false
    });
});

实际上我认为你可以做到：

  jQuery('#search-form-search').click(function() {
        jQuery( "#searchform" ).submit();
     });

如何将ajax表单提交给其他URL

1 个答案: