Jump to content
jploch

get checked titles of multiple checkbox option field

Recommended Posts

Hi! 
this should be easy, but I can't get it to work.

I have a repeater with events.
Every event has an option-field with multiple checkboxes.
To filter the events on the frontend I have a script, that uses the class names to filter the results (an event can have multiple categories).

Now I just want to add every checked option (title) to use as my class name.
This is what I have so far, wich only gets the first title.

foreach($page->events as $event) {

$tags = $event->options->title;
  echo "<div class='size1of2 {$tags}'>";
  echo "<img src='{$event->image->url}'>";
  echo "{$event->text_editor}";
  echo "</div>";
}


I know there is an example with a foreach, but how would I use it in this context?

foreach($page->countries as $country) {
  echo "<li>$country->title</li>";
}


 

Share this post


Link to post
Share on other sites

As an alternative to using classes to filter, you can convert categories into JSON and inject into HTML as data attributes. I haven't tried this, but it should work.

$tags = $event->options->extract('title');
$json = htmlspecialchars(json_encode($tags));
echo "<div data-category='$json'> ... </div>";

https://stackoverflow.com/a/9430472

  • Like 1

Share this post


Link to post
Share on other sites

Thx for the quick reply!
But this doesn't seems give me the correct array, it just returns nothing:

$tags = $event->options->extract('title');

 

Share this post


Link to post
Share on other sites

I assumed options field to return a type of WireArray, I've checked, it returns a SelectableOptionArray which extends WireArray, but I guess some methods are modified

I tested this one and it works

$tags = $page->options->getValues();
$tags = array_column($tags, 'title');
$json = htmlspecialchars(json_encode($tags));

echo "<div data-category='$json'> ... </div>";

In your JS, you can retrieve the array back like this

let items = document.querySelectorAll('.item');
// filter items by category
let xItems = items.filter(it => {
	let tags = JSON.parse(item.dataset.category); // tags is an array  
  	return tags.indexOf('category-x') > -1;
})

 

  • Like 1

Share this post


Link to post
Share on other sites
2 hours ago, jploch said:

Now I just want to add every checked option (title) to use as my class name.
This is what I have so far, wich only gets the first title.

foreach($page->events as $event) {
	// empty tags in each iteration
	$tags = '';
	// $event->options has multiple items (multi checkboxes)...
	// ...so, we loop through it
	foreach ($event->options as $o) {
		$tags .= $o->title . ' ';// join 'em up
	}
	// remove empty spaces
	$tags = trim($tags);
	echo "<div class='size1of2 {$tags}'>";  
	echo "<img src='{$event->image->url}'>";
  	echo "{$event->text_editor}";
	echo "</div>";
}

Could be made cleaner, shorter, etc...

 

1 hour ago, abdus said:

$tags = $event->options->extract('title');

Is this a new WireArray method? I can't seem to find it

  • Like 3

Share this post


Link to post
Share on other sites
2 minutes ago, kongondo said:

Is this a new WireArray method? I can't seem to find it

I meant explode() method, but wrote extract() instead
https://processwire.com/api/ref/wire-array/explode/

And thankfully, that works @jploch.

$tags = $page->options->explode('title');
$json = htmlspecialchars(json_encode($tags));

echo "<div data-category='$json'> ... </div>";

