Geek asks and answers

Comparing input fields using jQuery

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

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

When submitting, I want JQuery to check if a match value of b was assigned (the value of a was entered by the end user, the value of b was entered by a homeworker working in a verification company). A form can have up to 470 input fields; they are stored in a database depending on the type of checks performed. Therefore, I do not want to enter 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, perhaps using the serializeArray () function, but I'm afraid! Any or all help would be greatly appreciated.

0
source share
4 answers

.each , _a, _b:

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

:

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

, :

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

, :

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

+4

, _a, _b . , , - .

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;
+2

$= , , _b _a:

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

Are you trying to evaluate all the elements at once? if so, this applies to the server after the form is submitted. if you strive to do this after each blur of the field, 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 this at the time of sending, then

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

More articles:


All Articles