children groups are still showing after parent groups are hidden

  • Resolved darthyoda6

    (@darthyoda6)


    6 years ago

    College & High School only hide one level of fields most of the time, so it works fine. But if you select other in that second dropdown, then it shows a textbox to enter data into. Switch from High School to College, or visa versa, and that additional textbox should be hidden since the parent area is also hidden, but instead shows the old textbox and the new one.

    If you select University in the first dropdown, then an additional dropdown shows up with 2 more choices. If you then switch to high school, then the 2 areas hide correctly. But then switch to College, then then you see 2 dropwdown menus, when you should only see one.

    Also, I have clear on hide enabled, but none of the values clear when hidden. Which is might be a part of what is causing this to happen.

    <h3>Program Preference</h3>
 <div class="well">
     <label for="current_education_level">*Current Education Level</label>[select* current_education_level id:current_education_level include_blank "High School" "College" "University"]

[group group-program-level-uni inline clear_on_hide]*Level of Study</label>[select* kom_program_type_uni id:kom_program_type_uni include_blank "Undergraduate" "Postgraduate"][/group]

[group group-undergrad-programs inline clear_on_hide]<label>*Area of Study</label>[select* undergrad_preferences id:undergrad_preferences include_blank level:undergrad][/group]

[group group-postgrad-programs inline clear_on_hide]<label>*Area of Study</label>[select* postgrad_preferences id:postgrad_preferences include_blank level:postgrad][/group]

[group group-college-programs inline clear_on_hide]<label>*Area of Study</label>[select* college_preferences id:college_preferences include_blank level:college][/group]

[group group-course-preference-other clear_on_hide inline]<label>&nbsp;</label>[text* course_preference_1_other id:course_preference_1_other][/group]

[group group-secondary-area inline]<label>Secondary Area of Study<br/><span class="smalltext">(optional)</span></label>[text course_preference_2 id:course_preference_2][/group]
</div>

[response]
<div class="center" role="group">[submit class:btn class:btn-primary class:nextBtn  "Next"]</div>
    show [group-program-level-uni] if [current_education_level] equals "University"
show [group-undergrad-programs] if [current_education_level] equals "High School"
show [group-college-programs] if [current_education_level] equals "College"
show [group-postgrad-programs] if [kom_program_type_uni] equals "Postgraduate"
show [group-undergrad-programs] if [kom_program_type_uni] equals "Undergraduate"
show [group-secondary-area] if [current_education_level] not equals ""
show [group-course-preference-other] if [undergrad_preferences] equals "8"
show [group-course-preference-other] if [postgrad_preferences] equals "8"
show [group-course-preference-other] if [college_preferences] equals "8"

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter darthyoda6

    (@darthyoda6)

    And with the fields not being cleared on hiding, the values from the dropdowns get submitted when you submit the form, whether they’re visible or not. So if select option 1 in the visible group, chose another option in the parent dropdown which hides the one child dropdown and shows the next one in the group, the value from the hidden dropdown is still there, not cleared.

    Plugin Author Jules Colle

    (@jules-colle)

    I get a page saying: Sorry, your request cannot be accepted.

    Thread Starter darthyoda6

    (@darthyoda6)

    It should be working right now. The text formatting is removed from the page, but the rest should be working. The form is in demo mode, so nothing will get submitted.

    Thread Starter darthyoda6

    (@darthyoda6)

    So I wrote some jQuery that erases the selected values of the children when the main parent changes, and now the extra dropdown that’s was supposed to be hidden but wasn’t, is again.

    jQuery(function ($) {
        $('#current_education_level').change(function () {
            $('#kom_program_type_uni option:selected').prop("selected", false);
            $('#undergrad_preferences option:selected').prop("selected", false);
            $('#college_preferences option:selected').prop("selected", false);
        });
    });
    Plugin Author Jules Colle

    (@jules-colle)

    So it’s working now? I really need to fix this. Will make it my priority the next moment I have to work on the plugin. Have added your issue here as well: https://github.com/pwkip/contact-form-7-conditional-fields/issues/27

    Thread Starter darthyoda6

    (@darthyoda6)

    Your clear on hide code doesn’t work, so when I add my own for the dropdown’s, then everything works right. In my case if the textboxes don’t clear it’s not an issue, so I left the code alone for it.

    Thread Starter darthyoda6

    (@darthyoda6)

    I was playing around with your code, and I added a console.log($group.attr('id')); to get the id of the group it was being called on, and using the code from your latest revision but isn’t live, added a console.log($inputs);, and figured out that it was activating the if ($group.attr('data-clear_on_hide') !== undefined) { after the group was being hidden, so .not(':button, :submit, :reset, :hidden') will never find the inputs in the group because they’re already hidden. So either you need to move that function before you hide the inputs in the group, or change the code to .not(':button, :submit, :reset').

    Also, you could also change if ($group.attr('data-clear_on_hide') !== undefined) to if ($group.data('clear_on_hide') !== undefined), but that doesn’t change the functionality of the code.

    • This reply was modified 5 years, 11 months ago by darthyoda6. Reason: added second paragraph
Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘children groups are still showing after parent groups are hidden’ is closed to new replies.