#Retrieve data from the custom widget

1 messages · Page 1 of 1 (latest)

cyan narwhal
#

I created a form in a custom widget, and I would like to know how to retrieve the data entered in different fields once a button is pressed. I tried several methods, creating an event in the JS Objects, in the widget's JS, and directly in the event box. But it always returns an undefined field.

Here is the HTML of the form if it helps.

<div class="absence-form-container">
  <h2>Nouvelle Demande d'Absence</h2>
    <form id="absenceForm" class="absence-form">
      <div class="form-row">
        <div class="form-group">
      <label for="teacherSearch">Enseignant :</label>
      <div class="teacher-search-container">
        <input type="text" id="teacherSearch" placeholder="Rechercher un enseignant..." autocomplete="off" />
        <div id="teacherDropdown" class="teacher-dropdown" style="display: none;">
            </div>
        <input type="hidden" id="selectedTeacherId" required />
      </div>
    </div>
    <div class="form-group">
      <label for="startDateAbsence">Date de début :</label>
      <input type="date" id="startDateAbsence" required />
    </div>
    <div class="form-group">
          <label for="endDateAbsence">Date de fin :</label>
      <input type="date" id="endDateAbsence" required />
    </div>
      </div>
      <div class="form-group">
        <label for="absenceReason">Motif d'absence :</label>
    <textarea id="absenceReason" rows="3" placeholder="Décrivez le motif de votre demande d'absence..." required></textarea>
      </div>
      <div class="form-actions">
    <button type="button" id="resetForm" class="btn-secondary">Réinitialiser</button>
    <button type="submit" id="submitAbsence" class="btn-primary">Créer la demande</button>
      </div>
      <div id="formMessage" class="form-message" style="display: none;"></div>
    </form>
  </div>
ornate nacelleBOT
#

{
event.preventDefault(); // Prevent the default form submission

// Retrieve values from the form fields
const teacherSearch = document.getElementById('teacherSearch').value;
const startDateAbsence = document.getElementById('startDateAbsence').value;
const endDateAbsence = document.getElementById('endDateAbsence').value;
const absenceReason = document.getElementById('absenceReason').value;

// Log the values or use them as needed
console.log('Teacher:', teacherSearch);
console.log('Start Date:', startDateAbsence);
console.log('End Date:', endDateAbsence);
console.log('Reason:', absenceReason);

// You can now use these values in your Appsmith application
}

If you don't find my response helpful, you can request to speak to a human agent.

cyan narwhal
#

After retrieving this data, when the button is clicked, the data must be sent in an SQL query.

Here is the query:

INSERT INTO demandes ("idenseignant", "statut", "motif", "datedebutabsence", "datefinabsence")
VALUES (
  {{ onSubmitAbsence.data.teacherId }},
  'En création',
  {{ onSubmitAbsence.data.motif }},
  {{ onSubmitAbsence.data.startDate }},
  {{ onSubmitAbsence.data.endDate }}
)
RETURNING "iddemande";
ornate nacelleBOT
#

{
onSubmitAbsence: async function() {
// Retrieve values from the form fields
const teacherId = document.getElementById('selectedTeacherId').value;
const startDate = document.getElementById('startDateAbsence').value;
const endDate = document.getElementById('endDateAbsence').value;
const motif = document.getElementById('absenceReason').value;

// Return the data as an object
return {
teacherId: teacherId,
startDate: startDate,
endDate: endDate,
motif: motif
};
}
}

  1. Configure the SQL Query:

In your SQL query, use the mustache syntax to access the data returned by the onSubmitAbsence function:

INSERT INTO demandes ("idenseignant", "statut", "motif", "datedebutabsence", "datefinabsence")
VALUES (
{?{ JSObject1.onSubmitAbsence.data.teacherId }?} ,
'En cr�ation',
{?{ JSObject1.onSubmitAbsence.data.motif }?} ,
{?{ JSObject1.onSubmitAbsence.data.startDate }?} ,
{?{ JSObject1.onSubmitAbsence.data.endDate }?}
)
RETURNING "iddemande";

  1. Trigger the SQL Query on Button Click:

Ensure that the SQL query is triggered when the "Cr�er la demande" button is clicked. You can do this by calling the query in the button's onClick event:

document.getElementById('submitAbsence').addEventListener('click', async function(event) {
event.preventDefault(); // Prevent the default form submission

// Run the JS function to get the form data
await JSObject1.onSubmitAbsence();

// Run the SQL query
await yourSQLQuery.run();
}

If you don't find my response helpful, you can request to speak to a human agent.