Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

AppML Forms


This chapter demonstrates how to construct an input form against a database.


The examples on this page use a local SQL database.
Local SQL databases does not work in IE or Firefox. Use Chrome or Safari.

Create a Form Model

model_customersform.js

{
"database" : {
    "connection" : "localmysql",
    "maintable" : "Customers",
    "keyfield" : "CustomerID",
    "sql" : "SELECT * FROM Customers"},
"updateItems" : [
    {"item" : "CustomerName"},
    {"item" : "Address"},
    {"item" : "PostalCode"},
    {"item" : "City"},
    {"item" : "Country"}]
}

Create an HTML Form

In the previous chapter, you created an application for listing records from a database.

Now add a form application to the page:

HTML Form

<div id="Form01" class="w3-container w3-light-grey w3-padding-large w3-margin-bottom" appml-data="local?model=model_customersform">

<p>
<label for="customername">Customer:</label>
<input id="customername" class="w3-input w3-border">
</p>

<p>
<label for="address">Address:</label>
<input id="address" class="w3-input w3-border">
</p>

<p>
<label for="city">City:</label>
<input id="city" class="w3-input w3-border">
</p>

<p>
<label for="postalcode">Postal Code:</label>
<input id="postalcode" class="w3-input w3-border">
</p>

<p>
<label for="country">Country:</label>
<input id="country" class="w3-input w3-border">
</p>

</div>
Try It Yourself »

HTML Form Explained

appml-data="local?model=model_customersform" defines the AppML application for the form.



Create HTML Form Commands

Use your favorite style sheet (we use bootstrap), and create your wanted form commands:

inc_formcommands.htm

<span onclick="document.getElementById('Form01').style.display='none'" class="w3-button w3-xlarge w3-right">&times;</span>

<div class="w3-bar w3-border w3-white">
<button onclick="appml('Form01').newRecord();" class="w3-btn">New</button>
<button onclick="appml('Form01').saveRecord();" class="w3-btn w3-green">Save</button>
<button onclick="appml('Form01').deleteRecord();" class="w3-btn">Delete</button>
</div>

<div id="appmlmessage" class="w3-container w3-pale-yellow w3-padding" style="display:none;">
<span onclick="this.parentNode.style.display='none';" class="w3-button w3-xlarge w3-right">&times;</span>
<div id="message"></div>
</div>

Include the Form Commands

Include the form commands in in your form:

HTML Form

<div id="Form01" class="w3-container w3-light-grey w3-padding-large w3-margin-bottom" appml-data="local?model=model_customersform">

<div appml-include-html="inc_formcommands.htm"></div>

<p>
<label for="customername">Customer:</label>
<input id="customername" class="w3-input w3-border">
</p>

<p>
<label for="address">Address:</label>
<input id="address" class="w3-input w3-border">
</p>

<p>
<label for="city">City:</label>
<input id="city" class="w3-input w3-border">
</p>

<p>
<label for="postalcode">Postal Code:</label>
<input id="postalcode" class="w3-input w3-border">
</p>

<p>
<label for="country">Country:</label>
<input id="country" class="w3-input w3-border">
</p>

</div>
Try It Yourself »

Add a Clickable Column to the Table

In the previous chapter, you created an application for listing records from a database.

Now add a new column to the table:

HTML Source

<div appml-data="local?model=model_customerslist">

<h1>Customers</h1>
<div appml-include-html="inc_listcommands.htm"></div>
<div appml-include-html="inc_filter.htm"></div>
<table class="w3-table-all">
  <tr>
    <th></th>
  
<th>Customer</th>
    <th>City</th>
    <th>Country</th>
  </tr>
  <tr appml-repeat="records">
    <td style="cursor:pointer;width:34px;" onclick="appml('Form01').run({{CustomerID}})">&#9998;</td>
    <td>{{CustomerName}}</td>
    <td>{{City}}</td>
    <td>{{Country}}</td>
  </tr>
</table>

</div>
Try It Yourself »

The onclick event (in the new column) triggers a call to run an AppML application located in the HTML element with id="Form01":

  • appml('Form01') returns the AppML application
  • run({{CustomerID}}) runs the applications with CustomerID as parameter.

Finally, Hide the Form

Add a style to the form to make it invisible:

HTML

<div id="Form01" appml-data="local?model=model_customersform"
appml-controller="myFormController"
class="jumbotron" style="display:none">
 

Add a controller to the form, to display the form only when it is loaded and ready to display data:

Controller

<script>
function myFormController($appml) {
    if ($appml.message == "ready") {return -1;}
    if ($appml.message == "loaded") {
        document.getElementById("Form01").style.display="";
    }
}
</script>
Try It Yourself »

×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
help@w3schools.com

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.