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");
    });
});

基本上我想要的是使用RED边框设置字段样式，如果服务器返回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);
        }});
    });
});

谢谢大家回答！

到目前为止，奥米德·阿姆雷的答复似乎适合我的项目。但是我们可以为所有这个脚本添加一些spice：我想用Jquery-Ajax脚本将2个参数传送到服务器端的PHP文件：

文字输入的ID
文本输入的值。所有这一切都使用POST方法！

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

非常感谢大家！周六快乐：）

Answer 1

在这种情况下，

this不是textbox它是ajax jquery对象

将上下文更改为this。

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

docs:

contextObject 此对象将成为所有与Ajax相关的回调的上下文。默认情况下，上下文是一个对象，表示调用中使用的ajax设置（$ .ajaxSettings与传递给$ .ajax的设置合并）。

Answer 2

因为在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);
        }});
    });
});

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

2 个答案: