0

I want to access the javascript object property with a keyword in it:

 var cloneIndex = $(".clonedInput").length + 1; $(document).on("click", 'button.clone', function (e) { e.preventDefault(); $(this).closest(".clonedInput").clone().insertAfter(".clonedInput:last").attr("id", "clonedInput" + cloneIndex).find("[id], [name] ,[data-valmsg-for]").each( function () { this.id = this.id.replace(/\d+$/, cloneIndex); this.name = this.name.replace(/\d/, cloneIndex); this.data-valmsg-for = this.data-valmsg-for.replace(/\d/, cloneIndex); }); cloneIndex++; });

But because of the line:

this.data-valmsg-for = this.data-valmsg-for.replace(/\d/, cloneIndex);

That has:

 this.data-valmsg-for

It throws an error because "for" in data-valmsg-for is a keyword. Also when I changed:

 this.data-valmsg-for

To:

this['data-valmsg-for'] = this['data-valmsg-for'].replace(/\d/, cloneIndex);

Script throws this error:

Uncaught TypeError: Cannot read property 'replace' of undefined

Also when I changed:

 this.data-valmsg-for

To:

this.setAttribute('data-valmsg-for',this.getAttribute('data-valmsg-for').replace(/\d/, cloneIndex));

Script throws this error:

Uncaught TypeError: Cannot read property 'replace' of null

And this is my html:

<div id="clonedInput1" class="form-group clonedInput"> <input id="CompanyId1" name="[0].CompanyId" type="hidden" value=""> <label class="control-label col-md-2" for="NationalCode">کد ملی</label> <div class="col-md-3"> <input class="form-control text-box single-line" data-val="true" data-val-regex="فرمت کد ملی صحیح نمی باشد" data-val-regex-pattern="^[0-9]{10}$" @*data-val-remote="'کد ملی' is invalid." data-val-remote-additionalfields="*.NationalCode,*.initialNationalCode" data-val-remote-url="/Account/IsValidNationalCode"*@ data-val-required="وارد کردن کد ملی اجباریست" id="NationalCode1" name="[0].NationalCode" type="text" value=""> <span class="field-validation-valid text-danger" data-valmsg-for="[0].NationalCode" data-valmsg-replace="true"></span> </div> <label class="control-label col-md-2" for="BirthDate">BirthDate</label> <div class="col-md-3"> <input class="form-control text-box single-line" data-val="true" data-val-date="The field BirthDate must be a date." data-val-required="The BirthDate field is required." id="BirthDate1" name="[0].BirthDate" type="date" value=""> <span class="field-validation-valid text-danger" data-valmsg-for="[0].BirthDate" data-valmsg-replace="true"></span> </div> </div>

Improve this question
6
  • You do have to use the [ ] notation, and you have to check to see whether the properties exist. Commented Feb 3, 2016 at 5:56
  • 1
    The problem is not the for. The problem is primarily the -. this.data-valmsg-for means this.data minus valmsg minus for. "Cannot read property 'replace' of undefined" means that the property doesn't exist. If the property was just for, then this.for would work perfectly fine. Commented Feb 3, 2016 at 6:01
  • Given that this is a DOM element, you are looking for this.getAttribute('data-valmsg-for'). Commented Feb 3, 2016 at 6:04
  • This is erratically marked as a duplicate by Felix. The OP clearly says that he still has got an error when using [] notation. The so called duplicate only address the issue of [] notation. Commented Feb 3, 2016 at 6:04
  • 1
    Duplicate of Get data attribute. Commented Feb 3, 2016 at 6:08

1 Answer 1

Reset to default
0

It throws an error because "for" in data-valmsg-for is a keyword.

No, it throws an error because you are subtracting for from valmsg from this.data. this.data-valmsg-for is interpreted as this.data - valmsg - for.

It seems the problem you are trying to solve is updating the data property of a DOM element. There are multiple ways to do this. The most basic one is to read the attribute with getAttribute and set it with setAttribute:

this.setAttribute( 'data-valmsg-for', this.getAttribute('data-valmsg-for').replace(/\d/, cloneIndex) );
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Or rather, use this.dataset.valmsgFor :-)
Those fancy new APIs....
Script throws this error:Script Uncaught TypeError: Cannot read property 'replace' of null
@HamedAz If getAttribute returns null, then the element doesn't have such an attribute. Since you are selecting elements that either have an id attribute or a name attribute or a data-valmsg-for attribute, you have to check for every attribute / property, whether it exists or not before you are trying to do something with the value.
You're right. Thanks

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.