php - 使用 Jquery 和 Ajax 更新文本字段边框

Question

我正在尝试构建一个很好的联系表单，用户可以从中发送电子邮件。我有 3 个输入字段(1. 姓名，2. 电子邮件地址，3. 电话号码)。

<p>
    <label for="name"><?php echo $label_name; ?></label>
    <input type="text" name="name" id="name" size="30" />
</p>
<p>
    <label for="email"><?php echo $label_email; ?></label>
    <input type="text" name="email" id="email" size="30" />
</p>
<p>
    <label for="tel"><?php echo $label_tel; ?></label>
    <input type="text" name="tel" id="tel" size="30" />
</p>

字段的样式是使用以下 JQUERY 脚本制作的:

$(document).ready(function() {
    $('input[type="text"]').addClass("idle");
    $('input[type="text"]').focus(function() {
        $(this).removeClass("idle").addClass("focus");
            this.select();
        });
    $('input[type="text"]').blur(function() {
        $(this).removeClass("focus").addClass("idle");
    });
});

基本上，如果服务器返回 false(使用 AJAX 和 PHP)，我想要的是用红色边框设置字段的样式。为此，我在网上搜索并尝试实现一些脚本，但都没有奏效。这是我尝试过的:

$(document).ready(function() {
    $('input[type="text"]').blur(function() {
        $.ajax({url:"php/verify_field.php", success:function(result){
            $(this).removeClass("idle").addClass(result);
        }});
    });
});

谢谢大家的回答!

到目前为止，Omid Amraei 的回复似乎适合我的元素。但是我们可以为所有这些脚本添加一些香料吗:我想使用 Jquery-Ajax 脚本将 2 个参数传输到服务器端 PHP 文件:

1. 文本输入的ID
2. 文本输入的值。 所有这些都使用 POST 方法!

这样我就可以使用 $_POST 方法解析 PHP 文件中的信息并首先检查 ID，然后对输入的值运行验证条件。

非常感谢大家! 星期六快乐:)

Answer 1

因为在 Ajax 回调中使用 this 并不指向您的输入，所以试试这个:

$(document).ready(function() {
    $('input[type="text"]').blur(function() {
        var $input = $(this);
        $.ajax({url:"php/verify_field.php", success:function(result){
            $input.removeClass("idle").addClass(result);
        }});
    });
});