Buy Now
Sign in

How to populate textboxes with dropdown

Alcor , November 07 at 16:03
A
Alcor

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.

A
Alcor

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"

GreyHead

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

ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much

A
Alcor

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?

Attachments
dropdown_events.jpg
dropdown_events.jpg
(55.77 KiB)
45 Downloads/Views
A
Alcor

Sorry the attachment didn't upload correctly

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

Attachments
dropdown_events.jpg
dropdown_events.jpg
(55.77 KiB)
45 Downloads/Views
GreyHead

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

ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much

A
Alcor

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);
?>

GreyHead

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

ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much

A
Alcor

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'] );
?>

GreyHead

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

ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much