Javascript 同一页面中的多表单-创建带有输入地址和存储在数据库中的标记
我正在尝试创建一个表单来创建一个将存储在数据库中的事件。 为此，我选择了一个表单来给出事件的位置，另一个表单来描述事件，，这两个表单都在同一页面上，使用JQuery 我的问题是获取用户输入的地址的坐标，以创建一个在表单末尾带有标记的地图，然后将其存储到数据库中问题可能来自调用我的函数的时刻或类似的情况。 应根据地址输入生成的标记没有显示在步骤n°2的映射图上（实际上是第三个，它应该是正在创建的事件的摘要），然后当我验证此步骤时，会出现一条消息，表示未检索lat和lng（应通过$\u GET变量） 我从来没有练习过Javascript（我有一个模板，我适应了这种形式），我有点厌倦了尝试各种危险的解决方案来获取坐标，有人能帮我吗？以下是我页面的主要代码（是的，部分是法语）：Javascript 同一页面中的多表单-创建带有输入地址和存储在数据库中的标记,javascript,php,jquery,database,google-maps,Javascript,Php,Jquery,Database,Google Maps,我正在尝试创建一个表单来创建一个将存储在数据库中的事件。 为此，我选择了一个表单来给出事件的位置，另一个表单来描述事件，，这两个表单都在同一页面上，使用JQuery 我的问题是获取用户输入的地址的坐标，以创建一个在表单末尾带有标记的地图，然后将其存储到数据库中问题可能来自调用我的函数的时刻或类似的情况。 应根据地址输入生成的标记没有显示在步骤n°2的映射图上（实际上是第三个，它应该是正在创建的事件的摘要），然后当我验证此步骤时，会出现一条消息，表示未检索lat和lng（应通过$\u GET变量）
晚安！
- 1一晚
- 2Le LIUE
野名
阿迪斯
邮政编码
维尔
代型
梅森
公寓
酒吧
博厄特·德努伊特
餐厅
萨勒
帕洛阿尔托
奥特雷。。。
Étape suivante
诺姆·德·沃特之夜
日期和时间，但：
日期和时间：
描述
能力（人员）
d'vénement型
埃米斯之家酒店
费特
壶
鸡尾酒
德纳
阿佩罗
夜总会
奥特雷。。。
圣诞夜！！
投降之夜
瓦利德赛特之夜
函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'）{
中心：新google.maps.LatLng（48.852922,2.349846），
缩放：12
});
var geocoder=new google.maps.geocoder（）；
document.getElementById（'creationE'）。addEventListener（'click'，function（）{
地理编码地址（地理编码器、地图）；
});
var lat=geocodeAddress（）.纬度；
lat=组件（lat）；
var lng=geocodeAddress（）.经度；
液化天然气=天然气组分（lng）；
window.location.href=“nightCreation.php？step=2&lat=“+lat+”&lng=“+lng；
/*不知道该把这个放在哪里*/
}
函数geocodeAddress（geocoder，resultsMap）{
var address=document.getElementById（'address'）。值；
geocoder.geocode（{'address'：address}，函数（结果，状态）{
if（status==google.maps.GeocoderStatus.OK）{
<body class="nighty-background-purple">
<!--les formulaires html-->
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<div id="head"><!-- Head -->
<div class="col-md-offset-5 col-md-3">
<h1>Créez votre Night !</h1>
</div>
</div><!-- Head -->
<div id="etape_simulation"><!-- Etape simulation -->
<div class="col-md-offset-4 col-md-4">
<div class="row">
<ul class="progression">
<li class="firstcircle"><span class="numberCircle">1</span><span class="normal">La Night</span></li>
<li><span class="numberCircle">2</span><span class="normal">Le lieu</span></li>
</ul>
</div>
<div class="row"><!-- Row -->
<form id="step1" method="post" name="step1" action="?step=1"><!-- Step 1 : Lieu -->
<div class="form-group">
<div class="row">
<div><!-- Nom du Lieu -->
<label for="nomL" class="control-label">Nom du lieu</label>
<input class="form-control" id="nomL" name="nomL" />
</div><!-- Nom du Lieu -->
</div>
</div>
<div class="form-group">
<div class="row">
<div><!-- Adresse -->
<label for="address" class="control-label">Adresse</label>
<input type="text" class="form-control" name="address" id="address" required/>
</div><!-- Adresse -->
</div>
</div>
<div class="form-group">
<div class="row">
<div><!-- Code Postal -->
<label for="codePostalL" class="control-label">Code Postal</label>
<input type="text" id="codePostalL" class="form-control" name="codePostalL" required />
</div><!-- Code Postal -->
<div><!-- Ville -->
<label for="villeL" class="control-label">Ville</label>
<input type="text" id="villeL" class="form-control" name="villeL" required />
</div><!-- Ville -->
</div>
</div>
<div class="form-group"><!-- Type de Lieu -->
<label for="typeL" class="control-label">Type de lieu</label>
<br/>
<select class="form-control" id="typeL" name="typeL">
<option value="Maison">Maison</option>
<option value="Appartement">Appartement</option>
<option value="Bar">Bar</option>
<option value="Boîte de nuit" >Boîte de nuit</option>
<option value="Restaurant">Restaurant</option>
<option value="Salle">Salle</option>
<option value="Parc">Parc</option>
<option value="Autre">Autre...</option>
</select>
</div><!-- Type de Lieu -->
<div class="form-group"><!-- Etape suivante -->
<button class="greenbutton btn-lg" type="submit" id="creationL" >Étape suivante</button>
</div><!-- Etape suivante -->
</form><!-- Step 1 : Lieu -->
<form id="step2" method="post" name="step2" action="?step=2" style="display: none"><!-- Step 2 : Événement -->
<div class="form-group">
<div class="row">
<div><!-- Nom événement -->
<label for="nomE" class="control-label">Nom de votre Night</label>
<input type="text" class="form-control" name="nomE" id="nomE" required/>
</div><!-- Nom événement -->
<div><!-- Date Heure Début -->
<label for="dateHeureDebut" class="control-label">Date et heure de début :</label>
<input type="datetime" class="form-control" name="dateHeureDebut" id="dateHeureDebut" placeholder="01-01-2018 20:00" required/>
</div><!-- Date Heure Début -->
<div><!-- Date Heure Fin -->
<label for="dateHeureFin" class="control-label">Date et heure de fin :</label>
<input type="datetime" class="form-control" name="dateHeureFin" id="dateHeureFin" placeholder="01-01-2018 20:00" />
</div><!-- Date Heure Fin -->
<div><!-- Description -->
<label for="descriptionE" class="control-label">Description</label>
<textarea rows="5" cols="50" class="form-control" name="descriptionE" id="descriptionE" required></textarea>
</div><!-- Description -->
<div><!-- Capacité -->
<label for="capaciteE" class="control-label">Capacité (en personnes)</label>
<input type="number" min="0" class="form-control" name="capaciteE" id="capaciteE" required />
</div><!-- Capacité -->
<div><!-- Type événement -->
<label for="typeE" class="control-label">Type d'événement</label>
<select class="form-control" id="typeE" name="typeE">
<option value="01">Soirée entre amis</option>
<option value="02">Fête</option>
<option value="03">Pot</option>
<option value="04" >Cocktail</option>
<option value="05">Dîner</option>
<option value="06">Apéro</option>
<option value="07">Night club</option>
<option value="08">Autre...</option>
</select>
</div><!-- Type événement -->
</div>
<div class="row"><!-- Créer Night -->
<button class="greenbutton btn-lg" type="submit" id="creationE" >Créer ma Night !!</button>
</div><!-- Créer Night -->
</div><!-- form-group -->
</form><!-- Step 2 : Événement -->
<form id="step3" method="post" name="step3" action="?step=3" style="display: none"><!-- Step 3 : Confirmation -->
<h2>Récapitulatif de votre Night</h2>
<div class="row" id="map">
</div>
<div>
<button class="btn btn-lg" type="submit" id="validerE">Valider cette Night</button>
</div>
</form><!-- Step 3 : Confirmation -->
</div><!-- Row -->
</div><!-- Col-md-4 col-md-offset-4 -->
</div><!-- Etape simulation -->
</main>
</div>
<?php require('/Applications/MAMP/htdocs/Nighty/footer/footer.php') ?>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(48.852922, 2.349846),
zoom: 12
});
var geocoder = new google.maps.Geocoder();
document.getElementById('creationE').addEventListener('click', function() {
geocodeAddress(geocoder, map);
});
var lat = geocodeAddress().latitude;
lat = encodeURIComponent(lat);
var lng = geocodeAddress().longitude;
lng = encodeURIComponent(lng);
window.location.href="nightCreation.php?step=2&lat=" + lat + "&lng=" + lng;
/*Don't know where to put this*/
}
function geocodeAddress(geocoder, resultsMap) {
var address = document.getElementById('address').value;
geocoder.geocode({'address': address}, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
resultsMap.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: resultsMap,
position: results[0].geometry.location
});
} else {
alert('Adresse incorrecte, veuillez la préciser ou la corriger.');
}
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=NOT_REVEALING_MY_API_KEY&signed_in=true&callback=initMap"
async defer></script>