Javascript - 送信フォームエラー

Question

最初のフォームで提供された応答に従って動的に表示されるこの2番目のフォーム（latlngform）を送信しようとすると、エラーが発生しました。エラーがプログラムを続行できないため、submit()関数内のスクリプトが動作するかどうかはテストしていません。

<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> 

注：

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 

は、以下の私のコードの誤った部分である3フォームinputpaxで選択された場合、例えば、3つの緯度および経度フィールドがフォームlatlngformに示します。 latlngformのSubmitボタンをクリックすると、エラーメッセージがコンソールログに表示されます。

ご協力いただければ幸いです。

Answer 1

私は自分の問題を解決しました。 <form>とform idをinnerHTMLタグで宣言する代わりに、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()関数が上書きされます。