Question

[Forms] Find and replace text without breaking field rules?

Forms

Updated September 23, 2020

asked on September 20, 2020 • Show version history

Hi team,

I'm trying to bring a little more structure to some of the complex forms we're building, especially as they start growing beyond four or five pages, and exceed 100+ variables.

Those drop down menus behind the scenes (like the field rules pages) become quite a nightmare to navigate when you start piling on the fields and variables with similar names. So we've started prefixing field names with their sections to make it more manageable (e.g. [01], [02] etc).

All of our fields are pre-fixed based on their page in the form.. Since this form has 10 pages, the fields go up to 10. Sometimes there are pages and sections that are conditionally shown depending on whether a field has been selected or is true or not.

So, in an effort to improve the experience for both the designer and the end user I embarked on a little adventure to see if I could use Javascript to search and replace (to remove) the prefix from the front end.

I had some success pretty quickly..

The issue I'm finding now however, is that the associated field rules for these fields no longer work. So I'm curious to know whether or not I need to refine my search and replace somehow.

I was hoping someone may understand what I'm missing as the console displays no errors.

$(document).ready(function(){
    $("span").html(function() { return $(this).html().replace("[01]", ''); });
    $("span").html(function() { return $(this).html().replace("[01a]", ''); });
    $("span").html(function() { return $(this).html().replace("[01b]", ''); });
    $("span").html(function() { return $(this).html().replace("[01x]", ''); });
    $("span").html(function() { return $(this).html().replace("[02]", ''); });
});

Not shown above, similar code works for the section headers by using the following:

    $("h2").html(function() { return $(this).html().replace("[01a.]", ''); });

If anyone has come across something similar and/or is slightly more advanced with Javascript the help would be greatly appreciated.

Cheers!

0 0

Answer

SELECTED ANSWER

replied on September 22, 2020

If you want to stick with JavaScript, RegEx could help you avoid having to use multiple lines of code for all the different values.

Especially since each one would be running on every single matching element so you'd essentially be hitting them all multiple times.

$(document).ready(function(){
  $('.cf-label > span > span, div.cf-section-block > div.cf-section-header > h2').each(function(){
    $(this).html($(this).html().replace(/\[\w+\]/g, ''));
  });
});

This will just loop through both sets (the labels and the headers), and it will use regex to replace the values in square brackets with an empty string.

It should remove anything that meets the pattern:

[ + one or more from (A-Z, a-z, 0-9, or _) + ]

1 0

Replies

replied on September 21, 2020

@████████ when I did some initial searches to see if this had been asked before your name came up a lot when it came to getting forms and JavaScript to play well together. Do you think this is something you could provide guidance on?

0 0

View 2 previous replies

replied on September 22, 2020

If you want to avoid JavaScript, you can actually just add html tags to labels.

For example, you could add something like a comment or data tag that will be hidden automatically, you could add a simple tag like <i>[01a]</i> and hide it with CSS, and so on.

Designer:

Field Rules:

CSS (if you use any "visible" tags)

Preview/User View

1 0

replied on September 22, 2020

This is a great alternative! Thanks Jason.

0 0

SELECTED ANSWER

replied on September 22, 2020

If you want to stick with JavaScript, RegEx could help you avoid having to use multiple lines of code for all the different values.

Especially since each one would be running on every single matching element so you'd essentially be hitting them all multiple times.

$(document).ready(function(){
  $('.cf-label > span > span, div.cf-section-block > div.cf-section-header > h2').each(function(){
    $(this).html($(this).html().replace(/\[\w+\]/g, ''));
  });
});

This will just loop through both sets (the labels and the headers), and it will use regex to replace the values in square brackets with an empty string.

It should remove anything that meets the pattern:

[ + one or more from (A-Z, a-z, 0-9, or _) + ]

1 0

replied on September 23, 2020

Thanks Jason, this is a seriously clean solution!

I made a few modifications to your RegEx as I wanted to target [01], [01.], [01a] and [01a.] to avoid any unintentional replacements.

$(document).ready(function(){
  $('.cf-label > span > span, div.cf-section-block > div.cf-section-header > h2').each(function(){
    $(this).html($(this).html().replace(/\[\d+\]|\[\d+\w\]|\[\d+\.\]|\[\d+\w\.\]/g, ''));
  });
});

Again, many thanks! I've marked your reply as the answer.

0 0

replied on September 23, 2020

If you want to make it more specific to avoid unintentional matches, rather than adding all the different patterns separately, you can just use the more specific character identifiers in combination with quantifiers.

For example,

/\[\d{1,2}[a-zA-Z]{0,1}\.{0,1}\]/g

[ + (1 or 2 Digits) + (0 or 1 Letters) + (0 or 1 Periods) + ]

/\[\d+\w*\.*\]/g

[ + (one or more Digits) + (0 or more Word Characters) + (0 or more Periods) + ]

These should all work for the patterns you described. I'd just recommend against the long complex "this" or "this" or "this" type pattern with a lot of repetition because it gets hard to read and manage if you ever need to make changes.

1 0

replied on September 21, 2020

It may be too early to say, but it seems I just needed to target the fields more precisely. Field rules seem to be working again now, and the front-end form looks super clean and user friendly!

$(document).ready(function() {
    $("label.cf-label > span > span").html(function() {
        return $(this).html().replace("[01]", '');
    });
    $("label.cf-label > span > span").html(function() {
        return $(this).html().replace("[01a]", '');
    });
    $("label.cf-label > span > span").html(function() {
        return $(this).html().replace("[01b]", '');
    });
    $("div.cf-section-block > div.cf-section-header > h2").html(function() {
        return $(this).html().replace("[01.]", '');
    });
    $("div.cf-section-block > div.cf-section-header > h2").html(function() {
        return $(this).html().replace("[01a.]", '');
    });
    $("div.cf-section-block > div.cf-section-header > h2").html(function() {
        return $(this).html().replace("[01b.]", '');
    });
 });

I also included the way to target section headers (h2).

Hope this helps someone else out. :)

0 0

You are not allowed to follow up in this post.

Question

Question

[Forms] Find and replace text without breaking field rules?

Answer

Replies

Sign in to reply to this post.