How to enable button when text is entered in the text fields with browser histroy?

Question

My button enables only when in enter the text in the field through typing and when i enter the the text with browser history mean that when i click on the field it shows the previous record and i enter it with mouse then button is not enabled.

This is my code:

    <script type="text/javascript">
    $(function() {
        $(":text").keyup( check_submit).each(function() {
            check_submit();
      });
   });

    function check_submit() {
        $('input[type="submit"]').attr('disabled','disabled');
    if ($(this).val().length == '') {
         $(":submit").attr("disabled", true);
      } else {
         $(":submit").removeAttr("disabled");
      }
   }    
</script>

Any help? Thanks

you can use blur event it will be fired when textbox loses focus — Ehsan Sajjad, Jul 21 '14 at 02:08
"enter it with mouse" mean that when we fill form several times then there are the value of previous record and when we click with mouse in the field these record show in the form of drop down mean that the history of browser and i select one of them then form in not enabled. — Moaz Ateeq, Jul 21 '14 at 04:17

score 0 · Answer 1 · answered Jul 21 '14 at 02:41

0

Do this

$(":text").on("change", function() {
    if ($(this).val().length == 0) { 
        $(":submit").attr('disabled','disabled');
        $(":submit").attr("disabled", "true");
    } else {
        $(":submit").removeAttr("disabled");
    }
});

answered Jul 21 '14 at 02:41

Veglos

458
4
8

score 0 · Accepted Answer · edited May 23 '17 at 11:44

0

This answer to a similar question suggests listening for an input event. Try using that along with change and keyup event. Also you should use .prop() instead of .attr() to set the disabled state of the button:

$(function () {
    $(":text").on('keyup input change', check_submit).each(check_submit);
});

function check_submit() {
    var $this = $(this);
    $(":submit").prop("disabled", function(){
        return !$this.val().length;
    });
 }

Demo fiddle

edited May 23 '17 at 11:44

Community

1
1

answered Jul 21 '14 at 02:41

omma2289

54,161
8
64
68

when i click out of the field then button is enabled.is there not any method that as soon as i enter value with mouse button should enabled? – Moaz Ateeq Jul 21 '14 at 04:21
@TaleebAhmad according to [this answer](http://stackoverflow.com/a/8548572/2049063) you can try with the `input` event – omma2289 Jul 21 '14 at 04:40
@TaleebAhmad also do you have multiple inputs? are you trying to disable the button until all of them have a value? or just until one of them is filled? because right now the code is not accomplishing either of those, it behaves strangely with multiple inputs when some inputs are filled and others are not – omma2289 Jul 21 '14 at 04:58
I have 2 fields when first field have value in it button should enable when i type something in the field button get enabled.It is fine. – Moaz Ateeq Jul 21 '14 at 17:55
but my question is that when we submit form many times then browser saved that value in the field so next time when i click in the field these values shows to me and i select one of them then button should be enabled? – Moaz Ateeq Jul 21 '14 at 17:57
@TaleebAhmad Yes that part is clear, did you get a chance to read the answer I linked to and try with the `input` event? I think that's the best that you can do in this scenario (apart from disabling autocomplete in your form). My comment was about you having more than one text input because then the button may become disabled when one has a value and the other doesn't. But if your other field is not a text input then there shouldn't be an issue. – omma2289 Jul 22 '14 at 04:20
Sorry i did not read you edited answer.Many Many thanks for the help. – Moaz Ateeq Jul 22 '14 at 07:14

How to enable button when text is entered in the text fields with browser histroy?

2 Answers2