Browser

Table of Content

Forms and Input Handling

Handling user input through forms is a critical aspect of web development. JavaScript provides methods to interact with form elements, validate user input, and respond to form submissions dynamically.

This Privacy Policy describes how Alevio ("we,"

"our," or "us"), founded and led by Felix Danyluk (CEO and Founder), collects, uses, and discloses your information when you use our application, website, and services (collectively, the "Service").

Wichtig: Alevio ist als privacy-first Anwendung konzipiert. Alle deine persönlichen Daten werden lokal auf deinem Gerät gespeichert und nicht an unsere Server übertragen, es sei denn, du aktivierst explizit Cloud-Funktionen.

1. Information We Collect

Alevio operates primarily as a local application.

The information stored includes:

• Personal information: name and preferences (stored locally only).

• Usage data: daily responses and insights (stored locally only).

• Device information: app preferences and settings (stored locally only).

• Al Chat data: when using Al features, messages are sent to OpenAl for processing.

2. How We Use Your Information

We use the information we collect to:

• Provide, maintain, and improve our Service.

• Personalize your experience.

• Communicate with you about our Service.

• Monitor and analyze trends, usage, and activities.

3. Sharing Your Information

We may share your information with:

• Service providers who perform services on our behalf.

• Business partners with whom we jointly offer products or services.

• Law enforcement or other third parties when required by law.

4. Data Security

We implement appropriate technical and organizational measures to protect the security of your personal information. However, please note that no method of transmission over the note that no method of transmission over the Internet or method of electronic storage is 100% secure.

5. Your Choices

You can access, update, or delete your account information at any time by logging into your account settings. You may also contact us directly to request access to, correction of, or deletion of any personal information that you have provided to us.

6. Children's Privacy

Our Service is not intended for children under the age of 13. We do not knowingly collect personal information from children under 13. If you are a parent or guardian and you are aware that your child has provided us with personal information, please contact us.

7. Changes to This Privacy Policy

We may update our Privacy Policy from time to time. We will notify you of any changes by posting the new Privacy Policy on this page.

8. Company Information

Alevio is founded and led by Felix Danyluk, CEO and Founder. Our commitment to privacy and data protection is a core value of our leadership team.

9. Contact Us

If you have any questions about this Privacy Policy, please contact us at privacy.alevio@gmail.com

Accessing Form Elements

JavaScript can select form elements using document.forms, getElementById(), or querySelector().

let form = document.getElementById("myForm");
let username = document.querySelector("#username");
let email = document.forms["myForm"]["email"];

Getting and Setting Input Values

To get user input:

let usernameValue = document.getElementById("username").value;
console.log(usernameValue);

To set an input value dynamically:

document.getElementById("username").value = "DefaultUser";

Handling Form Submission

The submit event triggers when a form is submitted. Use event.preventDefault() to prevent page reload.

document.getElementById("myForm").addEventListener("submit", event => {
  event.preventDefault();
  console.log("Form submitted!");
});

Example of collecting form data:

document.getElementById("myForm").addEventListener("submit", event => {
  event.preventDefault();
    
  let username = document.getElementById("username").value;
  let email = document.getElementById("email").value;
  
  console.log(`Username: ${username}, Email: ${email}`);
});

Form Validation

Validating input fields ensures data correctness before submission.

Basic Validation Using JavaScript

document.getElementById("myForm").addEventListener("submit", event => {
  let username = document.getElementById("username").value;
  let email = document.getElementById("email").value;
    
  if (username === "" || email === "") {
    event.preventDefault();
    alert("All fields are required!");
  }
});

Validating Input Length

if (username.length < 3) {
  alert("Username must be at least 3 characters long.");
}

Validating Email Format

Use regular expressions to check if an email is valid.

let emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
if (!emailPattern.test(email)) {
  alert("Enter a valid email address.");
}

Displaying Validation Messages

Instead of alert(), error messages can be displayed near the input field.

document.getElementById("myForm").addEventListener("submit", event => {
  let username = document.getElementById("username").value;
  let errorDiv = document.getElementById("error-message");

  if (username.length < 3) {
    event.preventDefault();
    errorDiv.textContent = "Username must be at least 3 characters long.";
  } else {
    errorDiv.textContent = "";
  }
});

<input type="text" id="username">
<div id="error-message" style="color: red;"></div>

Handling Real-Time Input Events

JavaScript can validate inputs as users type using the input or keyup event.

document.getElementById("username").addEventListener("input", event => {
  let value = event.target.value;
  document.getElementById("live-output").textContent = value;
});

<input type="text" id="username">
<p>Live Output: <span id="live-output"></span></p>

Working with Checkboxes and Radio Buttons

Handling Checkboxes

document.getElementById("subscribe").addEventListener("change", event => {
  console.log(event.target.checked ? "Subscribed" : "Unsubscribed");
});

<input type="checkbox" id="subscribe">

Handling Radio Buttons

document.querySelectorAll('input[name="gender"]').forEach(radio => {
  radio.addEventListener("change", event => {
    console.log("Selected gender:", event.target.value);
  });
});

<input type="radio" name="gender" value="Male"> Male
<input type="radio" name="gender" value="Female">

Using the `select` Element

JavaScript can detect changes in dropdowns and retrieve selected values.

document.getElementById("country").addEventListener("change", event => {
  console.log("Selected country:", event.target.value);
});

<select id="country">
    <option value="USA">USA</option>
    <option value="UK">UK</option>
    <option value="Canada">Canada</option>
</select>

Auto-Filling Form Data

Using JavaScript, forms can be auto-filled dynamically.

document.getElementById("autoFill").addEventListener("click", () => {
  document.getElementById("username").value = "JohnDoe";
  document.getElementById("email").value = "john@example.com";
});

<button id="autoFill">Auto-Fill Form</button>

Conclusion

JavaScript allows dynamic handling of user input through forms, validation, and event listeners. The next section will focus on Web APIs, including local storage, geolocation, and Fetch API, for interacting with browser capabilities.