Question

我在尝试提交根据第一个表单中提供的响应动态显示的第二个表单（latlngform）时遇到错误。我没有测试submit()函数中的脚本是否有效，因为错误不允许我的程序继续运行。

Error:
jquery-1.11.3.min.js:5 XMLHttpRequest cannot load file:///C:/Users/.../index.html.
Cross origin requests are only supported for protocol schemes: http, data, chrome,
chrome-extension, https, chrome-extension-resource

以下是我的代码的错误部分：

<div data-role="page" id="pagefive">
  <div data-role="header" data-position="fixed">
    <h1>Location of Meeting</h1>
    <a href="#pageone" data-role="button" data-inline="true">Go back</a>
    <a href="#mypanel" class="hamburger">&#9776;</a>
  </div>

  <div data-role="main" class="ui-content">
    <div data-role="content" id="content">
      <form id="inputpax" action='#pagefive'>
        <select name="pax" id="pax" data-inline="true">
          <option value="0">0</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
        </select>
        <input type="submit" value="Submit" id="submitpax" />
      </form>

      <div data-role="content" id="latlngform"></div>

      <div id="map" style="height: 400px;"></div>
    </div>
  </div>

  <div data-role="panel" id="mypanel">
    <ul>
      <a href="#pagetwo">Create Meetings</a><br/>
      <a href="#pagethree">Display meetings</a><br/>
      <a href="#pageseven">Past Meetings</a><br/>
      <a href="#pagefive">Find Midpoint</a><br/>
    </ul>

  </div>
</div>

<script>
  $("#inputpax").submit(function(event) {
    event.preventDefault();
    var selectList = document.getElementById("pax");
    var pax = selectList.options[selectList.selectedIndex].value;
    var form = "<form id='inputLatLng' action='#pagefive' >";
    for (count = 0; count < pax; count++) {
      form += "<div class='ui-field-contain'> <label for='location'>Latitude " + (count + 1) + " :</label><input type='text' id='lat" + count + "' data-clear-btn='true'></div><div class='ui-field-contain'><label for='location'>Longitude " + (count + 1) + " :</label><input type='text' id='long" + count + "' data-clear-btn='true'></div>";
    }
    form += "<input type='hidden' value='" + pax + "' id='noOfPax' />";
    form += "<input type='submit' value='Submit' id='submit'></form>";
    document.getElementById("latlngform").innerHTML = form;
  });

  $("#inputLatLng").submit(function(event) {
    event.preventDefault();
    var noPax = document.getElementById("noOfPax");
    console.log(noPax);
    var locations = [];
    for (count = 0; count < noPax; count++) {
      var latStr = lat + count;
      var longStr = long + count;
      console.log("hi2");
      var latitude = document.getElementById(latStr);
      var longitude = document.getElementById(longStr);
      console.log("hi3");
      locations.push([latitude, longitude]);
    }

    var bound = new google.maps.LatLngBounds();
    for (i = 0; i < locations.length; i++) {
      bound.extend(new google.maps.LatLng(locations[i][1], locations[i][2]));

              // OTHER CODE
            }

    var centreLatLng = bound.getCenter();

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 18,
      center: centreLatLng,
      mapTypeId: 'roadmap'
    });

    var markercenter = new google.maps.Marker({

      position: centreLatLng,
      title: "test Centre",
      animation: google.maps.Animation.Drop

    });
    markercenter.setMap(map);

    var infowindow = new google.maps.InfoWindow({
      content: "This is the centre location. <br/> You can find a desired meetup point within 100m radius of this marker."
    });

    markercenter.addListener('click', function() {
      markercenter.setAnimation(google.maps.Animation.BOUNCE);
      infowindow.open(map, markercenter);
    });
  });
</script>

注意：例如，如果3形式中选择了inputpax，则会在latlngform形式中显示3个纬度和经度字段。单击Submit中的latlngform按钮后，控制台日志中会显示错误消息。

非常感谢任何帮助。

Answer 1

提交不是功能

表示您将提交按钮或其他元素命名为submit。将按钮重命名为btnSubmit，您的通话将神奇地工作。

当您将按钮命名为submit时，您将覆盖表单上的submit()函数。

Answer 2

原来我解决了我的问题.. 不要在innerHTML标记中声明<form>和form id，而是将其声明为HTML标记。

我的代码如下：

<form id="inputLatLng" action='#pagefive'>
    <div data-role="content" id="latlngform"></div>
</form>

<script>
    $("#inputpax").submit(function (event) {
        event.preventDefault();
        var selectList = document.getElementById("pax");
        var pax = selectList.options[selectList.selectedIndex].value;
        var form = "";
        for (count = 0; count < pax; count++) {
            form += "<div class='ui-field-contain'> <label for='location'>Latitude " + (count + 1) + " :</label><input type='text' id='lat" + count + "' data-clear-btn='true'></div><div class='ui-field-contain'><label for='location'>Longitude " + (count + 1) + " :</label><input type='text' id='long" + count + "' data-clear-btn='true'></div>";
        }
        form += "<input type='hidden' value='" + pax + "' id='noOfPax' />";
        form += "<input type='submit' value='Generate' id='submitlatlng' />";
        document.getElementById("latlngform").innerHTML = form;
      });
</script>

希望它能帮助那些偶然发现这个问题的人。干杯！

Javascript - 提交表单错误

2 个答案: