⚠ In case you've missed it, we have migrated to our new website, with a brand new forum. For more details about the migration you can read our blog post for website migration. This is an archived forum. ⚠

  •     

profile picture

How can I add a field when I select an especific value from a dropdown



Aillyn

Aillyn
  • profile picture
  • Member

Posted 15 July 2013 - 12:55 PM

Hello, I'm new in Grocery Crud and I have a problem in my project. I have a dropdown in my view and when I'll choose the 2nd value of the dropdown I want that appears an edit (input "text") to add one more value. How can I do that using Grocery Crud??? If there's no solution with Grocery Crud how can I implement that?? Thanks for helping me!!

kenshicu

kenshicu
  • profile picture
  • Member

Posted 15 July 2013 - 17:22 PM

hi, I need to do something similar. perhaps the solution is to modify the library /topic/1087-updated-24112012-dependent-dropdown-library/


Amit Shah

Amit Shah
  • profile picture
  • Member

Posted 16 July 2013 - 08:32 AM

Well dont think you really need to hack into the library, 

You can achieve the workaround using javascript / jquery. 

Create a custom javascript file

Add the javascript file by using set_js function of grocery crud

Inside window.load function .. using jquery, assign the change event to the dropdown field

in there, pickup the text of the selected dropdown and apply the same to the field you want to apply it to. .

 

The solution surely will work.!!


Aillyn

Aillyn
  • profile picture
  • Member

Posted 16 July 2013 - 12:14 PM

Ok, thanks for the instruction, I'll try to do that. I think in that solution using JS/ jquery, but I don't really know how I use it with Grocery Crud, because Grocery Crud render automatically the view. If I had another doubt I will post here. Thanks!!!


kenshicu

kenshicu
  • profile picture
  • Member

Posted 16 July 2013 - 14:03 PM

this is an example I tried in the view (in the end), I think there's the essence of the solution.

<script type="text/javascript">
    (function($) {
      $(document).ready(function() {
        var field2 = $('select[name="field2"]');
            field2.children().remove().end();
            field2.append('<option value="Value1">Value1</option>')
            field2.trigger("liszt:updated");    
            
        $('#field-field1').on('change', function() {
            if( (document.getElementById('field-field1').value)==1 )
            {
                field2.removeAttr('disabled');
                field2.children().remove().end();
                field2.append('<option value="Value1">Value1</option>')
                field2.append('<option value="Value2">Value2</option>')
                field2.append('<option value="Value3">Value3</option>')
                field2.trigger("liszt:updated");
            }else{
                field2.children().remove().end();
                field2.append('<option value="Value1">Value1</option>')
                field2.trigger("liszt:updated");        
            };
        });
        
      });
    })(jQuery);
  </script>

Amit Shah

Amit Shah
  • profile picture
  • Member

Posted 17 July 2013 - 12:58 PM

Well adding it in the view will make it available to all the other functions too.. that is why it is recommended to do it in custom script


Sonxerdan

Sonxerdan
  • profile picture
  • Member

Posted 18 March 2017 - 14:13 PM

I have the same problem, but in my case, in addition to choosing a certain value would appear new boxes to enter data, the fields would have the names changed. (Eg if event equal anniversary (1) name should display {birthday}, if event equal to marriage, name must have two entries displaying {bride} {fiance}.

We can do this by the controller?

I have the same problem, but in my case, in addition to choosing a certain value would appear new boxes to enter data, the fields would have the names changed. (Eg if event equal anniversary (1) name should display {birthday}, if event equal to marriage, name must have two entries displaying {bride} {bride}