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
– alexis, Commented Feb 9, 2017 at 13:38
You need to save default value in one variable and update variable in onkeyup function. — Bhavin Solanki
– Bhavin Solanki, Commented Feb 9, 2017 at 13:38

Shafiqul Islam · Accepted Answer · 2017-02-09 13:40:27Z

2

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>

edited Feb 9, 2017 at 13:40

answered Feb 9, 2017 at 13:35

Shafiqul Islam

5,6852 gold badges36 silver badges45 bronze badges

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

2 Comments

Shafiqul Islam Over a year ago

i found a error in your code , you can also check this if (el.value != '? ? ?'){ } as like this

alexis Over a year ago

inputValue should be the value of the input ^^

marc_s · Accepted Answer · 2017-02-26 20:08:32Z

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>

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related