Question

我有一个网站使用谷歌地图api添加和保存标记到PHP数据库。当一个新标记被添加到地图时，它会打开一个InfoWindow，它显示一个表单，用于提交数据并将其保存到数据库。

表格是：

var WinnerForm = '<p><div class="winner-form">'+
            '<form action="addwinner.php" method="POST" name="SaveMarker" id="SaveMarker">'+
            '<label for="w_name"><span>Winner Name :</span><input type="text" name="w_name" class="save-name" placeholder="Name of Winner" maxlength="40"/></label>'+
            '<label for="w_address"><span>Address :</span><textarea name="w_address" class="save-address" placeholder="Address of Winner" maxlength="150"></textarea></label>'+
            '<label for="w_description"><span>Description :</span><textarea name="w_description" class="save-desc" placeholder="Dewscription of Award" maxlength="150"></textarea></label>'+

            '<button name="save-winner" class="save-winner btn btn-info btn-sm style="float:left">Save Winner<br>' +
            '<button name="cancel-winner" class="cancel-winner btn btn-warning btn-sm" style="float:right">Cancel winner</button>' +
            '</div>';
            //Drop a new Marker with the Winner Form
            new_winner_marker(event.latLng, 'New Winner', WinnerForm, '', '', '', true, true, true, "static/assets/new_winner_icon.png");

显示此表单的脚本是：

function new_winner_marker(MapPos, wName, wForm, wDesc, wMonth, wYear, InfoOpenDefault, DragAble, InfoOpenDefault, iconPath)
{

    var marker = new google.maps.Marker({
        position: MapPos,
        map: map,
        draggable:DragAble,
        title: wName,
        icon: iconPath
    });

    // Store the name info as a marker properties 
    marker.myname = wName;
    winner_markers.push(marker);

    // Content to be displayed in winner InfoWindows
    var winnerContent = $(
        '<div class="marker-inner-win"><span class="info-content">'+
        '<h3 class="winner-heading">'+wName+'</h3><br>'+
        wForm +
        '</div></div>'); 

    // Open Info window by default to add form
    infowindow.setContent(winnerContent[0]);

使用表单按下“保存”按钮时，应保存详细信息并保存标记。它将数据保存到数据库，但不是在地图上显示新标记，而是在浏览器中打开空白的PHP。我也有它所以如果字段名称留空，它会打开一个弹出窗口（引导模式），说明名称不能为空。但同样，这不会发生，它只是重定向到addwinners.php：

var saveBtn = winnerContent.find('button.save-winner')[0];

if(typeof saveBtn !== 'undefined') //continue only when save button is present
    {
        //add click listner to save marker button
        google.maps.event.addDomListener(saveBtn, "click", function(event) {
            var mReplace = winnerContent.find('span.info-content'); 
            var wName = winnerContent.find('input.save-name')[0].value;
            var wAdd  = winnerContent.find('textarea.save-address')[0].value; 
            var wDesc  = winnerContent.find('textarea.save-desc')[0].value; 
            var wMonth = winnerContent.find('select.save-month')[0].value;
            var wYear = winnerContent.find('select.save-year')[0].value; 

            if(wName =='')
            {
                $("#myModal-save").modal('show,', 100);

            }else{
                save_winner(marker, wName, wAdd, wDesc, wMonth, wYear, mReplace); //call save marker function
            }

使用ajax将保存数据的函数发送到php脚本：

function save_winner(Marker, wName, wAdd, wDesc, wMonth, wYear, replaceWin)
{
    //Save new marker using jQuery Ajax
    var mLatLang = Marker.getPosition().toUrlValue(); //get marker position
    var myData = {name : wName, address : wAdd, about : wDesc, latlang : mLatLang, month : wMonth, year: wYear }; //post variables

    $.ajax({
      type: "POST",
      url: "addwinner.php",
      data: myData,
      success:function(data){
            replaceWin.html(data); //replace info window with new html
            $("#winner-saved").slideDown();
            Marker.setDraggable(false); //set marker to fixed

            infowindow.setContent('Winner Added');
            setTimeout(function () {infowindow.close();}, 3000); // Close info window after 3 seconds
        },
        error:function (xhr, ajaxOptions, thrownError){
            alert(thrownError); //throw any errors
        }
    });
}

Answer 1

因此，您的表单上有一个操作网址和方法。然后你在一个ajax请求中指定一个url和一个方法，这可能与表单标签上的那些完全不同。

发生的ajax请求并不会阻止原始表单提交。

在提交按钮事件处理程序上，执行event.preventDefault()和/或return false以停止表单提交（但仍然允许您的ajax帖子）。

此外，我建议从表单标记中删除操作和方法属性，以防止可能的混淆。

Answer 2

感谢。使用event.preventDefault();帮助解决了这个问题，但是我在$("#myModal-winner").modal('show,' 100);时出错 - 在显示后有一个逗号，在括号中，所以必须更改为：

$("#myModal-winner").modal('show', 100);

使用Google Map Api保存标记 - 重定向到.php页面

2 个答案: