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スクリプトで構成されています。サーバーは、AJAXを使用して（falseを返す場合は基本的に私が欲しいもの

$(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ボーダを持つフィールドをスタイルすることであり、 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の返信はこれまで私のプロジェクトに合っているようです。しかし、我々はすべて、このスクリプトにいくつかのスパイスを追加することができます。私は、サーバー側のPHPファイルへのjQuery、Ajaxのスクリプトを使用して2つのパラメータを送信したいと思います：

1. テキスト入力
2. の値のIDテキスト入力。 これは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); 
     }}); 
    }); 
}); 

Answer 2

thisこのケースでは、それがthisにコンテキストAjaxのjQueryオブジェクト

変更だtextboxではありません。

$('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設定（$ .ajaxに渡された設定とマージされた$ .ajaxSettings）を表すオブジェクトです。