Comparing input fields using JQuery

Question

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.

Jeff B · Accepted Answer · 2011-03-25 21:22:59Z

4

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/

edited Mar 25, 2011 at 21:22

answered Mar 25, 2011 at 21:15

Jeff B

30.1k7 gold badges64 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

bland_dan Over a year ago

Awesome! Thanks for the examples. The code is actually slightly more complicated than I put in the question, but have managed to adapt your suggestion to fit. Saved me hours of staring at the screen, thanks again!

tvanfosson · Accepted Answer · 2011-03-25 21:14:29Z

2

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;

answered Mar 25, 2011 at 21:14

tvanfosson

534k102 gold badges703 silver badges801 bronze badges

Comments

mVChr · Accepted Answer · 2011-03-25 21:14:41Z

0

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

answered Mar 25, 2011 at 21:14

mVChr

50.3k11 gold badges111 silver badges105 bronze badges

Comments

FatherStorm · Accepted Answer · 2011-03-25 21:15:27Z

0

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{
        ...
      }
    });

answered Mar 25, 2011 at 21:15

FatherStorm

7,1711 gold badge24 silver badges27 bronze badges

Collectives™ on Stack Overflow

Comparing input fields using JQuery

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related