Thank you for the heads up @kongondo

  • Like 2

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By ngrmm
      I have a page with a table. Each table row has a page-reference field and a checkbox.
      The Page sends emails to all users (page-refrence->email-field) and change the value of the checkbox in a row to 1.
      It works with this:
      <?php // event ID fron url query $eventID = $input->get('eventID','int'); // get event-page $event = $pages->get($eventID); // config $fromEmail = $event->event_mail_from; $fromName = $event->event_mail_from_name; $emailSubject = $event->event_subject; // email html body ob_start(); include('./_inc/emailbody.inc'); $emailBody = ob_get_clean(); // make event-page editable $event->of(false); // loop through table and send out emails foreach($event->event_clients_list as $event_table_row) { // get client page $clientPage = $event_table_row->client_name; // get client email $clientEmail = $clientPage->email; // if client isn't invited yet (checkbox not checked) if($event_table_row->client_invited == '') { // send email $m = new WireMail(); $m->to($clientEmail); $m->from($fromEmail, $fromName); $m->subject($emailSubject); $m->bodyHTML($emailBody); $m->send(); // mark client as invited $event_table_row->client_invited = 1; $event->save('event_clients_list'); } } ?> But i have to use a variable in my emailbody.inc which i'm able to get in the table-loop.
      So i do the including of the body inside my loop. But this doesn't work anymore. Page sends out the emails but is unable to change the value of the checkbox.
      I get no errors!
      I'm using ProTable
      <?php // event ID fron url query $eventID = $input->get('eventID','int'); // get event-page $event = $pages->get($eventID); // config $fromEmail = $event->event_mail_from; $fromName = $event->event_mail_from_name; $emailSubject = $event->event_subject; // loop through table and send out emails foreach($event->event_clients_list as $event_table_row) { // get client page $clientPage = $event_table_row->client_name; // get client email $clientEmail = $clientPage->email; // email html body ob_start(); include('./_inc/emailbody.inc'); $emailBody = ob_get_clean(); // make event-page editable $event->of(false); // if client isn't invited yet (checkbox not checked) if($event_table_row->client_invited == '') { // send email $m = new WireMail(); $m->to($clientEmail); $m->from($fromEmail, $fromName); $m->subject($emailSubject); $m->bodyHTML($emailBody); $m->send(); // mark client as invited $event_table_row->client_invited = 1; $event->save('event_clients_list'); } } ?>  
    • By RicknRoller
      In the Doc it says:
      I have an options field (options_colors) configured like this:
      I want to have a query returning only pages with the VALUE 'red'. This is a query that works:
      $newsentries = $pages->find('template=news-entry,options_colors=number1,sort=-created,limit=16'); this is a query which does not work
      $newsentries = $pages->find('template=news-entry,options_colors=red,sort=-created,limit=16'); How do I query for 'red' instead of the title for the value?
    • By louisstephens
      Is it possible to use count() to return a number of repeater items don't have a checkbox checked? In my current set up, I have a repeater on the page "dev_repeater" with a checkbox called "dev_repeater_exclude". I need to get a count of the current items that do not have it checked so I can pass it to my css grid to alter the column width.
    • By Chris Bennett
      Not sure where I originally saw it while lurking around the forums, but someone, somewhere at some time was asking about styling Uikit checkboxes as toggle-style switches, much like the ones at the bottom of this post asking me if I want to be notified of replies.
      So here is my humble offering, rough and ready,  which can be thrown in at the bottom of your Uikit css as a starting point.
      Everything is based on ems and rems, so you can increase size as you desire by altering the single instance of font-size.
      It only targets single instances of labels within a specific field to a) try to limit unintended consequences and b) because in those cases it often seems more user-friendly to have an on/off binary switch rather than a checkbox. It's still totally a checkbox, just styled differently.
       
      .uk-form-controls-text label:only-of-type input.uk-checkbox { font-size:.8rem; margin-top:0; position:relative; -webkit-appearance:none; outline:none; width:4em; height:2.4em; border:2px solid #D6D6D6; border-radius: 3em; box-shadow:inset 5em 0 0 0 #DDD; flex-shrink: 0; } .uk-form-controls-text label:only-of-type input.uk-checkbox:after { content:""; position:absolute; top:.25em; left:.25em; background:#FFF; width:1.6em; height:1.6em; border-radius:50%; transition:all 250ms ease 20ms; box-shadow:.05em .25em .5em rgba(0,0,0,0.2); } .uk-form-controls-text label:only-of-type input.uk-checkbox:checked { background-color: transparent; box-shadow:inset 5em 0 0 0 #4ed164; border-color:#67bba5; } .uk-form-controls-text label:only-of-type input.uk-checkbox:checked:after { left:1.85em; box-shadow:0 0 1em rgba(0,0,0,0.2); } label:only-of-type input.uk-checkbox:checked + span { color:#008a00; transition:all 250ms ease 20ms; } .InputfieldCheckbox .InputfieldContent label:only-of-type {display:flex;} label:only-of-type input.uk-checkbox + span { color:#c3c3c3; display:flex; align-items:center; line-height:1.1; } /* Below is only necessary if you want the optional "tick" after items when selected */ label:only-of-type input.uk-checkbox + span:after { flex-shrink:0; margin-left:.5em;width:2em; opacity:0; content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 250'%3E%3Ccircle cx='125' cy='125' r='125' fill='%23231F20' opacity='.1'/%3E%3Cpath fill='%230B8B44' d='M95.823 139.432l-32.492-32.56-31.872 31.883-.008-.008 63.72 63.732L218.549 79.116 187.494 47.52z'/%3E%3C/svg%3E"); } label:only-of-type input.uk-checkbox:checked + span:after { opacity:1; transition: opacity 250ms ease 150ms; }  

×
×
  • Create New...