Reusing the same function in javascript for elements using the same classes not working

Question

Javascript:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>    
$(document).ready(function(){
    $("#first").keyup(function(event){
        event.preventDefault();
        ajax_check("#first");
    });
    $("#last").keyup(function(event){
        event.preventDefault();
        ajax_check("#last");
    });
});
function ajax_check(current)
{
    var check=$(current).val();
    $.post("validate.php", {tocheck : check}, function(filled) {
        if(filled == '1')
        {   
            $(".check").html("");
            $(".ajax_check").removeClass("error");
            $(".ajax_check").addClass("success");
        }
        else 
        {
            $(".check").html("");
            $(".ajax_check").removeClass("error");
            $(".ajax_check").removeClass("success");
        }
    })
}

HTML

<div class="control-group ajax_check">
    <label class="control-label" for="first">First Name</label>
    <div class="controls">
        <input type="text" id="first" class="validate" placeholder="First" required>
        <span class="help-inline check" ></span>
    </div>
</div>
<div class="control-group ajax_check">
    <label class="control-label" for="last">Last Name</label>
    <div class="controls">
        <input type="text" id="last" class="validate" placeholder="Last" required>
        <span class="help-inline check" ></span>
    </div>
</div>

The issue I'm having is when I enter in info for one of the input, the other one gets highlighted too, which isn't suppose to happen. And I think my code is kind of sloppy, but I'm trying to reuse the ajax_check function instead of making a function for each input field.

Is there a way I could reuse the function for both of the inputs? I'm new to Javascript, so I'm kind of lost. Thank you!

https://i.sstatic.net/4Jqdv.png

Answer 1

it has to do with the scope you're requesting .check within in the ajax call. You're going back to document-level (instead of just within the current node). A simple change makes this work as intended:

var $this = $(current), // store reference to jquery object
    $scope = $this.closest('.ajax_check'), // set scope to .ajax_check
    check = $this.val();
$.post("validate.php", {tocheck : check}, function(filled) {
    if(filled == '1')
    {
        // use .find() to search _within_ $scope and not across
        // the entire document.
        $scope.find(".check").html("");
        $scope.removeClass("error").addClass("success");
    }
    else 
    {
        // same thing, search within $scope
        $scope.find(".check").html("");
        $scope.removeClass("error success");
    }
})

You can also refactor your bindings a bit to make this a little more brief as well:

$("#first,#last").keyup(function(event){
    event.preventDefault();
    ajax_check(this); // this is automatically going to be #first or #last
                      // just by the selector above
});

Answer 2

You need to save the this reference and search the closest form :

function ajax_check(e)
{
    e.preventDefault()
    var $this = $(this)
    var check=$this.val();
    $.post("validate.php", {tocheck : check}, function(filled) {
        $this.siblings(".check").html("");
        $this.closest(".ajax_check").removeClass("error").toggleClass("success", filled == '1');
    })
}

$("#first, #last").keyup(ajax_check);

1. siblings

2. closest

Answer 3

You can use comma to add items in selector, you can use this to get current element,

$("#first, #last").keyup(function(event){
    event.preventDefault();
    ajax_check('#'+this.id);
});

OR, pass object instead of id.

 $("#first, #last").keyup(function(event){
    event.preventDefault();
    ajax_check($(this));
});


function ajax_check(current)
{
    var check=current.val();