[SOLVED] How to Use jQuery/JavaScript to place values or hide fields when a Drop Down is clicked?

image491×852 18.8 KB

Hello @johnny

I am currently working in a CRUD above (please refer to the image).
When I was using the old enterprise edition, I can actually use JQuery to hide fields or add text to specific input elements.

Now I am currently using Grocery CRUD Enterprise 3.0.4 and cannot execute the task using the same method. Are there any workarounds for this?

Thank you in advance

I would love to learn how to properly call the elements which are dynamically created by GroceryCRUD.

I tried checking the documentation, to be specific is this link: [JavaScript Events | Grocery CRUD - A PHP CRUD Generator Library](https://GroceryCRUD Enterprise Javascript)

I was successful in using:

window.addEventListener('gcrud.datagrid.ready', () => {
    console.log('datagrid ready triggered');
});

However, I got lost in how could actually get to control or code for the specific example.
I wanted to add default values to other fields based on the selection made on the School Origin field.
For example if I select Senior High School, the values for the related fields for College and Vocational School Level would be “n/a”.

I hope someone can give me insights on how to do this. Your help would be highly appreciated.
Thank you very much!

I have progress now. I was able to set default values for non-dropdown type inputs using:

$(document).on('click, focusout', '#gc-form-sp_SchOrigin', function() {
  if ($('[name="sp_SchOrigin"]').val()==='2'){
    $("#gc-form-sp_SeniorHighSch").val('n/a');
    $("#gc-form-sp_SeniorHighYear").val('n/a');
  }
});

However, I cannot figure out the way to set default values for dropdowns like High Sch. Type, Senior High Type, College Type, and Vocational Type.

If there is a proper way to do it, I would highly appreciate your help. Thank you!

Another progress… I was now able to update even the dropdowns using:

$(document).on('click, focusout', '#gc-form-sp_SchOrigin', function() {
  if ($('[name="sp_SchOrigin"]').val()==='2'){
    $("#gc-form-sp_SeniorHighSch").val('n/a');
    $("#gc-form-sp_SeniorHighYear").val("n/a");
    $("#gc-form-sp_SeniorHighYear").attr("value","n/a");
    $("#gc-form-sp_SeniorHighType").find("input[name='sp_SeniorHighType']").val('3');
    $("#gc-form-sp_SeniorHighType").find("div[class$='-singleValue'],div[class*='-singleValue']").html('n/a');
    $("#gc-form-sp_SeniorHighType").find("input:not([name='sp_SeniorHighType']").css('opacity', '0');
  }
});

Unfortunately though visually the values are present, it was not saved to the database during save…
I do hope this feature or action be integrated to the later release of GroceryCRUD Enterprise, this would be very useful and handy…

Thank you!

Thank you for this update!

I will anticipate for that next week.
Meanwhile I will proceed to the other parts of the project I am working on so I can still move forward

Blessed be!

Hi @johnny

I can’t wait to try this out
I can start the upgrade tomorrow.
I’ll let you know the results.

Thanks for overwhelming support