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

我试图建立一个很好的联系表单，从用户可以发送电子邮件。我有3个输入字段（1.姓名，2.电子邮件地址，3.电话号码）。使用Jquery和Ajax更新文本字段边框

$(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和：

<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脚本制作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的脚本，将服务器端的PHP文件：

文本输入
价值的ID文字输入。所有与POST方法！

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

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

来源

2012-02-02 user1185551

请请不要使用jQuery的风格，除非你绝对必须的。如果您通过添加类属性来生成这些标签，则速度更快，更健壮。 – 2012-02-02 16:32:45

问题解决了吗？ – gdoron 2012-02-02 17:51:23

由于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); 
     }}); 
    }); 
});

来源

2012-02-02 16:33:32 Omid

jquery vars的标准是'$''input' =>'$ input'的前缀。 – gdoron 2012-02-02 16:38:27

@gdoron：没错，编辑 – Omid 2012-02-02 16:40:29

这个脚本似乎工作到目前为止，但感谢所有回复的人！ – user1185551 2012-02-04 16:13:10

在这种情况下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的设置合并）。

来源

2012-02-02 16:32:39 gdoron

'input [type =“text”]'selector将返回所有'textboxes'并且会产生意想不到的结果。在这个例子中，我们将仅仅验证特殊的文本框。 – Omid 2012-02-02 16:35:01

@OmidAmraei。右键删除了该选项。 – gdoron 2012-02-02 16:36:17

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

回答

相关问题