Forums

Hello to everyone,

I have created a triple dynamic dropdown, all of them taking values from my database tables using combined SQL queries and of course each dropdown value depending of the previous dropdown selections.

What I need now is based on the last dropdown selection, fill in automatically a textarea box with a value taken again from a database table, using SQL queries.

To be more clear with an example, let’s say that after selecting an article (using my 3rd dropdown box), it must be displayed automatically the long text description of this article, within a textarea box, with this text description being a value of a field, of a table in my database.

I am able to write the SQL queries, and able to populate the dropdown boxes dynamically from my database tables, but I have no idea how to populate the textarea boxes.

As unfortunately I didn’t find any related topic in the forum, could you please help me by indicating me the process how to populate automatically from my database this specific textarea box, after dynamic dropdown selection?

I will appreciate very much any help

Thank you very much, in advance
Ifigenia

Hi Ifigenia,

You can do this with an Ajax Query - but it has to be custom coded, CF doesn't have this built in.

Here's an example that I wrote for a client recently. This one sets the value of several inputs when a drop-down selection is made - it will work just as well to add a value to a text box.

There are two parts: JavaScript code added to a Load JavaScript action that makes the AJAX call and handles the result; and PHP code added to a new form event; this receives the AJAX call and returns the required data in a JSON encoded format.

jQuery(document).ready(function(jQ) {
  // run the query when the kd_id element changes
  jQ('#kd_id').on('change', function() {
    var value;
    value = jQ('#kd_id :selected').val();
    // Using the core $.ajax() method
    jQ.ajax({
      // The URL for the request
      url: "index.php?option=com_chronoforms5&chronoform=fahrtflghin-test&event=load-option&tvout=ajax",
       // The data to send (will be converted to a query string)
      data: {
        kd_id: value
      },
      // Whether this is a POST or GET request
      type: "POST",
      // The type of data we expect back
      dataType : "json",
    })
    // Code to run if the request succeeds (is done);
    // The response is passed to the function
    .done(function( json ) {
      jQ('#fid').val(json.kd_id);
      jQ('#fname1').val(json.kdname);
      jQ('#femail').val(json.kdemail);
      jQ('#ftelmobile').val(json.kdtelmobile);
      jQ('#ftelfest').val(json.kdtelmobile);
      jQ('#ffax').val(json.kdfax);
    });
  });
});

<?php
$db = \JFactory::getDBO();
$query = "
  SELECT `kd_id`, `fgname`, `fgvorname`, `fgemail`, `fgtelmobile`, `fgtelfest`
    FROM `#__chronoengine_cf_kdadr`
    WHERE `kd_id` = '{$form->data['kd_id']}' ;
";
$db->setQuery($query);
$data = $db->loadObject();

$response = array(
  'kd_id' => $form->data['kd_id'],
  'kdname' => $data->fgvorname.' '.$data->fgname,
  'kdemail' => $data->fgemail,
  'kdtelmobile' => $data->fgtelmobile,
  'kdtelfest' => $data->fgtelfest,
  'kdfax' => $data->fgfax
);
echo json_encode($response);
?>

Bob

Hello Bob,

I would like to thank you very much for your reply.

I have tried to adapt the javascript you sent me and I have created a "Load Javascript", that I put it in "on Load" just before the HTML (Render Form) and the relevant php code that I put it in a new event that I called "populate_description".

Is that correct?

However, I don't understand:

1. with which URL within the javascript to change the "url: "index.php?option=com_chronoforms5&chronoform=fahrtflghin-test&event=load-option&tvout=ajax". Where can I found the appropriate URL, in my case?

2. how to connect the "populate_description" with the textarea box, in order to be triggered when my last dropdown selection is performed, in order to populate this specific box.

Many many thanks
Ifigenia

Hi Ifigenia,

1. please replace fahrtflghin-test with the name of your form.

2. the .done() part of the JavaScript is the code that is run when a response is received, you need to edit that to set the value of your textarea.

Bob

Hi i have tried to follow the instructions on this thread as i am having the same problem.

I have added a load javascript to the onload segment in the setup tab and adapted the code as follows

jQuery(document).ready(function(jQ) {
  // run the query when the kd_id element changes
  jQ('#researcher1').on('change', function() {
    var value;
    value = jQ('#researcher1:selected').val();
    // Using the core $.ajax() method
    jQ.ajax({
      // The URL for the request
      url: "index.php?option=com_chronoforms5&chronoform=project&event=researcher1load3&tvout=ajax",
       // The data to send (will be converted to a query string)
      data: {
        researcher1: value
      },
      // Whether this is a POST or GET request
      type: "POST",
      // The type of data we expect back
      dataType : "json",
    })
    // Code to run if the request succeeds (is done);
    // The response is passed to the function
    .done(function( json ) {
      jQ('#id').val(json.researcher1);
      jQ('#name').val(json.researcher1name);
      jQ('#email').val(json.researcher1email);
    });
  });
});

I have then added new event with custom code in the setup tab and have adapted the code as follows

<?php
$db = \JFactory::getDBO();
$query = "
  SELECT `id`, `name`, `email`
    FROM `#__users`
    WHERE `id` = '{$form->data['researcher1']}' ;
";
$db->setQuery($query);
$data = $db->loadObject();

$response = array(
  'id' => $form->data['researcher1'],
  'name' => $data->researcher1name,
  'email' => $data->researcher1email
);
echo json_encode($response);
?>

However when i select the correct person from the dropdown nothing gets populated into the fields on the form. I am unable to move the new event above the on submit event, could this be stopping it performing the event of have i added the code in the wrong place?

Many thanks

Hi gluttonforpunishment,

The answer to your question is No - the sequence of events makes no difference here.

You can debug Ajax calls using your browser web developer tools. In Chrome (which I mostly use) there is a Network tab which can show you the data being sent to the server and what is returned.

Bob