[Resolved] Limit number of instances of custom fields that can be added in a form

[Author]

Posts

[khalidK]

I want to limit the number of repeating instances for two different fields.

I'm using the code from the following link
https://toolset.com/forums/topic/limit-mumbr-of-instances-of-multiple-repeating-fields/

jQuery(function( $ ) {
$(".js-wpt-repadd").click(function( event ) {
$length = this.parentNode.childNodes.length;
if($length>=5) {
$(this).hide();
}
});
});

This however is assigning the same limit to all fields.

What I want to do is assign different limits to each field

For example:
field='member-email'
Maximum number of repeating instances = 3

field='procedures-1'
Maximum number of repeating instances = 5

How can I do that?

[Nigel]

Hi Khalid

The selector ".js-wpt-repadd" isn't specific enough, it is targeting all of the add new buttons.

You just need to narrow the scope, and the easiest way to do that is to edit the Form where you include these fields and add a class to the container div, e.g. here I add a "limit-to-3" class

	<div class="form-group limit-to-3">
		<label>Owner</label>
		[cred_field field="owner" force_type="field" class="form-control" output="bootstrap"]
	</div>

You can see in the screenshot the generated markup, and it should be clear that I can target just that add new button by changing the selector in the code example you provided to

$("limit-to-3 .js-wpt-repadd")...

You can do the same for the field you want to limit to 5. (Just duplicate the existing code and change the selector; if you were doing anything more complex it would be worth creating a custom function that handled different numbers.)

[khalidK]

I tried the above, it didn't work as expected

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h3 class="display-4">[wpml-string context='science-submission-form']Procedures[/wpml-string]</h3>
    <p class="lead">
      [wpml-string context='science-submission-form']This section should describe the experimental procedures the student(s) carried out, and all the steps used to manufacture the prototype if applicable. Keep in mind the value of diagrams, flow charts, and illustrations[/wpml-string]
    </p>
    <div class="form-group limit-to-5">
          [toolset_access role="Administrator,Teacher,School Staff,MOE Employee" operator="allow"]
          [cred_field field='procedures-1' force_type='field' class='form-control' output='bootstrap']
          [/toolset_access]
	</div>
  </div>
</div>

jQuery(function( $ ) {
   $("limit-to-5 .js-wpt-repadd").click(function( event ) {
    $length = this.parentNode.childNodes.length;
    if($length>=5) {
     $(this).hide();
  }
});
});

[Nigel]

You are missing the . on .limit-to-5 to signify a class in your jQuery selector (my fault, I missed it in my example):

$(".limit-to-5 .js-wpt-repadd").click(function( event ) {

Do you want to try again?

[khalidK]

My issue is resolved now. Thank you!