Buy Now
Sign in

How to populate textboxes with dropdown

Alcor , November 07 2017
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?

    dropdown_events.jpg
    Attachments
    dropdown_events.jpg
    dropdown_events.jpg
    (55.77 KiB)
    124 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)
    101 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