Skip Navigation

[Resuelto] Apply own class to 'input' element

This support ticket is created hace 9 años, 4 meses. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Sun Mon Tue Wed Thu Fri Sat
- 10:00 – 19:00 10:00 – 19:00 10:00 – 19:00 10:00 – 19:00 10:00 – 19:00 -
- - - - - - -

Supporter timezone: Europe/Madrid (GMT+01:00)

This topic contains 16 respuestas, has 2 mensajes.

Last updated by willem-siebeS hace 9 años, 3 meses.

Assigned support staff: Caridad.

Autor
Mensajes
#142206

Hi,

How can I change the HTML output for a radio button?
For my review system I would like to make use of jquery and I have to add a new class to it.

So instead of:

<input type="radio" id="form-e2b582a242e702d6bca07adfdf1fc6f9-2" etc. etc.

I would like to have:

<input class="star" type="radio" id="form-e2b582a242e702d6bca07adfdf1fc6f9-2" etc. etc.

Kind regards,

Willem

#142212

Dear Willem,

You can pass a class argument to either the shortcode or the function:

wp-types.com/documentation/functions/

Please let me know if you are satisfied with my answer and if I can help you with any other questions you might have.

Regards,
Caridad

#142251

Hi,

I could not figured it out.

I can't find anywhere where I can add a class to all the input elements... can you give me the solution how to add the class "star" to all these input elements?

Kind regards,

Willem

#142491

Dear Willem,

Please explain how you are rendering the radio button so I can explain how to add the class.

Regards,
Caridad

#142497

Hi, see hidden link.

#143163

Dear Willem,

In this case, you need to add the class to the cred form, because the style editor you show me is for the post manager only.

Normally the input is inside a div:

<div class="star">
		[cred_field field="rating" post="vehicle" value=""]
</div>

You can style it with the parent selector:

div.star input {
  ...
}

Please let me know if you are satisfied with my answer and if I can help you with any other questions you might have.

Regards,
Caridad

#143173

Hi, That's not helping me. The javascript needs a class to the 5 radio buttons like I explained in de video. So on the page that is showing my cred form I need that class for the radiobuttons. There must be something possible I hope.

#143174
#143206

Dear Willem,

Only the cred_generic_field shortcode has a class attribute. I will forward a request to the developers for implementing this in next version.

Meanwhile you can use a cred_generic_field and save its value to the database in the cred_save_data hook:

https://toolset.com/documentation/user-guides/cred-api/

Please let me know if you are satisfied with my answer and if I can help you with any other questions you might have.

Regards,
Caridad

#143229

Hi Caridad, did you check out the link I gave you?

Your collegue provided a javascript to do exactly what I want to do, add a 'star' class to the input element.
However, I therefore need her javascript, and I agree this should be made a lot easier.

Please see my topic here: https://toolset.com/forums/topic/layout-cred-forms/

In cred you now have to choose between two styles, minimal and styled. There is no way that it is easy to manage with twitter bootstrap features, something I hoped because there is also a toolset bootstrap theme released. This already includes all CSS for forms, so the 'minimal' and 'styled' css are not needed if people work with the toolset bootstrap theme. So if we can be free in editing elements the shortcodes output, that would be really good for integration with twitter bootstrap, and, in this case also with a third party javascript that needs the class "star" on the input element.

So, that being said, can you help me with getting the javascript to work? For some reason I can't manage to 'activate' it because obviously the "star" class I added does not do anything. I already had a JS folder in my childtheme with a .js file with some custom JS for twitter bootstrap. However, this javascript file I can't enable, I tried 4 thing, see below:

function add_my_scripts() {
    wp_register_script('stars', get_stylesheet_directory_uri() . '/js/jquery.rating.pack.js');
    wp_enqueue_script('stars');
}
add_action('wp_enqueue_scripts', 'add_my_scripts'); // We are using the wp_enqueue_scripts function, and giving our function an arbitrary name of add_my_scripts
/* Stars jquery */

function my_toolset_bootstrap_childtheme_stars_jquery() {
    wp_enqueue_script('custom-script', get_stylesheet_directory_uri() . '/js/jquery.rating.pack.js');
}
add_action('wp_enqueue_scripts', 'my_toolset_bootstrap_childtheme_stars_jquery');
function my_toolset_bootstrap_childtheme_scripts_method() {
    wp_enqueue_script(
    'custom_script',
     get_stylesheet_directory_uri() . '/js/toolset-bootstrap-child.js',
    array('jquery')
    );
    wp_enqueue_script(
    'custom_script',
     get_stylesheet_directory_uri() . '/js/jquery.rating.pack.js',
    array('jquery')
    );
}
add_action('wp_enqueue_scripts', 'my_toolset_bootstrap_childtheme_scripts_method');
function my_toolset_bootstrap_childtheme_scripts_method() {
    wp_enqueue_script(
    'custom_script',
     get_stylesheet_directory_uri() . '/js/toolset-bootstrap-child.js',
    array('jquery')
    );
    wp_enqueue_script(
    'custom_script',
     get_stylesheet_directory_uri() . '/js/jquery.rating.pack.js',
    array('jquery')
    );
}
add_action('wp_enqueue_scripts', 'my_toolset_bootstrap_childtheme_scripts_method');

What am I doing wrong?

Kind regards,

Willem

#143231

Ok, well it seems that I did manage to get the JS in the source of the page:

<script type='text/javascript' src='<em><u>hidden link</u></em>;

However, the input buttons don't show as stars :-(. Do you have a clue why?

This is the plugin: hidden link
This is the page: hidden link [dot] nl/schrijf-review/

Kind regards,

Willem

#143239

Got it working I think :-), now solving some minor problems (i hope).

#143256

Ok,

I need some help. I just copied the javascript from the other topic I mentioned and changed the HTML, everything works, so that's good.
But here a video with some minor issues: hidden link. Hope you can help me out.

Also the stars are not 'required' anymore, so somebody can leave it empty, what is not a good thing ;-). Any ideas on that?

Kind regards,

Willem

#144369

Dear Willem,

I have tried following the video several times, but its very difficult to resolve the problem this way. Can you send me access to your site and the url where the form is?
Its better if you tell me what you expect to see and what you are actually seeing.

Regards,
Caridad

#144538

Hi Caridad,

Let's keep it simple and let us try to fix one thing first.
If you go to this page:

<em><u>hidden link</u></em> [DOT] nl/schrijf-review/?parent_page_id=17

On this page you can submit a review. The problem is, you can submit a review without giving it a rating.
In TVC, I gave the radio buttons the value 'required'. However, the javascript that transforms this radiobuttons into stars, probably don't listen to this...

Is that something what we can solve?

Kind regards,

Willem