📝 AppML – How to Handle Form Submission: Simple Data Saving Without JavaScript

🧲 Introduction – Why Learn Form Submission in AppML?

Handling form submissions often requires JavaScript, AJAX, or backend scripting—but not with AppML. Using models, data attributes, and the appml-submit button, you can create and submit fully functional forms with zero JavaScript.

🎯 In this guide, you’ll learn:

• How to define and use an AppML form
• How to use appml-submit for submitting data
• How to connect models to PHP or ASP scripts
• How validation and saving happens automatically

---

📄 Basic Concept – How AppML Handles Forms

AppML uses a model-driven form system, where:

1. The model defines what fields are used and required.
2. The appml-data attribute points to the backend handler (usually PHP/ASP).
3. The appml-submit button triggers saving the form data.
4. AppML manages validation, updates, and messages automatically.

---

🧪 Example – Simple Form with AppML

✅ user-model.json

{
  "table": "users",
  "key": "id",
  "fields": [
    { "name": "name", "required": true },
    { "name": "email", "required": true },
    { "name": "role" }
  ]
}

✅ This defines:

• A users table with a primary key id
• Required fields: name, email

---

✅ user-form.php

<?php
include("appml.php");

$appml = new AppML();
$appml->model = "user-model.json";
$appml->run();
?>

✅ This PHP script:

• Loads the model
• Connects to the database (configured in appml.php)
• Handles form data save/update

---

✅ HTML Form

<div 
  appml-model="user-model.json" 
  appml-data="user-form.php" 
  appml-message>

  <h2>New User Registration</h2>

  <input name="name" placeholder="Full Name">
  <input name="email" placeholder="Email">
  <input name="role" placeholder="Role">

  <button appml-submit>Submit</button>
</div>

✅ Explanation:

• The form fields match model field names (name, email, role)
• AppML automatically maps the inputs to the model
• appml-submit triggers the form save via AJAX to user-form.php
• Any errors or success messages appear automatically

---

🧪 Example – Update Existing Record

You can also use AppML to edit records:

<div 
  appml-model="user-model.json" 
  appml-data="user-form.php" 
  appml-key="3"
  appml-message>

  <input name="name">
  <input name="email">
  <input name="role">
  <button appml-submit>Update</button>
</div>

✅ appml-key="3" loads the record with ID 3 for editing.

---

🔐 Form Validation with onvalidate()

You can add custom validation using a controller.

✅ form-controller.js

myAppML.onvalidate = function() {
  if (!myAppML.data.email.includes("@")) {
    myAppML.message = "Please enter a valid email address.";
    return false;
  }
  return true;
};

✅ This ensures the email is properly formatted before submission.

---

📦 Backend Handling in PHP

AppML expects your backend to:

• Read the model
• Connect to the database
• Handle INSERT, UPDATE, DELETE based on the model

Make sure your appml.php file is configured to connect to your SQL database.

---

💬 Display Submission Message

AppML automatically uses appml-message to show messages like:

• "Record inserted successfully."
• "Validation failed."

You can customize messages using controllers or model settings.

---

📌 Summary – Recap & Key Takeaways

AppML simplifies form creation by binding HTML fields to a model and handling the form submission automatically with a server script.

🔍 Key Takeaways:

• Use appml-model for field definitions and validation
• Use appml-data to point to a PHP/ASP script for data handling
• Use appml-submit to submit the form
• Add appml-message to show success/error feedback
• Add appml-key to edit existing records

⚙️ AppML form submission is a powerful low-code approach to building interactive apps with minimal scripting.

---

❓ FAQs – Handling Forms with AppML

---

❓ Can I use GET instead of POST for AppML forms?
❌ No. AppML submits data using POST for inserts and updates.

---

❓ What happens if a required field is left blank?
✅ AppML will prevent submission and show a validation error based on the model.

---

❓ Can I use radio buttons, checkboxes, or dropdowns in AppML forms?
✅ Yes. Just use standard HTML form controls with matching name attributes.

---

❓ Can I handle file uploads with AppML forms?
⚠️ File uploads are not natively supported. You need to extend the form with custom JavaScript.

---

❓ Is AppML secure for public form handling?
🔐 Use secure server-side validation in PHP and restrict unauthorized SQL operations.

---

Share Now :