How to populate textboxes with dropdown

Hello all.

I'm making a form where some textboxes are populate with a dropdown selection, but I don't get it. I've read posts in the forum and tutorials but I can't understand what I'm doing wrong. In the form, one drop down contains years. When a year is selected 3 text boxes are filled with data saved in a database. I think this was achieved with ajax, it's ok?

Well, in setup tab I created a on Load event with a Load javascript above the HTML Render form

 jQuery(document).ready(function($) {
  $("#group_id").prop("disabled",true);
  if ($("#group_id").val() == "Autor" || $("#group_id").val() == 'Super Administrador') {
    $("#a42").prop("disabled",false);
    $("#a45").prop("disabled",false);
    $("#a5").prop("disabled",false);
    $("#button10").prop("disabled",false);    
  }
  else {
    $("#a42").prop("disabled",true);
    $("#a45").prop("disabled",true);
    $("#a5").prop("disabled",true);
    $("#button10").prop("disabled",true);
  }

$("#years").change(function() {
var value;
value = $("#years :selected").val();

// Using the core $.ajax() method
$.ajax({
url: "index.php?option=com_chronoforms5&chronoform=Anillas_seriadas_gestion_copia&tvout=ajax",
data: { year: value},
type: "POST",
dataType : "json",
})
.done(function( json ) {
$("#a42").val(json.a42);
$("#a45").val(json.a45);
$("#a5").val(json.a5);
});

});
});

I also created in Setup tab an On ajax event with a DB read:

Enabled: Yes
Table name: xxxxxx
Multi read: Yes
Enabled Mode ID: Yes
Model ID: Data
Fields: id,user_id,year,a42,a45,a5
Conditions:
<?php
return array( 'year' => $form->data['years'] );
?>

And a Custom code:

<?php
$options = array();
if ( !$form->data['Data'] || count($form->data['Data']) < 1 ) {
  // no result was found
  $options[] = 0;
} else {
  foreach ( $form->data['Data'] as $d ) {
   $options['id'] =  $d['id'];
    $options['year'] =  $d['year'];
    $options['a42'] =  $d['a42'];
    $options['a45'] =  $d['a45'];
    $options['a5'] =  $d['a5'];
  }
}
echo json_encode($options);
?>

When the dropdown "years" is clicked the server response is, by example: {id:1,year:2017,a42:0,a45:160,a5:0}, but the textboxes aren't filled. What do I doing wrong? Thanks in advance.

I added to ajax method:

.fail(function(jqXHR, textStatus, errorThrown) {

  if (jqXHR.status === 0) {

    alert('Not connect: Verify Network.');

  } else if (jqXHR.status == 404) {

    alert('Requested page not found [404]');

  } else if (jqXHR.status == 500) {

    alert('Internal Server Error [500].');

  } else if (textStatus === 'parsererror') {

    alert('Requested JSON parse failed.');

  } else if (textStatus === 'timeout') {

    alert('Time out error.');

  } else if (textStatus === 'abort') {

    alert('Ajax request aborted.');

  } else {

    alert('Uncaught Error: ' + jqXHR.responseText);

  }

And now it shows me the error "Requested JSON parse failed"

Hi Alcor,

I can only suggest that you add debug code, and/or use your browser web developer tools to see what is actually being returned to the Ajax query.

Bob

Thanks for your answer GreyHead.

I've modified the ajax url

url: "index.php?option=com_chronoforms5&chronoform=Anillas_seriadas_gestion_copia&tvout=ajax",

to

// Using the core $.ajax() method
$.ajax({
url: "index.php?option=com_chronoforms5&chronoform=Anillas_seriadas_gestion_copia&event=ajax&tvout=ajax",
data: { year: value},
type: "POST",
dataType : "json",
})
.done(function( json ) {
console.log(json);
$("#a42").val(json.a42);
$("#a45").val(json.a45);
$("#a5").val(json.a5);
});

});
}); 

And now I haven't error but console.log(json) returns me an Array [ 0 ] .

In the Designer tab, Dropdown Events tab I set (view attachment). Is it ok?

[attachment=60738_20171109122720_dropdown-events-jpg.jpg][/attachment]

Sorry the attachment didn't upload correctly

On: != 
Value selected: ''
Action: function
Element ID/fn()/Event:
Options list/AJAX event: ajax

Hi Alcor,

It looks as if the Ajax event in your form isn't returning anything - or an empty array. What code do you have there?

Bob

A custom code with

<?php
header('Content-Type: application/json');

$options = array();
if ( !$form->data['Data'] || count($form->data['Data']) < 1 ) {
// no result was found
$options[] = 0;
} else {
foreach ( $form->data['Data'] as $d ) {
$options['id'] = $d['id'];
$options['year'] = $d['year'];
$options['a42'] = $d['a42'];
$options['a45'] = $d['a45'];
$options['a5'] = $d['a5'];
}
}
echo json_encode($options);
?>

Hi Alcor,

That suggests that $form->data['Data'] is empty so you are getting an empty array returned. What are you using to create that array?

Bob

A DB read on ajax event:

Enabled: Yes
Table name: xxxxxx
Multi read: Yes
Enabled Mode ID: Yes
Model ID: Data
Fields: id,user_id,year,a42,a45,a5
Conditions:
<?php
return array( 'year' => $form->data['years'] );
?>

Hi Alcor,

And does that return any data? It's tricky to debug Ajax calls but you can do it by adding debug code to output values to the returned data and using your web browser developer tools to see exactly what is being returned.or possibly by calling the form event directly from a URL.

Bob