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

[larasmith]

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

[larasmith]

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 v3](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!

[larasmith]

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!

[larasmith]

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!

[johnny]

Hello @larasmith ,
After spending lot of time researching and asking ChatGPT, it seems actually impossible without a code change due to React architecture.

It seems that I will need to add extra code for that in order to achieve the value change. However this may need some time (probably for next week) and I can’t find another work-around for this for now, sorry. I had some proof of concepts of how to do it so I am not that far away from that.

I will keep you updated on this one.

Regards
Johnny

[larasmith]

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!

[johnny]

Hello @larasmith ,

As promised I’ve created a new JavaScript method that can set the value of a field. You will need to upgrade to version 3.0.7.
The new JavaScript function name is called groceryCrudSetFieldValue and it take two parameters like the example:

groceryCrudSetFieldValue(fieldName, fieldValue)

For example in your case you will do something like this:

groceryCrudSetFieldValue('sp_SeniorHighType', '3');

Let me know if that worked for you

Regards
Johnny

[larasmith]

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

[larasmith]

Hi @johnny

Thank you for this update!
I was able to upgrade to 3.0.7 and now I can set the values via:

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

Thank you very much!

[Mattia]

Hello, I tried this groceryCrudSetFieldValue but don’t work. I have GC 3.0.11 updated today.
When I tried groceryCrudSetFieldValue(‘fieldName’, ‘value’) in the console of the browser, it returns undefined. Same problem into the view of the output of Grocery Crud.
What I have to do?
Thanks

[johnny]

Hello @Mattia ,

Please make sure that you have “publish_events” => true into the Grocery CRUD configuration file. Also make sure that you load groceryCrudSetFieldValue only after add or edit form is opened. For example with the event:

window.addEventListener('gcrud.form.edit-load', ({detail}) => {
    // use groceryCrudSetFieldValue here
});

[Mattia]

Thanks now it works!!