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:
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”:
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.
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 */
});
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.
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.
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.
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
