Topic: Issue with Input Mask
I am working with the input mask component, and I have an issue I can't fix. I have added a form input field using the input mask component like so:
<div class="col">
<div class="form-group">
<label class="form-label" for="tbTaxNo">EIN/SSN No.</label>
<input type="text" id="tbTaxNo" data-mdb-input-mask-init data-mdb-input-mask="99-9999999" data-mdb-mask-placeholder="true" name="tbTaxNo" class="form-control" required />
</div>
</div>
I am using an AJAX call to load a record an populate the form, and here is how I am loading the input control above:
$("#tbTaxNo").val(data.TaxIDNo);
There are a couple problems. First, the control doesn't apply the input mask to the data I load into the control. Second, if I click into the field, the existing value disappears and shows the input mask, then the field goes blank when I leave it.
How can I fix these issues?
If you add an input mask with AJAX you need to init it with JS since auto inits are performed on page load.
If you want to set a value after the form is initiated you need to additionaly trigger input event after setting its value.
https://mdbootstrap.com/snippets/standard/kpienkowska/5841052
DashMarketingGroup priority commented 1 year ago
That worked. Thank you! It might be a good idea to add this to your documentation to help other people who also want to dynamically load masked input field values. Thanks!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 7.0.0
- Device: Laptop
- Browser: Chrome
- OS: Win 11
- Provided sample code: No
- Provided link: No