Show/Hide div if fields as been populated

Question

So I have a form with a repeater field...

<table class="dokan-table">
    <tfoot>
        <tr>
            <th colspan="3">
                <?php
                $file = [
                    'file' => '',
                    'name' => '',
                ];
                ob_start();
                require $_SERVER['DOCUMENT_ROOT'] . '/wp-content/themes/rey-child/dokan/html-product-download.php';
                $row_html = ob_get_clean();
                ?>
                <a href="#" class="insert-file-row dokan-btn dokan-btn-sm dokan-btn-success" data-row="<?php echo esc_attr( $row_html ); ?>">
                    <?php esc_html_e( 'Add File', 'dokan-lite' ); ?>
                </a>
            </th>
        </tr>
    </tfoot>
    <thead>
        <tr>
            <th><?php esc_html_e( 'Name', 'dokan-lite' ); ?> <span class="tips" title="<?php esc_attr_e( 'This is the name of the download shown to the customer.', 'dokan-lite' ); ?>"><i class=" krafdeck-icon-question-circle"></i></span></th>
            <!-- <th><?php esc_html_e( 'File URL', 'dokan-lite' ); ?> <span class="tips" title="<?php esc_attr_e( 'This is the URL or absolute path to the file which customers will get access to.', 'dokan-lite' ); ?>">[?]</span></th> -->
            <th><?php esc_html_e( '', 'dokan-lite' ); ?></th>
        </tr>
    </thead>
    <tbody>

        <?php
        $downloadable_files = get_post_meta( $post_id, '_downloadable_files', true );

        if ( $downloadable_files ) {
            foreach ( $downloadable_files as $key => $file ) {
                include $_SERVER['DOCUMENT_ROOT'] . '/wp-content/themes/rey-child/dokan/html-product-download.php';
            }
        }
        ?>
    </tbody>

This code pulls a file called html-product-download.php which contains...

<tr>
    <td>
        <input type="text" id="k-down-check" class="dokan-form-control input_text" placeholder="<?php esc_attr_e( 'File Name', 'dokan-lite' ); ?>" name="_wc_file_names[]" value="<?php echo esc_attr( $file['name'] ); ?>" />

    </td>
    <td>
        <p>
            <input type="text" class="dokan-form-control dokan-w8 input_text wc_file_url" placeholder="https://" name="_wc_file_urls[]" value="<?php echo esc_attr( $file['file'] ); ?>" style="margin-right: 8px;" />
            <a href="#" class="dokan-btn dokan-btn-sm dokan-btn-default upload_file_button" data-choose="<?php esc_attr_e( 'Choose file', 'dokan-lite' ); ?>" data-update="<?php esc_attr_e( 'Insert file URL', 'dokan-lite' ); ?>"><?php echo esc_html( str_replace( ' ', '&nbsp;', __( 'Choose file', 'dokan-lite' ) ) ); ?></a>
        </p>
    </td>

    <td>
        <p>
            <div id="show_hide" class="hide">YES</div>
            <a href="#" class="dokan-btn dokan-btn-sm dokan-btn-danger dokan-product-delete"><span><?php esc_html_e( 'Delete', 'dokan-lite' ); ?></span></a>
        </p>
    </td>
</tr>

I would like to display this div...

<div id="show_hide" class="hide">YES</div>

...when the input field with the id 'k-down-check' is populated with text. The JavaScript/CSS I've used is this...

<script type="text/javascript"> 
jQuery('#k-down-check').on('keyup', function(e) {
    var input = jQuery(this).val();
    input.length ?
    jQuery('#show_hide').show() :
    jQuery('#show_hide').hide();
})
</script>

<style>
.hide {display: none;}
</style>

The problem I am facing is this script works for the first field but not any additional fields in the repeater as they all have the same ID. I'm not really sure what I am missing.

They should not all have the same `id` as the `id` has to be unique! And now you know why!! — RiggsFolly, Feb 22 '23 at 11:39
When I inspect the elements in the console they have the same ID however they do have this data-gtm-form-interact-field-id="0" which is different for each. — Ashley Young, Feb 22 '23 at 12:08
That doesn't change the fact that `jQuery('#k-down-check')` will only ever select the _first_ element with that ID. And the same goes for `jQuery('#show_hide')` as well of course. — CBroe, Feb 22 '23 at 12:22
I see that however I am unable to change that, this code is part of the Dokan Wordpress plugin. I can only change the template files which are those I have posted above. — Ashley Young, Feb 22 '23 at 12:30

score 0 · Answer 1 · answered Feb 22 '23 at 11:40

0

jQuery(this).parent().parent().find('#show_hide').show() :
jQuery(this).parent().parent().find('#show_hide').hide();

You can try selecting the show_hide element that is inside input's parent. Also it would be good to select them by class.

answered Feb 22 '23 at 11:40

Edmon Belchev

337
2
8

I tried this but it's not working. As I said above the field has an individual identifier 'form-interact-field-id="0"' which is automatically generated. I only just noticed this. Is there a way to use this? – Ashley Young Feb 22 '23 at 12:08
1

Did you try selecting the element by it's class not id attribute? – Edmon Belchev Feb 22 '23 at 12:59
I did yes, however the user has to edit that field in order for it to trigger the Javascript. My users will be using the select file button and using the media library to select or upload a file which means wordpress pragmatically enters the URL – Ashley Young Feb 23 '23 at 11:14

Lester · Answer 2 · 2023-02-23T06:17:25.460

0

Edit your code like this:

jQuery(document).on('keyup', '#k-down-check', function(e) {
  var input = jQuery(this).val();
  var div = jQuery(this).closest('tr').find('#show_hide');

  if (input.length) {
    div.show();
  } else {
    div.hide();
  }
});

edited Feb 23 '23 at 06:17

answered Feb 23 '23 at 06:05

Lester

1
2

I tried your code and it works but only if the user enters the URL, my users won't be doing this, they will clicking the 'Select File' button which opens the media library and they select or upload the file. Therefore wordpress pragmatically enters the file URL. – Ashley Young Feb 23 '23 at 11:03
What I would like to achieve is to hide the file URL field and just show the select file button, then when a user has selected or uploaded a file from the media library it displays a tick icon instead of showing the file url field. – Ashley Young Feb 23 '23 at 11:08
How about if you try to use "change" event instead of "keyup"? – Lester Feb 23 '23 at 11:21
Unfortunately not, it still doesn't seem to trigger it – Ashley Young Feb 23 '23 at 11:23

Ashley Young · Accepted Answer · 2023-02-24T13:47:59.653

So the problem I was facing was using keyup and change were not triggering the code unless the user edited the field. Users would not be doing this as they use the media library to add files. So I thought I would try ChatGPT to see if the AI could figure this out and it told me to use this code:

      var checkInputInterval = setInterval(function() {
jQuery('.k-down-check').each(function() {
  var input = jQuery(this).val();
  var div = jQuery(this).closest('tr').find('#show_hide');

  if (input.length) {
    div.show();
  } else {
    div.hide();
  }
});}, 1000);

This code works as it checks the input field every one second. Is there a reason I should not use this?

Show/Hide div if fields as been populated

3 Answers3