Javascript - 提交表單錯誤

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選擇，3個的經度和緯度字段將被在形式latlngform所示。單擊latlngform中的Submit按鈕後，錯誤消息將出現在控制檯日誌中。

任何幫助將不勝感激。

Answer 1

原來我解決了我的問題.. 而不是在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> 

希望它可以幫助任何人誰過這樣的問題絆倒也。乾杯!

Answer 2

提交不是一個函數

意味着你命名你的提交按鈕或一些其他元素submit。將該按鈕重命名爲btnSubmit，您的呼叫將神奇地工作。

當您命名按鈕提交時，您將覆蓋表單上的submit()函數。