Check if input field value has changed on button click

Question

I need to check if a value has changed on an input field before submitting a form. This is the code I have so far:

JS

$(document).ready(function(){

    $('#submitButton').click(function() {

        if( $('input[name="inputToBeChecked"]').val() != 'Original input field value' {
            alert("Input field has changed!");
        } else {
            alert("Input field has not changed!");
        }

    });
});

HTML

<form>

  <input type="text" name="inputToBeChecked" id="inputToBeChecked" value="Original input field value">
  <a id="submitButton" type="button" class="btn" href="javascript:void(0);">Submit form</a>

</form>

And the problem you're having with it is...? Other than the missing ) if your if/else — j08691
– j08691, Commented Mar 26, 2018 at 16:00
You code works fine if you include the missing ) on your if statement — IrkenInvader
– IrkenInvader, Commented Mar 26, 2018 at 16:02
the logic is fine, where to keep the original value is another matter.. I would use a data-* attribute to avoid having variables for each input you're interested to do this with.. but if you fix your typo the basics are ok :) — mishu
– mishu, Commented Mar 26, 2018 at 16:06
IMO this shouldn't be downvoted or closed.. even if it's pretty simple, it's someone trying to learn and we shouldn't "punish" that.. and it started some interesting questions on the side in the comments and answer.. so +1 from me.. — mishu
– mishu, Commented Mar 26, 2018 at 16:12

nicael · Accepted Answer · 2018-03-26 16:06:50Z

3

Just set a flag once the input has been changed

var flag = 0;
$('input[name="inputToBeChecked"]').change(function(){
   flag = 1;
});
$('#submitButton').click(function() {
   if(flag == 1){
     //yeah!
   }
});

There can be also another case, if it gets changed and then returns to initial state. Then you could just save the initial value instead.

var initialVal;
$(document).ready(function(){
   initialVal = $('input[name="inputToBeChecked"]').val();
});
$('#submitButton').click(function() {
   if($('input[name="inputToBeChecked"]').val() != initialVal){
      // initial value changed
   } else {
      // initial value either unchanged or changed and later reversed to initial state 
   }
});

edited Mar 26, 2018 at 16:06

answered Mar 26, 2018 at 16:00

nicael

19.1k13 gold badges65 silver badges93 bronze badges

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

4 Comments

j08691 Over a year ago

But the code works fine if they fix the missing ) typo

nicael Over a year ago

@j08691 Nope, OP shown just an example, what if there's another value in the textfield initially, what do you speak of?

mishu Over a year ago

you could argue that it works even better if it's not considered changed if it's edited back to the original value.. :)

j08691 Over a year ago

@nicael yup. I'm going strictly by what the OP posted -- not every potential possibility

Collectives™ on Stack Overflow

Check if input field value has changed on button click

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related