Forums

Populate automatically a text box according the value of a autocompleter-textbox

danielitob 14 Nov, 2016
Hi

i have done a form like demo-autocompleter, but in event on countries_list i read data from db. It works. Now i must to have a trigger that, according the value in autocompleter textbox, set value in another textbox.

In my example I have 2 table: comune (idComune,nomeComune,idProvincia) and provincia(idProvincia,nomeProvincia)

i have a form with 2 text box.

1) Comune--> autocomplete (id=comune)

2) Provincia --> readonly which show the nomeProvincia of the relevant comune (id=provincia)

In events i have:

on Load:

Autocompleter with ajax form event that trigger to event: ajax_comuni. This event have :

1)db read event, that have as Fields the field nomeComune

2) a custom code with:
<?php
$countries = array();
if ( !$form->data['Data'] || count($form->data['Data']) < 1 ) {
  // no result was found
  $countries[] = 'Nessun comune in lista';
} else {
  foreach ( $form->data['Data'] as $d ) {
    $countries[$d['nomeComune']] =  $d['nomeComune'];

  }
}
foreach($countries as $country){
 if(!empty($form->data['tag']) AND stripos($country, $form->data['tag']) === false){
  continue;
 }
 $json[] = array('id' => $country, 'text' => $country);
}
echo json_encode($json);
?>

In my table comune i have to retrieve the field idProvincia to get , from table "provincia", the nameProvincia. Then i have to put this value in textBox Provincia

Suggest / Questions

1) Do i have to put idProvincia in event DB read in Fields o in conditions (
<?php return array( 'idProvincia' => $form->data['provincia'] ); ?> 
)?

2) if yes, after getting idProvincia, i have to set a "Load Javascript event" with this code:
jQuery(document).ready(function(jQ) {
  // run the query when the kd_id element changes
  jQ('#comune').on('change', function() {
    var value;
    value = idProvincia (how to retrieve it ?)
    // Using the core $.ajax() method
    jQ.ajax({
      // The URL for the request
      url: "index.php?option=com_chronoforms5&chronoform=autocompleter_test&event=load-option&tvout=ajax",
       // The data to send (will be converted to a query string)
      data: {
        provincia: value
      },
      // Whether this is a POST or GET request
      type: "POST",
      // The type of data we expect back
      dataType : "json",
    }).done(function( json ) {
      jQ('#provincia').val(json.provincia);

      });
  });
});


an event called "ajax" with custom code:

	<?php

	$db = \JFactory::getDBO();
	$query = "
	  SELECT `nomeProvincia`
	   FROM `aaa_province`
		WHERE `idProvincia` = '{$form->data['idProvincia']}' ;
	";
	$db->setQuery($query);
	$data = $db->loadObject();
	$response = array(
	'provincia' => $form->data['nomeProvincia']
	);
	echo json_encode($response);
	?>


it it correct ?

Thanks for your support

Regards

Daniele
GreyHead 17 Nov, 2016
Hi Daniele,

I'm finding it difficult to understand the question here - that's partly why I've not replied earlier.

I think that you have an AutoCompleter for Comune; each Comune has a Provincia linked to it; and you want to show the name of the Provincia in a read-only box.

The ChronoForms auto-completer is only really intended to complete a single element. However, using the jQuery Ajax code you can:

a. pass back an json array including both the Comunes and the associated Provincia (name and/or id).

b. use the jQuery Ajax done() function to unpack the json array and set both the Commune and Provincia values where you need them.

I haven't tried doing this so I'm not sure exactly how it works.

Alternatively, you could show both the Comue and the Provincia in the Auto Completer results e.g. "Bagheria : Palermo" and separate them after the form submits if that does what you need.

Bob
This topic is locked and no more replies can be posted.

VPS & Email Hosting 20% discount

{item:title} {images:#}