Question

I’m trying to build a nice contact form, from where a user can send an e-mail. I have 3 input fields (1. name, 2. e-mail address, 3. telephone number).

<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>

The styling of the fields is made with the following JQUERY script:

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

Basically what I want is to style the fields with RED border, if the server would return false (using AJAX and PHP). For this, I searched the net and tried to implement a few scripts, but none worked. Here’s what I tried:

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

Thank you all for answering!

The reply of Omid Amraei seems to suit my project so far. But could we add some spice to all this script: I would like to transmit 2 parameters with the Jquery-Ajax script to the server-side PHP file:

1. the ID of the text input
2. the value of the text input.
   All this with POST method!

This way I could parse the information in the PHP file using $_POST method and check first the ID, then run the verification criteria on the value of the input.

Many thanks for all!
Happy Saturday 🙂

Answer 1

Because using this in Ajax callback does not point to your input, so try 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);
        }});
    });
});