0

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

jsFiddle

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

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）；=> 0

警报（抛出错误）=> 错误

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

4

2 回答 2

0

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

$("#map_canvas").on('click', '.submitBtn', function(e){
    e.preventDefault();
    postSighting();        
});
于 2012-04-04T18:03:22.663 回答
0

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

更改自：

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

到：

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

还要注意使用 ，.live()因为表单是动态创建的。

于 2012-04-05T11:46:35.173 回答