How can I save the value from my masked input to a sharepoint field?

Hello,

I would like to save the value I entered in my masked input into a sharepoint field (text field). It seems to have worked at the beginning. But when I want to view the entry, both values are empty.

image

This is my code:

fd.spRendered(function () {
fd.field('IBAN_2').value = fd.field('IBAN_x0020_1').value;
fd.field('IBAN_2').$on('change',function(value){
fd.field('IBAN_x0020_1').value = value;
});
And I have tried this one:

var text = fd.field('IBAN_2').value;
fd.field('IBAN_x0020_1').value = text;

I hope you can help me.
Best regards
Corinna

Hello, try either of the following codes below:

Code1:
fd.spRendered(function () {
        fd.field('IBAN_2').$on('change',function(value){
        fd.field('IBAN_x0020_1').value = fd.field('IBAN_2').value;
        })
});

Code 2:
       fd.spRendered(function () {
        fd.field('IBAN_2').$on('change',function(value){
        fd.field('IBAN_2').value = fd.field('IBAN_x0020_1').value;
	});
});

I came across the same issue in the past, I changed the field names around it started to work. If it still doesn't work, check the console for errors. It might be something else that's causing a problem.

Make sure you double check the internal field names as you might have put the wrong name.

Hello @Sternchen,

Yes, as @Qman mentioned it can be the invalid field name in the code.

Or you are using the Common field instead of the SharePoint field. Please share the screenshot of the field settings from the designer like so:
image

That is my sharepoint field:
image

This is my Common field:
image

I tried this code.

fd.field('IBAN_2').$on('change',function(value){
fd.field('IBAN_x0020_1').value = fd.field('IBAN_2').value;
})

But after I hit the save button both the IBAN 2 and 1 are empty.

I have now moved both fields to my first tab [0] and see that it now works. In tab [1] it did not work. What can be the reason for this?

@Sternchen,

That is strange. You can move fields to the second template and make the screenshot of the errors from the browser console(F12). It might show the root cause of the issue.

I have found another solution.
I moved the IBAN 1 field to tab[0] and hide it there. Now it works.
Not the best solution but for now it´s okay.
The field itself does not need to be displayed. The important thing is that the field is described in the list so that our API calls work.
Thank you for your help.

1 Like

@mnikitina,

Is there a way that I don't add the SP field in Plumsail and I can still store values in it? In this example I would like to remove IBAN_x0020_1. But the maskedinput should still be stored in.
Thats the code I use.

fd.field('IBAN').$on('change',function(value){
fd.field('IBAN_x0020_1').value = fd.field('IBAN').value;
})

$(fd.field('IBAN_x0020_1').$parent.$el).hide();

Currently I have the SP field in Plumsail, but I hide it via JavaScript. As soon as I remove the SP field from the Plumsail form, the content of the masked input is no longer stored.

Hello @Sternchen,

The field must be present on the form to change its value. Why do you want to remove the SharePoint field from the form? Users doesn't see the field on the form and can't change its value.

I was hoping there was a way to change the value of the SP field without it having to be active in the form.
Then the form would be tidier and some javascript code would be omitted.
But if that's not possible, I'll have to live with it.

@Sternchen,

Actually, you can update the value of a field if it is not on the form by using the PnP update function. But this will not make your form or code cleaner:

fd.field('Field1').$on('change', function(value) {
   pnp.sp.web.lists.getByTitle("ListName").items.getById(1).update({
          Title: value
   });
});

So I suggest keeping the field on the form.

@mnikitina,

In my case I want to store the value from the field IBAN1 (masked input) into my SP field IBAN. Both are on the same form.
How do I do this exactly with the code you sent me?

fd.field('IBAN1').$on('change', function(value) {
pnp.sp.web.lists.getByTitle("B2B").items.getById(1).update({
Title: value
});
});
B2B is the name of the sharepoint list.

Hello @Sternchen,

This code is for the case when the field is not on the form.

In your case, the field is on the form and you pass masked input field value to SharePoint field using the code:

fd.field('IBAN').$on('change',function(value){
fd.field('IBAN_x0020_1').value = fd.field('IBAN').value;
})

You can clean up your code by removing this line:

$(fd.field('IBAN_x0020_1').$parent.$el).hide();

Hide the SharePoint field by default. Add display: none; to the parent grid style property:
image

Hello @mnikitina,

"This code is for the case when the field is not on the form."
I know that, but I would like to try it out to see how it works when the field is not there. So that I know how it works in the future.

Thanks for your help.

@Sternchen,

You can try it out with the code:

var maskedValue = '';

fd.spRendered(function() {

    fd.field('MaskedText1').$on('change', function(value) {
        maskedValue = value;
        console.log(maskedValue);
    })

});

fd.spSaved(function(result) {
    var redirect = result.RedirectUrl;
    result.RedirectUrl = null;
    pnp.sp.web.lists.getByTitle('ListName').items.getById(result.Id).update({
        Title: maskedValue
    }).then(function() {
        console.log("Updated!");
        window.location.href = redirect;
    });
});

@mnikitina,

thank you that worked perfectly.

1 Like