[Resolved] JQuery for multiple fields number

[Author]

Posts

[FelipeP5703]

Tell us what you are trying to do?

I have a code that would style the number field into a phone number in CRED form, meaning if the user puts a number as 2199556677, it would automatically style to (21) 9955-6677, which is working fine if the field is not repeatable.

But if the field is repeatable, it only styles the first one. How do I make every additional field stylish as the first one?

fixo is my slug for the repeatable number field

Here is the code:

jQuery(function($) {
$('.fixo').on('keypress', function(e) {
  var key = e.charCode || e.keyCode || 0;
  var phone = $(this);
  if (phone.val().length === 0) {
    phone.val(phone.val() + '(');
  }
  // Auto-format- do not expose the mask as the user begins to type
  if (key !== 8 && key !== 9) {
    if (phone.val().length === 3) {
      phone.val(phone.val() + ')');
    }
    if (phone.val().length === 4) {
      phone.val(phone.val() + ' ');
    }
    if (phone.val().length === 9) {
      phone.val(phone.val() + '-');
    }
    if (phone.val().length >= 14) {
      phone.val(phone.val().slice(0, 13));
    }
  }

  // Allow numeric (and tab, backspace, delete) keys only
  return (key == 8 ||
    key == 9 ||
    key == 46 ||
    (key >= 48 && key <= 57) ||
    (key >= 96 && key <= 105));
})

.on('focus', function() {
  phone = $(this);

  if (phone.val().length === 0) {
    phone.val('(');
  } else {
    var val = phone.val();
    phone.val('').val(val); // Ensure cursor remains at the end
  }
})

.on('blur', function() {
  $phone = $(this);

  if ($phone.val() === '(') {
    $phone.val('');
  }
});
});

[Luo Yang]

Hello,

For those new items, please try the JS event "toolset_repetitive_field_added", for example, you can modify your JS codes as below and test again:

jQuery(document).on( "toolset_repetitive_field_added", function() {
    myFunction();
});
myFunction();

function myFunction() {
  jQuery(function($) {
$("input[name^='wpcf-fixo']").on('keypress', function(e) {
  var key = e.charCode || e.keyCode || 0;
  var phone = $(this);
  if (phone.val().length === 0) {
    phone.val(phone.val() + '(');
  }
  // Auto-format- do not expose the mask as the user begins to type
  if (key !== 8 && key !== 9) {
    if (phone.val().length === 3) {
      phone.val(phone.val() + ')');
    }
    if (phone.val().length === 4) {
      phone.val(phone.val() + ' ');
    }
    if (phone.val().length === 9) {
      phone.val(phone.val() + '-');
    }
    if (phone.val().length >= 14) {
      phone.val(phone.val().slice(0, 13));
    }
  }
 
  // Allow numeric (and tab, backspace, delete) keys only
  return (key == 8 ||
    key == 9 ||
    key == 46 ||
    (key >= 48 && key <= 57) ||
    (key >= 96 && key <= 105));
})
 
.on('focus', function() {
  phone = $(this);
 
  if (phone.val().length === 0) {
    phone.val('(');
  } else {
    var val = phone.val();
    phone.val('').val(val); // Ensure cursor remains at the end
  }
})
 
.on('blur', function() {
  $phone = $(this);
 
  if ($phone.val() === '(') {
    $phone.val('');
  }
});
});
}  

[FelipeP5703]

Works great, thank you but a quick question: hidden link

As you can see in the video, the "Add new" button disappears if I delete the field. I'm not sure if it has to do with the limiting JS code below:

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

[Luo Yang]

Yes, I think so, it should due to the JS codes you mentioned above, you can simply remove those JS codes, and test again.

[FelipeP5703]

But Luo, I need to limit how many phone numbers the customer can add. Toolset should have a min and max number of repeatable fields in the settings when creating a repeatable field.

Since it does not, how do I limit the number of phone numbers the customer can add without "hiding" the option?

[Luo Yang]

For the new question:
how do I limit the number of phone numbers the customer can add without "hiding" the option?

It needs custom JS codes, I can get your website credentials in your another thread:
https://toolset.com/forums/topic/array-for-repeating-field/

Where I can see the problem as your video capture:
hidden link

Please point out the problem page/post URL? I need to test it in a live website, thanks

[FelipeP5703]

Lou, I have assigned a custom post named "Felipe" to your login. But the form is Post Form ID 29, when you login, go to hidden link

In the custom field named "Fixo" you will see "Add New" ... click it, it should give you and option to put the other number. Then click the trash can or the X to remove the second option and you will see that the Add New does not come back.

This is the code I have to hide it. I want to limit to 2 numbers.

//Função para limitar 2 telefones fixos
jQuery(function($) {
    $(".limit-to-2 .js-wpt-repadd").click(function(event) {
        $length = this.parentNode.childNodes.length;
        if ($length >= 2) {
            $(this).hide();
        }
    });
});

[Luo Yang]

Thanks for the details, I have done below modifications in your website:
Edit the post form "Formulário de Anúncio":
hidden link
in "JS editor", line 58~63, add below JS codes:

jQuery(document).on('click', '.limit-to-2 .js-wpt-repdelete', function (e) {
  var length = jQuery(this).parents('.js-wpt-field-items').children('.wpt-repctl').length;
  if (length <= 2) {
    jQuery(this).parents('.js-wpt-field-items').children( '.js-wpt-repadd').show();
  }
});

You can test it in front-end here:
hidden link
in field "Fixo", click link "Add new", then remove an instance, the "Add new" link will be able to display again

[FelipeP5703]

Worked like a charm! My issue is resolved now. Thank you!