[Resolved] Render html inside cred submit button

[Author]

Posts

[RensV5812]

Hi guys,

I've added functionality to my site that lets users add posts to their favorites. I followed this thread:
https://toolset.com/forums/topic/favorites-view/

Now I am trying to change the button text of the form to a heart icon. When a post is not favorited by the user yet it should be white and if it is it should be red. In the above mentioned support thread this JQuery code is giving for manipulating the button text:

jQuery(window).bind("load", function() {
   jQuery( "form[id^='cred_form_5652']").find("input[type='submit']").val(jQuery( "input[name='remove-favorite']").length ? "<p>Favoriet weghalen</p>" : "<p>Favoriet</p>");
});

This code works. However, when I try adding html tags to the strings they don't render. Here's an example of what the button could contain instead of just text.

Before favorite:
<span class="dashicons dashicons-heart" style="color: white; font-size: 30px;"></span>
After favorite:
<span class="dashicons dashicons-heart" style="color: red; font-size: 30px;"></span>

How do I make this work?

Rens

[Minesh]

Hello. Thank you for contacting the Toolset support.

The thing is that value attribute do not support the non-text value that is why is not get rendered.

You need to change your submit button to button within your form. So, you need to edit your form and remove the submit button shortcode and you need to replace the submit button shortcode with the following button code. Something like as follows:

<button  type="submit" value="Submit">Submit</button>

And then try to add the jquery code:

jQuery(window).bind("load", function() {

before_html='<span class="dashicons dashicons-heart" style="color: white; font-size: 30px;"></span>';
after_html='<span class="dashicons dashicons-heart" style="color: red; font-size: 30px;"></span>';

val = jQuery( "input[name='remove-favorite']").length ? after_html : before_html;

jQuery( "form[id^='cred_form_5652']").find("[type='submit']").html(val);
 });

I hope the above code works for you to resolve your issue.

[RensV5812]

Hi Minesh,

Thanks, the code works. I see the heart changing from white to red. However, how do I get the new button element linked to the form? If I submit the form using it the form doesn't work (favoriting or unfavoriting a post). It only works when using the old button.

This is what the form looks like now:

[credform class='cred-form cred-keep-original']
  [wpv-for-each field="wpcf-favoriet"]
    [wpv-conditional if="( [types field='favoriet'][/types] eq [wpv-current-user info='id'] )"]
      [cred_generic_field field='remove-favorite' type='hidden' class='']
       {
         "required":0,
         "validate_format":0,
         "default":"1"
        }
      [/cred_generic_field]
    [/wpv-conditional]
  [/wpv-for-each]
  <p align="right">[cred_field field='form_submit' value='' urlparam='' id='btnFavorite' class='x-btn x-btn-global mam']</p>
  <button field='form_submit' type="submit" value="Submit">Submit</button>
[/credform]

I know it has two buttons now, but also removing the first doesn't help.

Rens

[Minesh]

The thing is that what you applied is custom code and you need to find a way to submit the form.

I am not sure why its not working. Can you please share the problem URL where you added the form as well as access details.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[Minesh]

can you please stop editing the form in backend so I can access it, it says you are currently editing so I do not have access to it.

[RensV5812]

Yep, sorry! I still had a tab open. It's closed now.

[Minesh]

I still can not access the form. It says "admin is het bericht nu aan het bewerken.". Can you please logout for now.

[Minesh]

Can you please check now: hidden link

I've adjusted the button tag as given under:

<button  type="submit" name="form_submit_1"  class="x-btn x-btn-global mam wpt-form-submit form-submit submit" value="Submit">Submit</button>

I can see its working as expected 🙂

[RensV5812]

Thanks again Minesh! With some styling this will look great. 👍

Rens

[RensV5812]

Hi Minesh,

Sorry, just one more small thing. When I use Ajax to refresh the form the code doesn't run so the initial value of the button 'Submit' appears. Is there another event we can 'bind' this code on so it would work with Ajax as well? Just dipping my toe into the wondrous world of JQuery so yeah...

Also, the way this code is set up the value of the button doesn't change until the entire page is loaded which looks a little silly i.m.o.

Now:
jQuery(window).bind("load", function() {
Updated?:
jQuery(window).bind("ajax-compatible-trigger", function() {

Cheers,
Rens

[RensV5812]

Okay, I added this function and it works:

jQuery( document ).ajaxComplete(function() {
  console.log('favorite form submitted');
  before_html='<p style="text-align:center"><span class="dashicons dashicons-heart" style="color: white; font-size: 30px; width: 30px; height: 25px;"></span></p>';
  after_html='<p style="text-align:center"><span class="dashicons dashicons-heart" style="color: red; font-size: 30px; width: 30px; height: 25px;"></span></p>';
 
  val = jQuery( "input[name='remove-favorite']").length ? after_html : before_html;

jQuery( "form[id^='cred_form_5652']").find("[type='submit']").html(val);
 });

So what remains is what could I use to run the function without having to wait for the entire page to load?

[Minesh]

The help you are asking is above and beyond the scope of our support policy. I am afraid that I would not be able to help you further and I hope this is totally understandable.

Initially, I already help you with your custom code but this is pure JS custom code and I suggest you should hire a pro JS developer to help you out on this issue as this is not originally Toolset issue as this is pure customizations you want to implement as per your requirement.

You can always contact our certified patterns for your any custom programming requirement using the following link:
=> https://toolset.com/contractors/

[RensV5812]

I thought I resolved this ticket after the last message. Got it how I wanted it!

Thanks again,
Rens