JavaScript – How to make a button active and inactive depending on conditions.

So today I needed to make one feature in my new project. The project is extensive enough to explain what and how, and therefore I will talk about the very essence of this “feature”.

The goal was to allow the administrator to remove users from the database. So, set the search parameters and php script gives us a list of users. Opposite each user there is a checkbox (checkbox) switch so that you can select and delete.

But it's not that simple. The task was to ensure that the “delete” button was inactive, and became active only at the moment when at least one checkbox was selected. Naturally, JavaScript monsters will say, yes, there are two fingers on the asphalt. But I’m not a JS monster, and I resort to programming in this language only when I want something like that, for convenience.

So, like a decent person, I went online, and Yandex and Google and all sorts of portals there stuffed a lot of different code into my browser, from which my brain still cobbled together exactly what I needed. As it turned out, there really aren’t any normal (working) examples on the network, and therefore, so that others like me don’t blow their mind, I decided to post a working one JavaScript example code.

I think the HTML implementation is not difficult to understand, but I’ll add it anyway:

So what is the main problem that I encountered? It turns out that you can “turn off” the button in any way you like, i.e. by accessing the submit element in any available form:

Submit.disabled = true;

However, it’s impossible to enable (replace with false) in this way, and that’s why I dug up the following construction:

Document.form_del.elements["submit"].disabled = true;

And here, if we replace true with false, then the button is both turned on and off. And finally, I’ll decipher this line of code:

In the current document, in the form named “form_del”, in the element whose name is “submit” (and in our example this name is a button) there is a property “disabled”, so we turn it on “true” or turn it off “false”. That. turning on this property we will make our button inactive, and by turning off the property, our button will become active again.

) the question was raised about whether it would be good for the buttons of a form sent to the server to set the property disabled = "disabled" .

However, we still haven’t figured out why this is needed and how to do it. It would seem that it could be simpler and what can we talk about here at all, but no - in fact, everything turned out to be not so trivial. Let me immediately note that the following reasoning applies to both types of forms: both sent via regular SUBMIT and using AJAX.

It is also clear that unnecessary requests can be prevented by attaching some class="form_is_loading" to the form, and checking for the presence of this class during every submission. But why do these checks when you can do without them by simply making the button inactive?

Why is it not enough to simply make a pressed button inactive:

Briefly the scenario is this.

//// html file//////////////////////////////////////////////// //////////////////// formUploader.prepareForm(document.getElementById("the_form")); //// js file /////////////////////////////////////////// //////////////////////////// formUploader = ( prepareForm: function(form)( // Each meaningful button When clicked, the form must create a hidden field of the same name // so that information about which button was clicked is transmitted to the server var allFormFields = form.getElementsByTagName("input"); for (var i=0; i=7

That is, we set the parameter to allow sending if the field contains more than 7 characters. That is, the button is not activated until in the field where the specified this parameter there won't be 7 or more characters. Let's ask following parameters. For name there are 2 characters, for mail - 5 and number 7. The finished 6th line of the script looks like this:

If(name.length >=2 && email.length >=5 && phone.length >=7) (

For those who are interested in the question - How to indicate maximum quantity characters? . Answer: in the HTML code, in the input field, write the attribute

Maxlength="15"

which sets the limit to 15 characters. Just enter your number.

Lines 7 and 9 indicate the ID of our future button - “SEND” from the form, which will be unlocked if the conditions are met. IN in this case this is #submit.

Now let's insert simple form with three fields. Our form will submit name, email and phone. You can use your own form.

For everything to work, firstly - to required fields you need to add an event -

Onkeyup="checkParams()"

which starts our script.

Secondly, add a disabled attribute to the button, which will be canceled by the script if the required fields are filled out.

Thirdly, input fields must have an ID, which is also indicated in the script, as I said above.

That's the whole method. It is not complicated, although the article is not short. If you read everything carefully and understand it, you shouldn’t have any difficulties.

This method helped me when creating forms that use ajax and send an email without reloading the page, regardless of whether the fields are filled in. That is, if a person starts simply pressing the button, then empty letters will be sent, but the button is blocked and does not allow this to be done.

That's all, thanks for your attention. 🙂