[Resolved] Plus minus input in CRED form

[Author]

Posts

[toolset-dave]

Hi,

is there any option, how to make plus minus input for CRED forms?

[Nigel]

Hi Dave

It is not something supported by CRED, though you could add it using a 3rd-party JavaScript library easily enough.

You would add a text input to the form and then initialise the library for that element. The precise steps would depend very much on the library you choose. I expect if you google you'll find many. Here's the first one I found that looks a good candidate, with detailed instructions: hidden link

You'll need to add the JS that initiates the library in the custom JS editor on your CRED form, and you will need to enqueue the library JS and CSS files correctly (https://developer.wordpress.org/themes/basics/including-css-javascript/).

If you try and run into problems let me know (and let me know which library you are using).

[toolset-dave]

Hi Nigel,

I have found the same plus minus solution 🙂 and succesfully placed it on my CRED form followed the steps shown in document. But how can I connect it with CRED field?

	<div class="form-group">
		<label>Amount</label>
		[cred_field field='amount' post='my-cpt' value='' urlparam='' class='form-control' output='bootstrap']
	</div>

Counter:

<div class="handle-counter" id="handleCounter">
  <button class="counter-minus btn btn-primary">-</button>
  <input type="text" value="1">
  <button class="counter-plus btn btn-primary">+</button>
</div>

[Nigel]

The cred_field shortcode will wrap the input in a div so you will need to do some DOM manipulation to match the format shown in the documentation, with button input button before you initialise the counter library.

If I were doing this I would add the HTML for both buttons to my form immediately after the cred_field shortcode, then move those buttons to the required positions in the DOM inside the wrapper div, using something like jQuery's insertAfter()
(hidden link).

And you will probably want to set an initial value for the field in the cred_field shortcode.