CouchCMS • View topic - SOLVED: Using Custom Checkbox with Databound & Relation Fiel

by adimpressions » Sat May 24, 2025 1:54 pm

Hello KK,
I have a cloneable template: spaces.php, that has a relation field space_amenities.
I want to set the amenities for a cloned page at the front-end using a databound form and custom checkboxes.

My current code:

Code: Select all

...

<cms:db_persist_form
   _invalidate_cache='0'
   _auto_title='1'
                                
   space_amenities = frm_space_amenities
   
  />
...
<cms:hide>
  <cms:input type="bound" name="space_amenities" />
</cms:hide>

<cms:pages masterpage="amenities.php" >
 <div class="col-sm-6 col-md-4">
   <div class="form-group">
     <div class="checkbox amenity custom-checkbox">
     <label>
     <input name="f_space_amenities[]" type="checkbox" value="<cms:show k_page_id />"><cms:show icon /> <cms:show k_page_title />
</label>
     </div>
   </div>
 </div>
                                
</cms:pages>
...

Everything works fine except the amenities do not persist to the database. What could I be doing wrong in my code?

Thank you

by genxcoders » Sun May 25, 2025 3:42 pm

@adimpressions

We had a similar issue when we were using a custom JS (chosen.js) for a specific requirement fulfillment. I hope this helps.

amenities.php (I considered this):

Code: Select all

<?php require_once( 'couch/cms.php' ); ?>
<cms:template title="Amenities" clonable="1">
   <cms:editable name="amenity_name" label="Space Name" type="text" order="1" />
 </cms:template>
<?php COUCH::invoke(); ?>

spaces.php:

Code: Select all

<?php require_once( '../couch/cms.php' ); ?>
<cms:template title="Spaces" clonable="1">
   <cms:editable name="space_name" label="Space Name" type="text" order="1" />
   <cms:editable name="space_amenities" label="Amenities" type="checkbox" opt_values="<cms:pages masterpage='test/amenities.php' show_future_entries='1'><cms:show k_page_title />=<cms:show k_page_id /><cms:if '<cms:not k_paginated_bottom />'>|</cms:if></cms:pages>" order="2" />
</cms:template>
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Question by @adimpressions</title>
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet">
   </head>
   <body>

      <cms:set submit_success="<cms:get_flash 'submit_success' />" />
      <cms:if submit_success >
          <h4>Success: Your application has been submitted.</h4>
      </cms:if>

      <cms:form
          masterpage=k_template_name
          mode='create'
          enctype='multipart/form-data'
          method="post"
          anchor='0'
          >

          <cms:if k_success >

              <cms:check_spam email=frm_email />

              <cms:db_persist_form
                  _invalidate_cache='0'
                  _auto_title='1'
              />

              <cms:set_flash name='submit_success' value='1' />
              <cms:redirect k_page_link />
          </cms:if>

          <cms:if k_error >
              <div class="error">
                  <cms:each k_error >
                      <br><cms:show item />
                  </cms:each>
              </div>
          </cms:if>

          <div class="container">
            <div class="row">
                <div class="col-md-12 mb-3">
                   <label>Space Name</label><br>
                   <cms:input name="space_name" id="space_name" class="form-control" type="bound" />
               </div>

                <cms:hide>
                  <cms:input type="bound" name="space_amenities" />
               </cms:hide>

               <cms:pages masterpage="test/amenities.php" >
               
               <div class="col-sm-6 col-md-4 mb-3">
                  <div class="form-group">
                     <div class="checkbox amenity custom-checkbox">
                        <label>
                           <input name="f_space_amenities[]" type="checkbox" value="<cms:show k_page_id />"><cms:show icon /> <cms:show k_page_title />
                        </label>
                     </div>
                  </div>
               </div>

               </cms:pages>

               <div class="col-md-12 mb-3">
                  <button type="submit">
                     SAVE
                  </button>
               </div>
            </div>
         </div>

      </cms:form>
      <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
      <script>
          // On form submission
          document.querySelector('form').addEventListener('submit', function (e) {
              var selectedValues = [];

              // Get all checked checkboxes for amenities
              document.querySelectorAll('.amenity input[type="checkbox"]:checked').forEach(function (checkbox) {
                  selectedValues.push(checkbox.value);
              });

              // Set the value of the hidden bound input to a comma-separated list
              var hiddenInput = document.querySelector('input[name="f_space_amenities"]');
              if (hiddenInput) {
                  hiddenInput.value = selectedValues.join(',');
              }
          });
      </script>
   </body>
</html>
<?php COUCH::invoke(); ?>

I hope this comes in handy when using something link f_space_amenities[].

Regards,
GXCPL (CTR)

SOLVED: Using Custom Checkbox with Databound & Relation Fiel

Re: Using Custom Checkbox with Databound Forms and Relation

Re: Using Custom Checkbox with Databound Forms and Relation

Re: Using Custom Checkbox with Databound Forms and Relation