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.