CODEWITHSUNDEEP
jquery
OlZ
OlZ

Reputation: 346

How to check if text inputs and a select are different from original value?

I want to enable my submit button if at least one input has changed and its value is different from the previous value.

I have to manage 2 different "kind of input" : input type text and select

$submit = $("button[type=submit]"),
$inputs = $('input[type=text]'), $('select');
function checkSame() {
    $inputs.each(function() {
        if ($(this).val() == $(this).defaultValue)
            return true;
    })
 }

 $inputs.on('keyup', function() {
      $submit.prop("disabled", !checkSame());
 }).keyup();

 $inputs.change(function(){
      $submit.prop("disabled", !checkSame());
 });

Upvotes: 0

Views: 230

Answers (1)

Daniël Tulp
Daniël Tulp

Reputation: 1835

You made several mistakes but no biggy, here is what you want: http://jsbin.com/xezaxo/2/

var submit = $("button[type=submit]"),
inputs = $('input[type=text], select');
var inputOldValues = {};

//save default/old values on page load
$(function () {
  inputs.each(function () {
    inputOldValues[$(this).attr('id')] = $(this).val();
  });
  inputs.on('keyup', function () {
    submit.prop("disabled", checkSame());
    //console.log("keyup: " + checkSame());
  });

  inputs.on('change', function () {
    submit.prop("disabled", checkSame());
    //console.log("change: " + checkSame());
  });
});

function checkSame() {
  //you should itterate over all input fields and check if they are the same, then return if this is the case
  var returnVal = true;
  inputs.each(function () {
    if ($(this).val() != inputOldValues[$(this).attr('id')]) {
      returnVal = false;
    }
  });
  //now return the value, not in the .each() statement
  return returnVal;
}

Upvotes: 1

Related Questions