How to set input field maxlength from label

Question

I'm trying to figure out a way to change the maxlength of ajax called input fields by pulling the value to set out of the field's label and updating the default value. The field labels all follow the same format - id, class, type and maxlength. The new maxlength value to set is always present in the id ...max_X_characters...

`<input id="ecwid-productoption-16958710-Line_5_:0028max_4_characters:0029" class="gwt-
TextBox ecwid-productBrowser-details-optionTextField ecwid-productoption-
Line_5_:0028max_4_characters:0029" type="text" maxlength="200"></input>`

So in this example I need to set the maxlength to 4.

The other problem is that there are multiple input fields, often with different maxlength values. See here for an example.

I was thinking of setting a script to pull out the value once the fields have loaded, but I don't mind admitting it, this one's over my head - hopefully one of you bright guys n gals can figure it out!

Update: Thanks for the suggestions, I've tried both, in various combinations, but can't get them to work.

Here's the code suggested by Ecwid's tech team that sets all input fields on the page to one maxlength (6 in this case)

 `Ecwid.OnPageLoaded.add(function(page){if (page.type == "PRODUCT") {  
 $("input.ecwid-productBrowser-details-optionTextField").attr('maxlength','6');
 };
 })`

However, as I stated there are input fields with different maxlengths for some products.

I've tried replacing the '6' above with a function, based on your suggestions, to get the maxlength from the input id, but can't get it to work.

Any more ideas?

Thanks

Update:

Cracked it (nearly), here's the working code

`Ecwid.OnPageLoaded.add(function(page){
 var regex = new RegExp("max_(\\d+)_characters");
 var inputs = document.getElementsByTagName("input");
 for (var i = 0; i < inputs.length; i++) {
 var inp = inputs[i];
 if (regex.test(inp.id)) {
    var newLimit = inp.id.match(regex)[1];
    inp.maxLength = newLimit;
 }        
 }
 });`

Thanks so much for your help, it works like a dream on the product page but there is another area where it doesn't. A customer can edit the input text via a pop-up, from the shopping basket.

The fields have similar code:

`<input id="ecwid-productoption-16958710-Line_5_:0028max_4_characters:0029"
class="gwt-TextBox ecwid-productBrowser-details-optionTextField ecwid-productoption-
Line_5_:0028max_4_characters:0029" type="text" maxlength="200"></input>`

Suggestions very welcome

Chris

UPDATE:

Many, many, many thanks to ExpertSystem (you genius you!) - I think we've got it. (tested on IE10, firefox 21, chrome 27).

The code below is for people using Yola and Ecwid together, but I guess the original code may work for people using other sitebuilders. It limits the number of characters a user can enter into input fields, in Ecwid, by checking for a number in the input field's title (in this case the value between 'max' and 'characters') and replacing that as the field's maxLength value. It limits fields in the product browser, in the html widgets and in the cart pop-up.

Here it is:

Go to Yola's Custom Site Tracking Code section. In the 'Footer Code' column (actually placed at the bottom of the 'body'), place this code:

<script>
Ecwid.OnPageLoaded.add(function(page){
var regex = new RegExp("max_(\\d+)_characters");
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
    var inp = inputs[i];
    if (regex.test(inp.id)) {
        var newLimit = inp.id.match(regex)[1];
        inp.maxLength = newLimit;
}        
}
});
</script>

<script>
var regex = new RegExp("max_(\\d+)_characters");
function fixMaxLength(container) {
    var inputs = container.getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++) {
        var inp = inputs[i];
        if (regex.test(inp.id)) {
            var newLimit = inp.id.match(regex)[1];
            inp.maxLength = newLimit;
        }
    }
};
</script>

and this into the 'Header Code' column:

<script>
document.addEventListener("DOMNodeInserted", function() {
    var popups = document.getElementsByClassName("popupContent");
    for (var i = 0; i < popups.length; i++) {
        fixMaxLength(popups[i]);
    }
});
</script>

That's it! You're good to go.

Answer 1

It is not exactly clear what is meant by "ajax called input fields", but supposing that the input fields are created and added to DOM inside a success callback for some AJAX call, you can place the following piece of code in your pages <head>:

var regex = new RegExp("max_(\\d+)_characters");
function fixMaxLength(container) {
    var inputs = container.getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++) {
        var inp = inputs[i];
        if (regex.test(inp.id)) {
            var newLimit = inp.id.match(regex)[1];
            inp.maxLength = newLimit;
        }
    }
}

And then, at the end of the AJAX call's "onSuccess" callback, append this:

fixMaxLength(document);

UPDATE:
Based on your comments below, if you need to apply fixMaxLength() to div's of class "popupContent", which get dynamically added to your DOM, an easy way (not the most efficient though) would be adding a listener for DOM modification events (e.g. somewhere in <head>):

document.addEventListener("DOMNodeInserted", function() {
    var popups = document.getElementsByClassName("popupContent");
    for (var i = 0; i < popups.length; i++) {
        fixMaxLength(popups[i]);
    }
});

(NOTE: I have only tested it on latest versions of Chrome and Firefox, so I am not really sure for which other/older browsers this does work.)
(NOTE2: GGGS, has tested it (and found it working) on IE10 as well.)

Answer 2

How about a regular expression on your id attribute? Such as the following:

jQuery('input').each(function() {
    var idVal = jQuery(this).attr('id');
    var regex = /max_(\d+)_characters/g;
    var result = regex.exec(idVal);
    var length = result[1];
});

This is a loop over all the inputs. Once this is run, the length variable will have the proper length each go through, for your next step.