Question

我正在尝试提交表单数据而不使用jQuery刷新页面。我已经在正确的位置添加了以下所有代码，但页面刷新并且没有任何反应，既不回显成功数据也不将任何数据插入到sql db中。这是我正在尝试做的事情;

HTML：

        $profile_comments = '
        <form action="#" method="post">
            <table border="0" cellspacing="'.$theme['borderwidth'].'" cellpadding="'.$theme['tablespace'].'" class="sideboxes_tborder">
                <tr>
                    <td class="sideboxes_thead">Post Comments</td>
                </tr>
                <tr>
                    <td class="sideboxes_trow">
                        <input type="text" class="textbox_comment" name="message" id="pc_message" tabindex="1" autocomplete="off" />
                    </td>
                </tr>
                <tr>
                    <td class="sideboxes_trow" align="left">
                        <input type="hidden" name="uid" value="'.$memprofile['uid'].'" />
                        <input type="hidden" name="from_uid" value="'.$mybb->user['uid'].'" />
                        <input type="submit" class="button" id="comment_submit" name="submit" value="Post Comment" tabindex="2">
                    </td>
                </tr>
                <tr>
                    <td class="sideboxes_trow"><div id="show_profile_comments" style="overflow: auto; max-height: 313px;"></div></td>
                </tr>
            </table>
        </form>';

jQuery的：

jQuery.noConflict();

jQuery(document).ready(function($)
{
    $("#comment_submit").click(function()
    {

            var message = $( "#pc_message" ).val(),

            if (message == '')
            {
                alert( "Message is missing!!" );
                return;
            }

            $.ajax(
            {
                type : "post",
                dataType: "html",
                url : "pro_profile.php?action=do_comment",
                data : "message=" + message,
                success : function(response)
                {
                    $('#show_profile_comments').html(response);
                }
                document.getElementById('pc_message').value = '';
                document.getElementById('pc_message').focus();

                if (response.error)
                {
                    alert(response.error);
                }
            });
    });
});

PHP：

if ($_POST['action'] == "do_comment")
{
    $uid = intval($mybb->input['uid']);
    $insert_array = array(
        "uid" => $uid,
        "from_uid" => intval($mybb->input['from_uid']),
        "approved" => '1',
        "message" => $db->escape_string($mybb->input['message']),
        "dateline" => TIME_NOW
    );
    $db->insert_query("pp_comments", $insert_array);

    $query = $db->simple_select("pp_comments", "*", "uid='{$uid}'");
    $c = $db->fetch_array($query);

    echo $c['message'];
}

请帮忙！

Answer 1

如果这应该成功

document.getElementById（'pc_message'）。value ='';

的document.getElementById（ 'pc_message'）聚焦（）;

将您的JS代码更改为此

jQuery.noConflict();

jQuery(document).ready(function($)
{
    $("#comment_submit").on('click', function()
    {

            var message = $( "#pc_message" ).val(),

            if (message == '')
            {
                alert( "Message is missing!!" );
                return;
            }

            $.ajax(
            {
                type : "post",
                dataType: "html",
                url : "pro_profile.php?action=do_comment",
                data : "message=" + message,
                success : function(response)
                {
                    $('#show_profile_comments').html(response);
                    document.getElementById('pc_message').value = '';
                document.getElementById('pc_message').focus();
                },
            error : function(response)
                {
                    alert(response.responseText);
                }
            });

            return false;
    });
});

Answer 2

仅仅因为你在提交按钮上使用点击事件

替换

<input type="submit" class="button" id="comment_submit" name="submit" value="Post Comment" tabindex="2">

与

<input type="button" class="button" id="comment_submit" name="submit" value="Post Comment" tabindex="2">

Answer 3

将您的按钮从提交类型更改为按钮类型

<input type="button" class="button" id="comment_submit" name="submit" value="Post Comment" tabindex="2">

或阻止默认表单提交

$("#yourFormName").submit(function(e){
    e.preventDefault();
  });

Answer 4

使用.on

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

<强> e.preventDefault()

描述：如果调用此方法，则不会触发事件的默认操作。

没关系按钮或提交

<input type="submit" class="button" id="comment_submit" name="submit" value="Post Comment" tabindex="2">

Answer 5

刚刚更改按钮的type

<input type="button" class="button" id="comment_submit" name="submit" value="Post Comment" tabindex="2">

或只是将其设为按钮：

<button type="button" class="button" id="comment_submit" name="submit">Post Comment</button>

或<form>，如果它有id：

jQuery(function(){
    jQuery("#yourform").submit(function(e) {       
      e.preventDefault();
    });
});

或表格标签

<form type="post" onclick="return false"＆GT;

使用jQuery提交和显示数据 - 问题

HTML：

jQuery的：

PHP：

5 个答案: