cfdb html shortcode show value as image based on row contents

You could add some jQuery similar to this example to swap out the value for a checkbox.
https://cfdbplugin.com/?page_id=1420

Hi michael,

How does this work using the [cfdb-html] shortcode? my page is using this to show the info. My rows contains a value called yes. It is not yet a link to an image file, so what i’m looking for is somehow replace the value yes with a link to an image file and display it.

The example shows how to use jQuery to replace something.

The idea is for you to add jQuery to your page that finds your “yes” values and replaces them with HTML for a checkbox. But you have to know what you are doing with jQuery.

Hi michael,

I don’t really understand the code. It is really complicated and I am no programmer. I also tried with some examples I found using javascript string replace method, but can’t get it working.

Thanks anyway.

Post what you have in your [cfdb-html] shortcode here. Indicate which field is the one with “yes” or “no” in it and I’ll try to help workout the javascript.

thanks michael

[cfdb-html form=”Aanmeldformulier” show=”Waterschap,Voornaam,Tussenvoegel,Achternaam,Introducee” orderby=”Achternaam,Voornaam,Waterschap” ]

<tr>
<td>${Voornaam} ${Tussenvoegel} ${Achternaam}</td>
<td>${Waterschap}</td>
<td>${Introducee}</td>
</tr>

[/cfdb-html]

the field “Introducee” can contain the value “Ja” or is empty. When the value equals Ja it needs to be replaced with an image. If it’s empty it should stay empty.

Try this:

[cfdb-html form="Aanmeldformulier" show="Waterschap,Voornaam,Tussenvoegel,Achternaam,Introducee" orderby="Achternaam,Voornaam,Waterschap" ]
<tr>
<td>${Voornaam} ${Tussenvoegel} ${Achternaam}</td>
<td>${Waterschap}</td>
<td><span class="Introducee">${Introducee}</span></td>
</tr>
{{AFTER}}
<script type="text/javascript" language="Javascript">
    (function($) {
        $(".Introducee:contains('ja')").html('<input type="checkbox" checked/>');
    })(jQuery);
</script>
{{/AFTER}}
[/cfdb-html]

Another thought, instead of a checkbox, you might what to add a check symbol ?

One line of code changes to:

$(".Introducee:contains('ja')").html('?');

(instead of the symbol you see above put in ‘& # 10004;’ but take out the spaces (have to do that here so you can see the code

Works like a charm. Thanks Michael (included the second option)