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").

Important:

Alevio is designed as a privacy-first application. All your personal data is stored locally on your device and is not transferred to our servers unless you explicitly activate cloud functions.

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).
AI Chat data: when using AI features, conversation history is stored locally on your device.
Image data: when using vision features, uploaded images are processed locally and may be temporarily stored for AI analysis.
Generated images: DALL-E generated images are saved locally on your device for display purposes.
Usage limits: daily usage tracking for cloud models and image generation is stored locally to enforce fair usage policies.

2. How We Use Your Information

We use the information we collect to:

Provide and maintain our Service
Improve and personalize your experience
Communicate with you about updates and features
Ensure the security and integrity of our Service

3. Data Storage and Security

Your data is stored locally on your device using secure, industry-standard encryption. We do not have access to your personal information unless you explicitly choose to share it through cloud features.

4. Third-Party Services

Alevio may integrate with third-party AI services for enhanced functionality. When using these features, only the necessary data is transmitted to provide the service. We carefully select partners who share our commitment to privacy.

Cloud Services: When you use cloud-based AI models (such as GPT-4o, Claude, or other cloud providers), your messages and uploaded images are sent to these services for processing. We use secure API connections and do not store your data on our servers.
Image Generation: When using DALL-E image generation, your text prompts are sent to OpenAI's servers to generate images. Generated images are returned to your device and stored locally.
Web Search: When using web search features, your search queries are sent to our search partners to retrieve relevant information. Search results are processed and returned to your device.
Apple Shortcuts: When using Apple Shortcuts integration, your device's Shortcuts app may access Alevio through URL schemes. This integration is handled entirely by your device's operating system.

5. Your Rights

You have the right to:

Access your personal data stored on your device
Delete your data at any time through the app settings
Opt out of cloud features and keep all data local
Contact us with any privacy concerns

6. Changes to This Policy

We may update this Privacy Policy from time to time. We will notify you of any changes by posting the new Privacy Policy on this page and updating the "Last Updated" date.

7. Contact Us

If you have any questions about this Privacy Policy or our privacy practices, 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.