submit()根本没有触发

时间:2017-01-05 16:20:47

标签: jquery ajax form-submit

我不确定为什么submit()根本没有触发。 click事件和底层AJAX调用工作正常,但表单没有提交。我也尝试了$("#storeForm").unbind().submit();,但没有效果。

$(document).on("click", '#submit', function(e) {
  e.preventDefault();
  var frm = $("#storeForm");
  var address = $("#address").val();
  var state = $("#state option:selected").text();
  var city = $("#city").val();
  var country = "USA";
  var addressToSearch = state + " " + state + " " + country;
  var urlGeoCode = 'https://maps.googleapis.com/maps/api/geocode/json?key=AIzaSyAfAyG4l207wcJUn-D8XsOUZvCSwJv27zs&&address=' + addressToSearch;

  jQuery.ajax({
    url: urlGeoCode,
    success: function(result) {
      var location = result.results[0].geometry.location;
      $("#longitude").val(location.lng);
      $("#latitude").val(location.lat);
      $('#storeForm').submit();
    },
  });
});

已编辑:结果resultOutput为正确的格式

2 个答案:

答案 0 :(得分:2)

您的问题与触发submit()事件无关。如果您检查控制台,则会看到错误:

  

未定义resultOutput

这是因为您在success处理程序中访问响应文本的方式存在语法错误。结果,submit()甚至没有被调用。

要解决此问题,您需要将var location = resultOutput.geometry.location;更改为var location = result.results[0].geometry.location;。然后,在提交表单之前,这将获得正确的数据。试试这个:



$(document).on("click", '#submit', function(e) {
  var urlGeoCode = 'https://maps.googleapis.com/maps/api/geocode/json?key=AIzaSyAfAyG4l207wcJUn-D8XsOUZvCSwJv27zs&&address=Florida Florida Orlando';

  jQuery.ajax({
    url: urlGeoCode,
    success: function(result) {
      var location = result.results[0].geometry.location;
      $("#longitude").val(location.lng);
      $("#latitude").val(location.lat);
      $('#storeForm').submit();
    }
  });
});

$('#storeForm').on('submit', function(e) {
  e.preventDefault();
  console.log('form submission...');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="storeForm">
  <input type="text" id="longitude" />
  <input type="text" id="latitude" />
</form>

<button type="button" id="submit">Get location...</button>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

这个精彩的浏览器功能可以将您的id="submit"转换为表单上的属性。这有覆盖表单节点的.submit方法的不幸副作用,这就是jQuery无法提交所述表单的原因。

解决方案当然是删除id="submit",可能用其他内容替换它或者以不同的方式处理提交。