JavaScript Form Controls: A Comprehensive Guide
JavaScript Form Controls
Form, Button, and Text Inputs
We’ve seen how to create forms with buttons. Now, let’s add text inputs to allow user input. Defining a NAME for each form control is crucial. Consider a form with one FORM element, one BUTTON, and two TEXT inputs. When the button is clicked, it triggers the ‘show’ event. The ‘show’ function accesses the content of the two TEXT controls like this:
var nom = document.form1.nombre.value
var ed = document.form1.edad.value;
To clarify, we store the content in two variables. Remember that our webpage is accessed through the document object. We access the form using its given NAME (in this case, ‘form1’). Similarly, we access each control within the form by its NAME (e.g., ‘nombre’ and ‘edad’). Finally, we use the value property to access the input values.
Select Dropdown
The SELECT element allows users to choose from a list of options, each with an associated value. In JavaScript, we can determine the selected item and its value when the OnChange event occurs.
To get the selected index:
document.form1.select1.selectedIndex
This accesses the selectedIndex property of the SELECT object named ‘select1’.
To get the selected text:
document.form1.select1.options[document.form1.select1.selectedIndex].text
This accesses the options property (an array of options) and retrieves the text of the selected option.
To get the associated value:
document.form1.select1.options[document.form1.select1.selectedIndex].value
This retrieves the value attribute of the selected option.
Here’s an example:
<input type="text" name="text1"> <br>
Selected text: <input name="text2"> <br>
Associated value: <input name="text3"> <br>
</form>
It’s crucial to define the function to call when a change occurs in the SELECT object using onChange="cambiarColor()". Each option in the SELECT object has a value and text, for example: <option value="red">Red</option>. The cambiarColor() function would then handle the logic based on the selected value.
Checkbox Control
The CHECKBOX control is a simple square that can be checked or unchecked. We can access its state from JavaScript.
Radio Button Control
RADIO buttons are useful when you want users to select only one option from a group. All RADIO buttons within a group should have the same name. You can access each radio button using its index:
if (document.form1.estudios[0].checked) alert('no education');
Like checkboxes, the checked property returns true or false.
Textarea Control
The TEXTAREA control is similar to the TEXT input but allows multiple lines of text. It has rows and cols attributes to control its size. To find the length of the entered text:
if (document.form1.curriculum.value.length > 2000) { ... }
This accesses the length property of the TEXTAREA’s value.
Object-Oriented Programming
An object is a structure containing variables (properties) and functions (methods). This concept forms the basis of object-oriented programming (OOP), which introduces concepts like inheritance and polymorphism.
Basics
- Objects are entities with identity, attributes (characteristics), and responsibilities (methods).
- Attributes are the distinctive qualities of an object (e.g., size, color).
- Methods are functions that define the behavior of an object (e.g., open, close).
- Classes are blueprints for creating objects with similar properties and methods.
Examples:
- House: attributes – size, price; methods – provide shelter, ensure security.
- Window: attributes – size, color; methods – open, close.
Classes in OOP
Classes encapsulate data and methods. They define the attributes and behaviors of objects. All objects of a class share the same methods and respond to messages in a consistent way.
Key concepts:
- Encapsulation: Bundling data and methods into a single unit (the class).
- Inheritance: Creating new classes based on existing ones, inheriting their properties and methods.
- Polymorphism: The ability of objects of different classes to respond to the same message in different ways.
JavaScript supports OOP concepts, allowing you to create objects and classes to structure your code and make it more organized and reusable.