Java

// class for interacting with the database
class MyDatabase
{
  // add, update and delete functions here
}

// class for handling events
class ActionHandler implements ActionListener
{
  MyDatabase db = null;
  View m_View = null;

  public ActionHandler(View view)
  {
    m_View = view;
    db = new MyDatabase();    
  }
  public void actionPerformed(ActionEvent ae){
    if(ae.getSource() == MyView.AddButton) // HOW DI I GET VALUES HERE ???
      db.AddRecord();
  }
}

// class for making simple GUI for 3 JTextFields and 3 JButtons (add, update, delete)
class View
{
  ActionHandler action_handler = null;
  public View()
  {
    action_handler = new ActionHandler(this);
    // all the controls are created in this constructor.
    
    AddButton.addActionListener(action_handler);
  }
}

<form id="detailsform">
    <label for="cust_name">Name</label>
    <input id="cust_name" type="text"/> 
    <label for="cust_id">Customer-ID</label>
    <input id="cust_id" type="text" />
    <label for="cust_phone">Phone Number</label>
    <input id="cust_phone" type="number" />
    <label for="cust_add">Address</label>
    <input id="cust_add" type="text" />
    <label for="cust_issue">Issue</label>
    <input id="cust_issue" type="text" />
    <label for="complaint_date">Date of Complaint</label>
    <input id="complaint_date" type="text" />
    <!--<label for="appt_date">Date of Appointment</label>
    <input id="appt_date" type="text" />-->
        <table align="center" width="100%">
            <tr>
                 <td align="left" width="35%"><a href="#historypage" style="text-                decoration:none">
                 <input type="button" value="Show History" data-icon="back" data-iconpos="right" id="History" onClick()="getHistory()"/>
                  </a></td>
                  <td align="right" width="35%"><a href="#assessmentpage" style="text-decoration:none">
                  <input type="button" value="Start Assessment" data-icon="check" data-iconpos="right" id="Assessment"/>
                   </a></td>
             </tr>
      </table>
</form>

<div data-role="page" id="historypage" data-theme="f">

   <div data-role="content">
      <form id="historyForm">
          <label for="hist_cname">Customer Name</label>
          input id="hist_cname" type="text" />
          <label for="hist_cid">CustomerID</label>
          <input id="hist_cid" type="text" />
       </form>

   <div id="emp_tb1" align="center" data-theme="b">Here are the details </div>
</div>'

function getHistory() {

    var cust_id = document.getElementById("cust_id");
    var myTable = '';
    myTable += '<table id="myTable" cellspacing=0 cellpadding=2 border=1>';
    myTable += "<tr><td>S.No.</td><td>Date</td><td>Time</td><td>Complaint(s)</td></tr>";
    var url = "http://localhost:8080/POS/rest/WebServices/getHistory/"+cust_id.value;


   $.getJSON(url, function(json) {

       $.each(json, function(i, v) {

           myTable += "<tr><td>" + v.date + "</td><td>"+ v.time + "</td><td>" + v.issue
           + "</td><td>" ;
      });

 });