Back to free scripts page

Good practice for long term projects,

Question taken from some site. User wish to make this code working .

$('[name="Lab Elective"]').on('change', function()
       $('#Lab Elective g').toggle(this.checked);


<input type="checkbox" name="Lab Elective" id="Lab Elective" value="some value">

<select id="Lab Elective g" name="Lab Elective g">
<option value="some value">some value</option>

Of course, this code can be simply fixed. But I want to say about good practices.

The user is used as the ID of the "Lab Elective g" element, including spaces. Now most browsers use HTML5, and html5 allow spaces in the ID.
But HTML4 specifications - do not allow spaces in the ID. So, doing this, you lose backward compatibility. And the worst thing is, there are many
browsers in the world, you can not imagine how many different browsers on different devices. And while you may have a problem
even in HTML5 browsers.

Another problem that makes space in IDs is jquery performace. Selecting an element by ID is faster than searching for an attribute value.
With a normal identifier, you can refer to it as $('#Lab_Elective_g'), but with spaces as $ ('input [id="Lab Elective g"]'), and it's slower.
If you do this in one place, nothing bad will happen. But if you do this many times, in cycles and on some slow devices like TV ...

The second problem is the .toggle () function in jQuery. Usually it works as it should. But it is not reliable, sometimes the simplest changes in design
make it not work. And even now you do this, and then the design changes can create a problem. It is a pity that it can be hidden
when you do not see it until users find it. As my experience, only 5% of users report a problem if they create a problem for them,
and may not report at all. It may just be a hidden function that you spend a lot of time on. In this code, this is a deferred action. The best thing
change to show() / hide(). Also this will make it easy to play as fadeIn()/fadeOut(), if necessary.

The third problem is checkbox refference. It is allocated as $ ('[name = "Lab Elective"]'), and again slow, also what happens if there is
Two forms with an element called "Laboratory choice"? Yes, both will be affected. You have to be as accurate as possible. And if now there is only one
forms, and you never plan to add another, and then again delay the action in your code. Once someone else can add a similar form. That's better
assigns this identifier of the element, presenting it to the form and referent element within the form. Like $('#form_name input [name = "Lab Elective"]'). But better
directly added to the element.

The fourth problem. Initial state. This code is run when an item has been changed. But what about the initial state. Of course, you can expect
This check box is selected or cleared. But what if the following code is changed? This can be done in the simplest way, only in php-code,
and make a quick fix. And this fix can only be done by the php programmer, not by the frontend programmer.

Fifthly, this is not a big problem, but there is a difference between the "change" and "click" handlers. "Click" is launched immediately after clicking on
checkbox, but "change" start the bit later. And sometimes there is a delay that can be seen. Click on the user's flag and do not see that it changes
The second. Of course, switching to the "click" event is good only for the checkboxes.

A few lines of code are simple, but they make code like a bomb. If this code is absolutely final, you can just fix it. But if there are many people there
work on the same project, the project grows, then you need to write it in another way.

function show_hide_selectbox_lab_elective_g()
    if( $('#Lab_Elective').is(':checked' )

$(document).ready(function() {

  $('#Lab_Elective').on('click', function() {

   show_hide_selectbox_lab_elective_g();  //set initial state

<input type="checkbox" name="Lab Elective" id="Lab_Elective" value="some value">

<select id="Lab_Elective_g" name="Lab Elective g">
<option value="some value">some value</option>

Why I do extra function ? First need do not duplicate  code that can be not duplicated . It need for 'click' handler and also to set initial
state . Later logic of the code may be changed , but you still will modify just single function . How it can change ?
Let say if you will wish to clear some text before show <select> or change some other element value , or show/hide more elements, so on .
This make code that can grow without completely rewrite . And programmer will see all logic quickly .

Why do I do an additional function? First of all, you do not need to build code that duplicated. This is necessary for the 'click' handler, as well as for setting the initial
state. The later logic of the code can be changed, but you will still only change one function. How can this change?
For example, if you want to clear the text before displaying <select> or change another item value or show / hide more elements and so on.
This makes code that can grow without full rewriting. And the programmer will quickly see all the logic.