Question

我正在使用jQuery .ajax向mySQL数据库提交html表单。当我提交表单时（在验证所有字段之后），数据IS作为新记录插入到数据库中，但是成功函数不会运行。

*这一切都发生在谷歌地图infoWindow中，但我不确定这是否相关。

HTML：

<div id="formDiv">
    <form name="htmlForm" id="htmlForm">

    <p id="contactP">
    <label for="contact">Email:</label>
    <input type="text" name="contact" id="contact"/> <br/>
    </p>

    <p id="phoneP">
    <label for="phone">Phone:</label>
    <input type="text" name="phone" id="phone"/> <br/>
    </p>

    <p id="datepickerP">
    <label for="datepicker">Date:</label>
    <input type="text" name="date" id="datepicker"/> <br/>
    </p>

    <p id="latP">
    <label for="lat">Latitude:</label>
    <input type="text" name="lat" id="lat" class="location"/> <br/>
    </p>

    <p id="lngP">
    <label for="lng">Longitude:</label>
    <input type="text" name="lng" id="lng" class="location"/> <br/>
    </p>        

    <p id="descP">
    <label for="desc" id="dos">Description of Sighting:</label> <br/>
    <textarea name="desc" id="desc"></textarea><br/>
    </p>

    <input type="submit" class="button" id="submitBtn" value="Post Sighting!" onClick="postSighting();"/>

</div>

Javascript / jQuery：

function postSighting() {
    // jQuery Validate
    $('#htmlForm').validate({
        rules: {
            contact: {required:true, email:true},
            phone: {required:true},
            date: {required:true, date:true},
            lat: {required:true},
            lng: {required:true},
            desc: {required:true},
        },
        messages: {
            desc: 'Please be descriptive!'
        },
        errorPlacement: function(error, element) {
            error.appendTo($('#' + element.attr('id') + 'P'));
            return false;
        };
    });

    //jQuery ajax form submit
        var contact = $('input#contact').val(),
            phone = $('input#phone').val(),
            date = $('input#datepicker').val(),
            lat = $('input#lat').val(),
            lng = $('input#lng').val(),
            desc = $('textarea#desc').val();
        var dataString = "contact=" + contact + '&phone=' + phone + "&date=" + date + "&lat=" + lat + "&lng=" + lng + "&desc=" + desc;
        $.ajax({
            type: "POST",
            url: "Includes/test.php",
            data: dataString,
            error: function(xhr, ajaxOptions, thrownError){
                alert(xhr.status);
                alert(ajaxOptions);
                alert(thrownError);
            },
            beforeSend: function() {
                return $('#htmlForm').validate().form();
            },
            success: function() {
                $('#formDiv').html('<div id="message"></div>');
                $('#message').html('<h2>Thank You!</h2>')
                    .append('<h3>Your sighting has been reported</h3>')     
                return false;
            }   
        });
        return false;  
    };

我已经提醒了jQuery ajax错误，我得到了：

警报（XHR）; =＆GT; 0

alert（thrownError）=＆gt;错误

http://jsfiddle.net/rhewitt/u3C4U/

Answer 1

试试这个而不是内联的javascript函数：

$("#map_canvas").on('click', '.submitBtn', function(e){
    e.preventDefault();
    postSighting();        
});

Answer 2

jQuery无法附加到提交按钮，因为它具有 id submitBtn，并且您尝试附加到 class submitBtn。

更改自：

$('.submitBtn').click(function(e){
    e.preventDefault();
    postSighting();        
});

为：

$('#submitBtn').live("click", function(e){
    e.preventDefault();
    postSighting();        
});

另请注意.live()的使用，因为表单为created dynamically。

jQuery Ajax表单提交忽略'success'功能，重新加载页面

2 个答案: