Javascript disabled button does not gets enabled when the form is completed

Question

I have a form and I wanted to disable the submit button unless the required fields are filled.

So I added this:

$('#submitBtn').attr('disabled', true); if ($('#inputMobile').val() != '' && $('#inputEmail').val() != '' && $('#inputPassword').val() != '' && $('#inputPasswordConfirmation').val() != '') { $('#submitBtn').attr('disabled', false); }

Now it works fine and disable the submit button when the page loads but when I fill in the form fields, it does not enable the button however I tried setting the disabled attr to false.

So what's going wrong here? How can I solve this issue?

Your test runs when the page loads, before the user has typed anything. You need to add an event handler. — djna
– djna, Commented Jul 19, 2022 at 6:03

Konferansie · Accepted Answer · 2022-07-19 06:01:34Z

May be you need to addListener on form? Also you could check solution in similar question

https://stackoverflow.com/a/67961881/19282017

djna · Accepted Answer · 2022-07-19 06:14:07Z

Your code runs once, when the page is loaded, you need action after the user enters data. Use a change event.

You need a way to specify the event on all 4 fields, so give your four input fields a common class, for example registerInput.

<input type="text" class="registerInput">

Do that for all 4 of your fields.

Then specify a change event, selecting that class, so that your test is run every time the user changes one of the fields.

$(".registerInput").change(function() { if ($('#inputMobile').val() != '' && $('#inputEmail').val() != '' && $('#inputPassword').val() != '' && $('#inputPasswordConfirmation').val() != '') { $('#submitBtn').attr('disabled', false); } });

Sepehr Amirkiaee · Accepted Answer · 2022-07-19 07:10:13Z

With this dummy code, I just wanted to show that your code for changing the attribute is completely true. It seems your code doesn't meet the condition in the if statement.

$('#but2').attr('disabled',true) $('#but1').on('click',() => { if(true){ $('#but2').attr('disabled',!$('#but2').attr('disabled')) } })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="but1">Toggle</button> <button id="but2">Change me</button>

Collectives™ on Stack Overflow

Javascript disabled button does not gets enabled when the form is completed

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related