CODEWITHSUNDEEP
jquery
bland_dan
bland_dan

Reputation: 446

Comparing input fields using JQuery

I currently have an input form. There are two entries for each input class as follows:

<form>
    <input type="text" name="firstname_a" class="firstname" disabled="disabled" />
    <input type="text" name="firstname_b" class="firstname" />
    <input type="text" name="surname_a" class="surname" disabled="disabled" />
    <input type="text" name="surname_b" class="surname" />
    <input type="submit" value="submit" />
</form>

On submission I want JQuery to check whether or not value a matches value b (value a has been entered by the end user, value b has been entered by a outworker working for a vetting company). The form could have upto 470 input fields, these are stored in a database dependant upon the type of vetting being carried out. I don't, therefore, want to have to type out 470 times!:

if($('input["name=firstname_a"]').val() == $('input["name=firstname_a"]').val())
{
  // do something
}
else
{
  // do something else
}

Rather I would like to find a dynamic way to do this, possibly using the serializeArray() function, but I'm struggling! All or any help would be greatly appreciated.

Upvotes: 0

Views: 20122

Answers (4)

Jeff B
Jeff B

Reputation: 30099

You can cycle through .each input ending in _a and do the comparison with its _b counterpart:

$('#target').submit( function() {

    // Iterate over each input with name ending in _a
    $('input[name$="_a"]').each( function() {

        // Get the base name by removing _a
        var name = $(this).attr('name').replace(/_a$/, '');

        // Compare _a to _b
        if( $('input[name="'+name+'_a"]').val() != $('input[name="'+name+'_b"]').val()) {
             alert(name+" field does not match!");   
        }
    });

    return false;
});

Example:

http://jsfiddle.net/jtbowden/yqMGG/

Here is a version where all mismatches are saved and alerted at the end:

http://jsfiddle.net/jtbowden/amsJj/

Or a version that highlights the errors:

http://jsfiddle.net/jtbowden/V8xJX/

Upvotes: 4

FatherStorm
FatherStorm

Reputation: 7183

are you trying to evaluate all the elements at the same time? if so, this belongs on the server side after the form submit. if you are rying to do this after each field blur then 

<input type="hidden" name="firstname_a" class="firstname"  />
<input type="text" name="firstname_b" class="firstname eval" rel="#firstname_b"/>
$('.eval').live('blur',function(){
   if($(this).val()==$($(this).attr('rel')).val()){
    ...
  }else{
    ...
  }
});

and if you REALLY want to do it at submit time then

$('.eval').each(function(){
       if($(this).val()==$($(this).attr('rel')).val()){
        ...
      }else{
        ...
      }
    });

Upvotes: 0

mVChr
mVChr

Reputation: 50185

You can use the ends with selector $= and iterate over the lists assuming they're both in the same order and there's always a _b value for an _a value:

var aSet = $('input[name$="_a"]'),
    bSet = $('input[name$="_b"]'),
    al = aSet.length;

for (var i = 0; i < al; i++) {
  if (aSet.eq(i).val() == bSet.eq(i).val()) {
    // do something
  } else {
    // do something else
  }
}

Upvotes: 0

tvanfosson
tvanfosson

Reputation: 532465

I'd use an each over the collection matching names that end in _a, then find the corresponding _b and check their values. Set a variable in the outer scope to track whether any invalid inputs have been found.

var valid = true;
$('input[name$="_a"]').each( function() {
    var $a = $(this);
    var bName = $a.attr('name').replace(/_a/,'_b');
    var $b = $('input#' + bName);
    if ($a.val() != $b.val()) {
        // add a validation message for b?
        valid = false;
        // return false; // only if you want to stop after the first one
    }
});

return valid;

Upvotes: 2

Related Questions