Question

我在弹出式div中有一个反馈表单，否则工作正常但在表单在第一次实例时导致错误时会处理两次SQL。

这是html表单：

<div id="stylized" class="myform">
    <form id="form" method="post" name="form">
        <p>Report:
            <select id="fbtype" name="fbtype"> 
            <option>Bug</option>
            <option>Suggestion</option>
            <option>Discontentment</option>
            <option>Appreciation</option>
            </select>
        </p>
        <p>Brief description:
            <textarea name="comments" id="comments" cols="45" rows="10"></textarea>
        </p>
        <span class="error" style="display:none">Please describe your feedback.</span>
        <span class="success" style="display:none">We would like to thank you for your valuable input.</span>
   <input type="button" value="Submit" class="submit" onclick="feedback_form_submit()"/>
    </form>
</div>

feedback_form_submit（）函数是：

function feedback_form_submit() {
$(function() {
$(".submit").click(function() {
var fbtype = $("#fbtype").val();
var comments = $("#comments").val();
var dataString = 'fbtype='+ fbtype + '&comments=' + comments;

if(fbtype=='' || comments=='' )
    {
    $('.success').fadeOut(200).hide();
    $('.error').fadeOut(200).show();
    }
    else
    {
    $.ajax({
    type: "POST",
    url: "processfeedback.php",
    data: dataString,
    success: function(){
    $('.success').fadeIn(200).show();
    $('.error').fadeOut(200).hide();
    }
    });
    }
return false;
});
});

}

processfeedback.php有：

include "./include/session_check.php";
include_once "./include/connect_to_mysql.php";

if (isset($_POST['fbtype'])){

$userid =$_SESSION['id'];
$fbtype=$_POST['fbtype'];
$comments=$_POST['comments'];
$sql = mysql_query("INSERT INTO feedback (userid, type, comments) 
    VALUES('$userid','$fbtype','$comments')") or die (mysql_error());
}

有人能弄清楚为什么表格会提交两次吗？还有什么建议来控制这种行为？

Answer 1

如果这实际上是您正在使用的代码，您似乎已将 onclick 功能包裹在 $。click 事件添加功能周围：

function feedback_form_submit() {
    $(function() {

        //  This adds a click handler each time you run feedback_form_submit():
        $(".submit").click(function() {

            // ... //

            return false;
        });
    });
}

当我在jsFiddle.net上尝试这个时，我第一次点击提交，没有发生任何事情，然后第二次发布两次，第三次点击发布三次等等。

您应该保持简单：取出 onclick 属性：

<input type="button" value="Submit" class="submit" />

并删除feedback_form_submit（）包装器：

$(function() {

    $(".submit").click(function() {

        // ... //

        return false;
    });
});

这样， $。click 处理函数将在页面加载时应用一次，并且仅在单击 Submit 时运行一次。

编辑：

如果您的表单是通过弹出式DIV中的AJAX加载的，那么您有两个选择：

保持 onclick ，但请删除 $。click 包装：

function feedback_form_submit() {

    // ... //

}

和

<input type="button" value="Submit" class="submit" onclick="feedback_form_submit()" />

请注意，如果您使用＆lt; input type =“submit”...＆gt; ，则只需返回false;使用＆lt; input type =“button”...＆gt; 时，浏览器不会观看 onclick 的返回值，以确定是否发布表单。（返回值可能会影响点击事件的传播，但是......）。

或者，您可以使用jQuery的 $ .live 功能：

$(function() {
    $('.submit').live('click',function() {

        // ... //

    });
});

和

<input type="button" value="Submit" class="submit" />

这具有在动态添加新DOM元素时观察它们的效果;在您的情况下，新 class =“提交”元素。

Answer 2

您的feedback_form_submit函数不会返回false，在提交单击时您也会发布到服务器。没有必要onClick in：

 <input type="button" value="Submit" class="submit" onclick="feedback_form_submit()"/>

将其更改为：

 <input type="button" value="Submit" class="submit"/>

并将您的代码更改为：

// Update: Since you're loading via AJAX, bind it in the success function of the
// AJAX request.

// Let's make a function that handles what should happen when the popup div is rendered
function renderPopupDiv() {
    // Bind a handler to submit's click event
    $(".submit").click(function(event) {
        var fbtype = $("#fbtype").val();
        var comments = $("#comments").val();
        var dataString = 'fbtype='+ fbtype + '&comments=' + comments;

        if(fbtype=='' || comments=='' )
        {
            $('.success').fadeOut(200).hide();
            $('.error').fadeOut(200).show();
        }
        else
        {
            $.ajax({
                type: "POST",
                url: "processfeedback.php",
                data: dataString,
                success: function(){
                    $('.success').fadeIn(200).show();
                    $('.error').fadeOut(200).hide();
                }
            });
        }
        return false;
    });

// This is the success function for the AJAX request that loads the popup div
success: function() {
    ... 
    // Run our "onRender" function
    renderPopupDiv();
}

表格发布数据两次

2 个答案: