How to check that value of input is equal to specific string when keydown using javascript?

Question

I've got a form with differents fields which have different name value.

I'm searching a way to when u write something in a field, it compares what u wrote (current value) with the default value and then, remove a disabled button.

<form id="myForm">
    <input type="text" class="form-control name-saisie" onkeyup="onKeyUp(this);" name="something" value="something" maxlength="40">
    <input type="text" class="form-control name-saisie" onkeyup="onKeyUp(this);" name="somethingelse" value="somethingelse" maxlength="40">
    <input type="text" class="form-control name-saisie" onkeyup="onKeyUp(this);" name="somethingElseElse" value="somethingElseElse" maxlength="40">
</form>

I tried something like :

function onKeyUp(el) {
    var inputValue = 'I dunno what i'm supposed to put here!!!' // cant got this
    if(el.value!=inputValue) { // el.value is current value, inputValue is the default value
        $('[name="actionSave"]').removeClass('disabled');
    } else {
         $('[name="actionSave"]').addClass('disabled');
    }
}

The button to disable/enable. It works, I'm searching how to get the value of any input — alexis, Feb 09 '17 at 13:38
You need to save default value in one variable and update variable in onkeyup function. — Bhavin Solanki, Feb 09 '17 at 13:38
http://stackoverflow.com/a/1910161/3270866 This may be helpful — Bhavin Solanki, Feb 09 '17 at 13:40

Shafiqul Islam · Accepted Answer · 2017-02-09T13:40:27.307

please check this code

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 <form id="myForm">
<input type="text" class="form-control name-saisie" onkeyup="onKeyUp(this)" name="something" value="something"
       maxlength="40">
<input type="text" class="form-control name-saisie" onkeyup="onKeyUp(this)" name="somethingelse"
       value="somethingelse" maxlength="40">
<input type="text" class="form-control name-saisie" onkeyup="onKeyUp(this)" name="somethingElseElse"
       value="somethingElseElse" maxlength="40">
</form>

<script>
 function onKeyUp(el) {
    var update_value = el.value;
  var  inputValue = el.getAttribute('value');
    alert(update_value+"=="+inputValue)
    if (update_value != inputValue) { // el.value is current value, inputValue is the default value
        $('[name="actionSave"]').removeClass('disabled');
    } else {
        $('[name="actionSave"]').addClass('disabled');
    }
}
</script>

i found a error in your code , you can also check this if (el.value != '? ? ?'){ } as like this — Shafiqul Islam, Feb 09 '17 at 13:37

score 1 · Answer 2 · edited Feb 26 '17 at 20:08

You want to get value attribute of target input. In javascript Element.getAttribute() return value of attribute.

function onKeyUp(el) {
  if (el.value!= el.getAttribute("value"))
    $('[name="actionSave"]').removeClass('disabled');
  else 
    $('[name="actionSave"]').addClass('disabled');    
}

function onKeyUp(el) {
  if (el.value!= el.getAttribute("value"))
    $('[name="actionSave"]').removeClass('disabled');
  else 
    $('[name="actionSave"]').addClass('disabled');    
}

.disabled { color: red }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
  <input type="text" class="form-control name-saisie" onkeyup="onKeyUp(this);" name="something" value="something" maxlength="40">
  <input type="text" class="form-control name-saisie" onkeyup="onKeyUp(this);" name="somethingelse" value="somethingelse" maxlength="40">
  <input type="text" class="form-control name-saisie" onkeyup="onKeyUp(this);" name="somethingElseElse" value="somethingElseElse" maxlength="40">
  <button name="actionSave" class="disabled">Save</button>
</form>

Also when you use jQuery, you can use jQuery event handler instead of html event handler.

$("#myForm > input").keyup(function(){
  if (this.value != $(this).attr("value"))
    $('[name="actionSave"]').removeClass('disabled');
  else
    $('[name="actionSave"]').addClass('disabled');   
});

$("#myForm > input").keyup(function(){
  if(this.value != $(this).attr("value"))
    $('[name="actionSave"]').removeClass('disabled');
  else
    $('[name="actionSave"]').addClass('disabled');   
});

.disabled { color: red }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
    <input type="text" class="form-control name-saisie" name="something" value="something" maxlength="40">
    <input type="text" class="form-control name-saisie" name="somethingelse" value="somethingelse" maxlength="40">
    <input type="text" class="form-control name-saisie" name="somethingElseElse" value="somethingElseElse" maxlength="40">
    <button name="actionSave" class="disabled">Save</button>
</form>

How to check that value of input is equal to specific string when keydown using javascript?

2 Answers2