How to check whether input box has same value

Question

I am new to javascript and jquery .
I have a form which has only one text box and type is email and I have a submit button . After clicking the submit button value in text box will not disappear and I don't want to(Not clearing form). Now my problem is Button should disable after clicking on it and it should active only value in text box changes.

My code is

  <input autocomplete="off" type="email" name="email" id="g-email" class="form-control required order" placeholder="Email address">

  <button type="submit" name="submit" class="btn btn-md btn-default" id="messageButton" value="Place Order" onclick="$(this).attr('disabled', true);">Send message</button></div>

And jquery is

$(document).ready(function(){
  $("input[name='email']").change(function(){
    if ($(this).val() != $(this).val())
    {
       $("input[name='submit']").removeAttr('disabled');
    }
  });
});

please help to solve this issue.

Answer 1

Because following statement $(this).val() != $(this).val() will always be false.

You don't need to do this because change function already does what you need.

$(document).ready(function(){
    $('#g-email').on('input', function(){
        $("button[name='submit']").removeAttr('disabled');
    });
});

Working example

 $(document).ready(function(){ $('#g-email').on('input', function(){ $("button[name='submit']").removeAttr('disabled'); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input autocomplete="off" type="email" name="email" id="g-email" class="form-control required order" placeholder="Email address"> <button type="submit" name="submit" class="btn btn-md btn-default" id="messageButton" value="Place Order" onclick="$(this).attr('disabled', true);" disabled='disabled'>Send message</button></div> 

Answer 2

Use jQuery .prop() method to change submit button disabled value:

 var submit = $("#messageButton"); var input = $("#g-email"); input.on("keyup", function(ev) { var isDisabled = submit.data("submitted") && submit.data("submitted") === input.val(); submit.prop("disabled", isDisabled); }); submit.on("click", function(ev) { submit.prop("disabled", true); submit.data("submitted", input.val()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input autocomplete="off" type="email" name="email" id="g-email" class="form-control required order" placeholder="Email address"> <button type="submit" name="submit" class="btn btn-md btn-default" id="messageButton" value="Place Order" onclick="$(this).attr('disabled', true);">Send message</button> 

Answer 3

You can set the messageButton disabled initially and listen for the keyup event in the g-email input. Then, if the input g-email has text enable the button else disabled it:

 $(document).ready(function(){ $('#g-email').on('keyup', function(){ if($(this).val()){ $("#messageButton").removeAttr('disabled'); } else { $("#messageButton").attr('disabled', true); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input autocomplete="off" type="email" name="email" id="g-email" class="form-control required order" placeholder="Email address"> <button type="submit" name="submit" class="btn btn-md btn-default" id="messageButton" value="Place Order" onclick="$(this).attr('disabled', true);" disabled='disabled'>Send message</button></div>