add more actions to the code

What I need the button to do is that it opens a page where the user enters a value, chooses a date (I need a calendar to be lowered so that he chooses the date), and enters a name, when the information is saved in the record of quickbase also need a check to be marked, save the date of the day the user added the information
In addition to saving the information that the user entered in the specific fields, I need to find a way to do this without Java, I hope I have explained myself better

///EXAMPLE JAVA///
$("a.QBU_Modificar").on("click", function(event) {

var rid = this.dataset.rid;
var now = this.dataset.now;
var user = this.dataset.user;
var notas = this.dataset.notas;

var markup = '';
markup += '<table>';
markup += ' <tr>';
markup += ' <img src=https://images.quickbase.com/si/24/078-calendar2.png ></a>';
markup += ' </tr>';
markup += ' <tr>';
//markup += ' <td><label for=QBU_BaseDate><b>Fecha Propuesta</b></label></td>';
markup += ' <td><label for=QBU_Hora><b>Hora Propuesta</b></label></td>';
markup += ' </tr>';
markup += ' <tr>';
//markup += ' <td><input id=QBU_BaseDate name=QBU_BaseDate type=text></td>';
markup += ' <td>';
markup += ' <select name=QBU_Hora id=QBU_Hora>';
markup += ' <option>8:00 am</option>';
markup += ' <option>8:30 am</option>';
markup += ' <option>9:00 am</option>';
markup += ' <option>9:30 am</option>';
markup += ' <option>10:00 am</option>';
markup += ' <option>10:30 am</option>';
markup += ' <option>11:00 am</option>';
markup += ' <option>11:30 am</option>';
markup += ' <option>12:00 pm</option>';
markup += ' <option>12:30 pm</option>';
markup += ' <option>1:00 pm</option>';
markup += ' <option>1:30 pm</option>';
markup += ' <option>2:00 pm</option>';
markup += ' <option>2:30 pm</option>';
markup += ' <option>3:00 pm</option>';
markup += ' <option>3:30 pm</option>';
markup += ' <option>4:00 pm</option>';
markup += ' <option>4:30 pm</option>';
markup += ' <option>5:00 pm</option>';
markup += ' <option>5:30 pm</option>';
markup += ' <option>6:00 pm</option>';
markup += ' <option>6:30 pm</option>';
markup += ' <option>7:00 pm</option>';
markup += ' <option>7:30 pm</option>';
markup += ' <option>8:00 pm</option>';
markup += ' </select>';
markup += ' <td>';
markup += ' </tr>';
markup += ' <tr>';
markup += ' </tr>';
markup += ' <tr>';
markup += ' <td><label for=QBU_Motivo><b>Motivo</b></label></td>';
markup += ' <td>';
markup += ' <select name=QBU_Motivo id=QBU_Motivo>';
markup += ' <option>Accesorios</option>';
markup += ' <option>Banco</option>';
markup += ' <option>Carroceria Camion</option>';
markup += ' <option>Cliente</option>';
markup += ' <option>Credito y Cobro</option>';
markup += ' <option>Formalizacion</option>';
markup += ' <option>Gerencia</option>';
markup += ' <option>Licitaciones</option>';
markup += ' <option>Logistica</option>';
markup += ' <option>Seguros</option>';
markup += ' <option>Taller</option>';
markup += ' <option>Traslado</option>';
markup += ' <option>Vendedor</option>';
markup += ' <option>Otro</option>';
markup += ' </select>';
markup += ' <td>';
markup += ' </tr>';
markup += ' <tr>';
markup += ' <td><label for=QBU_Observaciones><b> Observaciones </b></label></td>';
markup += ' <td><input id=QBU_Observaciones name=QBU_Observaciones type=text></td>';
markup += ' </tr>';
markup += '</table>';

$("<div id=QBU_NoDialog>").dialog({
title: "Modificacion de Solicitud de Agenda",
modal: true,
width: 400,
resizable: false,
buttons: {
OK: function() {
var basedate = $("#QBU_BaseDate").val();
var basehour = $("#QBU_Hora").val();
var frequency = $("#QBU_Motivo").val();
var number = $("#QBU_Observaciones").val();

$(this).dialog("close");
$("#QBU_Dialog").remove();

var csvData = "";
require(["moment"], function(moment){
var d = moment(basedate);

$.post(dbidParents, {
act: "API_EditRecord",
rid: rid,
_fid_70: basedate, //Nueva fecha propuesta (en el campo de fecha original)
_fid_69: basehour, //Nueva hora propuesta (en el campo de hora original)
_fid_81: 0, //Aprobacion de agenda
_fid_106: "", //Fecha de aprobacion
_fid_173: "", //Usuario que aprobó
_fid_82: 1, //Modificacion de agenda
_fid_176: frequency, //Modificacion de agenda - Motivo
_fid_177: number, //Modificacion de agenda - Notas
_fid_67: "Modificacion de fecha/hora de entrega a : " + basedate + " " + basehour,
_fid_92: notas,


}).then(function(xml) {
console.log(xml);
// document.location.href = dbidParents + "?a=dr&rid=" + rid ;
$("a.QBU_Modificar").parent().html("Modificado!");

------------------------------
Mariela Vasquez
------------------------------