ajax调用后文本框不清除

时间:2015-04-13 15:33:29

标签: javascript php jquery ajax json

我的网站上有这个聊天室,用户在文本框中输入他们的消息,当他们按回车键(或发送按钮)时,jQuery从文本框中获取数据,禁用文本框,将数据发送到文件send.php然后处理并放入数据库,然后它应该在文本框成功运行PHP脚本后清除并取消它。发生的事情是数据正在提交并通过脚本运行(成功将数据发送到数据库)但jQuery没有清除和取消禁用文本框。 有人可以向我解释有什么问题吗?

的jQuery

$('#formSend').on('submit', function (e) {

    e.preventDefault();

    var textArea = document.getElementById('styled');

    if( textArea.value != "" ) {

        var formData = $('form').serialize();
        $('.expand').prop("disabled", true)

        $.ajax({
            type: 'post',
            url: 'send.php',
            data: formData,
            dataType: "json",
            success: function (formData) { //put data in parentheses when coming back
                alert("Success");
                $(".expand").val('');
                $('.expand').prop("disabled", false);

                if( formData["banned"] == 1 ) {
                    var rel = confirm("You have been banned.");
                    if (rel) {
                        location.reload();
                    }
                    else {
                        location.reload();
                    }
                }
            }
        });
    }
    else {
        alert("Your message must be longer than 1 (one) character.");
        $('#styled').focus();
    }
});

send.php

<?php

include("../config.php");
session_start();


$msg           = strip_tags( $_POST['msg'], '<b></b>' );

if( $msg == "" ) {
 exit("There is no message.");
}
$username      = $_SESSION['USER'];
$date          = new DateTime();
$formattedDate = $date->format('Y-m-d H:i:s');

$stmt = $db->prepare("SELECT id, username FROM users WHERE username = :username");

$stmt->execute(array(":username" => $username));

$row = $stmt->fetch();

$userID = $row['id'];

$checkBanned = $db->prepare('SELECT banned FROM users WHERE username = :username');
$checkBanned->execute(array(
            ':username' => $username
        ));
$banned = $checkBanned->fetch();

if( $banned['banned'] == "yes" ) {
    $return = array('banned' => 1);
    echo json_encode($return);
    exit;
}

try {

    $stmt = $db->prepare('INSERT INTO `chat-messages` (userID,msg,date) VALUES (:userID, :msg, :date)');
    $stmt->execute(array(
        ':userID' => $userID,
        ':msg' => $msg,
        ':date' => $formattedDate
    ));
}
catch(PDOException $e) {
    echo $e->getMessage();
}
?>

如果需要,这也是表格。

<form action="send.php" method="post" name="formSend" id="formSend" />
     <textarea id="styled" class="expand" name="msg" placeholder="Your Message Here" onfocus:"setbg(\'#e5fff3\');"required></textarea>
     <input type="hidden" name="banned" value="no" />
     <input type="submit" name="submit" value="Send" class="send" />

  </form>

4 个答案:

答案 0 :(得分:2)

我认为问题是如果用户未被禁止并且邮件已成功存储,则您没有发送任何回复。

如果没有提醒“成功”那么就是问题。

试试这个,

try { $stmt = $db->prepare('INSERT INTO `chat-messages` (userID,msg,date) VALUES (:userID, :msg, :date)'); $stmt->execute(array( ':userID' => $userID, ':msg' => $msg, ':date' => $formattedDate ));
$output = "success";
 } catch(PDOException $e) { $output =  $e->getMessage(); } 
finally{
echo  json_encode($output);
}

答案 1 :(得分:0)

我发现你之后正在刷新页面,这可以使表单自动完成前一个值,试试这个:

  <form autocomplete="off" action="send.php" method="post" name="formSend" id="formSend" />
     <textarea id="styled" class="expand" name="msg" placeholder="Your Message Here" onfocus:"setbg(\'#e5fff3\');"required></textarea>
     <input type="hidden" name="banned" value="no" />
     <input type="submit" name="submit" value="Send" class="send" />
  </form>

答案 2 :(得分:0)

如果您不想重新加载页面(实际应该发生这种情况,如果您不通过event.preventDefault()阻止在ajax回调中触发的提交事件),您必须通过执行类似$的操作来重置表单( &#39;#formSend&#39;。)复位();

此外,没有禁用=&#39; false&#39;,您需要删除以下属性:$(&#39; .expand&#39;)。removeAttr(&#39;禁用&#39;) ;。

顺便说一句,保存你需要多次的选择器是个好习惯;)

答案 3 :(得分:-1)

你有没有试过像:

$('.expand').removeAttr("disabled");