I need help with some kind of wildcard use in my script

Hi I have a script that makes a field accept only numeric values and then gives an alert when someone tries to enter letters. This field is in a group that may be duplicated in the form. The field name is “text-15”. When the group gets duplicated, the new field of text-15 may be named something like “text-15-afkgevfgiuklhvlyiv”. The field always starts with “text-15” so a wildcard could be used but I don’t know anything about how to do this. Could someone help? I want to have this same function when the field is duplicated. My code is this:

<script type="text/javascript">
        $(document).ready(function() {
            $("#text-15").keypress(function (e) {
                if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
                    $('#number-message').addClass('d-block').removeClass('d-none');
                    return false;
                } else {
                    $('#number-message').addClass('d-none').removeClass('d-block');
                }
            });
        });
</script>
1 Like

You could add a class to the input and then just use that instead of the ID (assuming the class attribute is duplicated by your script).

Or you could use an attribute selector and check for a start value like this.

$(‘[id^=“text-15”]’).keypress etc…`

Or you could just… make the field a type='number'

2 Likes

With jquery you can use wildcards like this

$(‘[id^=text-’])

At least we agree :wink:

Except I didn’t need the inner quotes it seems :slight_smile:

1 Like

You can use the attribute starts with selector in jquery to select the element whose attribute starts with a certain value. In your case, you can use the code below to select all elements whose id starts with “text-15”:

$("[id^='text-15']").keypress(function (e) {
                if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
                    $('#number-message').addClass('d-block').removeClass('d-none');
                    return false;
                } else {
                    $('#number-message').addClass('d-none').removeClass('d-block');
                }
            });

This will select all elements with an id that starts with “text-15” regardless of the rest of the id. You can also use other selectors like “input[id^=‘text-15’]” if you want to select only input elements with the id starting with “text-15”

Additionally, it’s a good practice to wrap your code inside a function and call it when the new field is added to the form. That way, the function will be able to find the new element and attach the keypress event to it.

function attachEventToText15(){
  $("[id^='text-15']").keypress(function (e) {
                if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
                    $('#number-message').addClass('d-block').removeClass('d-none');
                    return false;
                } else {
                    $('#number-message').addClass('d-none').removeClass('d-block');
                }
            });
}

$(document).ready(function() {
   attachEventToText15();
});

You can also call this function whenever a new field is added to the form.

//call this function when new field is added
attachEventToText15();

Please note that this code is just an example and you may need to make adjustments to it depending on your specific use case and the HTML structure of your form.

So I replaced it with
$("[id^='text-15']")
and then duplicated the group. I checked and the new field starts with “text-15” but my alert doesn’t work when a letter is entered into the field.

Did you clone the event handlers when you duplicated the group of elements? Assuming you were using the jquery clone method to copy elements you just pass true to copy existing event handlers with the clone I.e. clone(true).

If you are creating new elements you would need to reinitialize the keypress handler when a new element is created (as mentioned in the post above yours). Or hook the jquery into a parent element that always exists and it will catch dynamically added elements automatically.

e.g.

  $("#myForm").on("keypress", '[id^="text-"]', function (event) {
      /* do stuff here */
  });

Rough demo.

I tried plugging in usamaererer’s code and then duplicated the group but my alert on the new text-15-xxxxxxxx still is not working.

function attachEventToText15(){
  $("[id^='text-15']").keypress(function (e) {
                if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
                    $('#number-message').addClass('d-block').removeClass('d-none');
                    return false;
                } else {
                    $('#number-message').addClass('d-none').removeClass('d-block');
                }
            });
}

$(document).ready(function() {
   attachEventToText15();
});

I gave you the solution why didn’t you choose mine first ? :slight_smile:

The solution you posted won’t work as you need to place the call to the keypress event (attachEventToText15();) in your duplication routine as well.

If you use the event delegation method I offered above Then you don’t need to touch the duplication routine.

If it still doesn’t work then you’ll need to post a demo of the problem on codepen or similar or show the full code so we can make a working copy.

I tried yours (PaulOB) first then all the above and still nothing. I get the alert with the first one but then when I duplicate the group and add a letter in the field, no alert.

And I’m not sure how to place it in the duplication routine. The wordpress form builder is forminator and the duplication is built in

Do you have a link to the page in question?

If it’s not accessible then can you post the relevant html for the section.

It would also be good if you could post the generated html after you have duplicated an item. You can do that by copying the html from the devtools page inspector.

If you look at my codepen you can see that the code works but it may be that your structure is different.

Yes. Here is the page: https://www.heritagebankna.com/new-cd-account-information-personal/
Its on the third step and the field is the SS#. When you enter a letter, you will notice the alert. I want to duplicate that alert when someone ads a beneficiary

You still have the old code in place but I can see that you are calling this message.

$('#number-message').addClass('d-block').removeClass('d-none');

However you are duplicating that message box also so you will not be able to find it by its id as you don’t change the id like you do with the text. It would be better if you found the new message box by its new location because even if the code updated the id you would not know what that new id would be.

You would need to identify the location from where the entry on the input was received.

The original fix assumed that there was only one message box.

I’m out this morning but will look back later if that doesn’t make sense.

It makes sense but I’m at a loss of how to do it.

In your page you don’t seem to be using text-15 for the inputs but a longer version (forminator-field-text-)

Your page is also in tabs which complicates things a little so I don’t know how well this approach will work but try this out instead of your other routine.


$("#content").on("keypress", '[id^="forminator-field-text-"]', function (e) {
  var el = $(this)
    .closest(".forminator-grouped-fields")
    .find("[id=number-message]");

  if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
    el.addClass("d-block").removeClass("d-none");
    return false;
  } else {
    el.addClass("d-none").removeClass("d-block");
  }
});

That seems to work on a reduced demo so hopefully it will work in situ :slight_smile:

That’s the ticket. Thanks for your help. Exactly what I want. I appreciate all your help.

1 Like