Copy the value from #input1 to #input2 and write it to the database

[Loki2k3]

Hello,

I’m experiencing issues with CMS databases and Velo code programming.

The value from the left input field is being captured, but it isn’t writing to the database.

In the first part of the video, I input a value on the left, which is supposed to be transferred to the right field. It does so successfully. However, it does not write this value to the database.

In the second part, when I only input a value into the right field, it writes to the database.

I have tried many different approaches, but it simply does not write the value it retrieves from another field into the database. For some reason, it just doesn’t work.

Below is my code:

$w.onReady(function () {
    const handleInputChange = () => {
        const input1Value = $w('#input1').value.trim();
        console.log("Input1 value:", input1Value);

        $w('#input2').value = input1Value;

        console.log("Input2 value after update:", $w('#input2').value);
    };

        $w('#input1').onChange(handleInputChange);    
});

Is the mistake on my end, or is this a WIX error?

[Pratham]

Everything’s perfect, just add

$w('#input2').focus();

after

$w('#input2').value = input1Value;

Unable to Retrieve Input Value

No actually its not a dynamic page issue, it is apparently a bug with all input fields. So unless the user takes their cursor over the input box and clicks on it, the input does not consider it as the value you’ve set by code. I was facing the same issue but I managed to solve it using a simple workaround. Try calling the $w('#input').focus(); after assigning a value to the input or before reading the value of that input. This should solve the issue.

[Loki2k3]

Thank you for your response, Pratham. I tried both variants, before and after the value was adopted. The database field remains empty.

TEST 1:

$w.onReady(function () {
    const handleInputChange = () => {
        const input1Value = $w('#input1').value.trim();
        console.log("Input1 value:", input1Value);
                $w('#input2').value = input1Value;
        $w('#input2').focus();

        console.log("Input2 value after update:", $w('#input2').value);
    };

    $w('#input1').onChange(handleInputChange);
});

TEST 2:

$w.onReady(function () {
    const handleInputChange = () => {
        const input1Value = $w('#input1').value.trim();
        console.log("Input1 value:", input1Value);
                $w('#input2').focus();
                $w('#input2').value = input1Value;
        

        console.log("Input2 value after update:", $w('#input2').value);
    };

    $w('#input1').onChange(handleInputChange);
});

Look this Video… https://youtu.be/5jLeI8ZCDGk

Only if I manually add a space or a letter again, the value is accepted.
Simply clicking on the input field does not bring any improvement for me.

[Loki2k3]

One more thing.

When working with a form and input fields, it works without any problems. Strange…

But that doesn’t help me in this case right now

[Pratham]

@Loki2k3

Only if I manually add a space or a letter again, the value is accepted.

Yes, that is because you added $w('#input2').focus(); before $w('#input2').value = input1Value; and not after, like I had told you to

Don’t worry I’ve included the whole code below so you can just copy paste it.

Also one more thing that I’d recommend is to use onInput instead of onChange. This is just to be sure in case the user directly clicks on the submit button while their cursor is still in the input box, there is a chance that the onChange event may not be fired at all. So here’s the updated code, this should work perfectly:

$w.onReady(function () {

    const handleInputChange = () => {
        const input1Value = $w('#input1').value.trim();
        $w('#input2').value = input1Value;
        $w('#input2').focus();
    };

    $w('#input1').onInput(handleInputChange);
});

[Loki2k3]

Pratham, thank you once again for taking the time and sharing your knowledge.

I’ve copied the code exactly as you provided. When using onInput, it jumps directly to the second cell even though I’m not done typing.

Changing it to onChange prevents this, but then it doesn’t write anything to the database again.

I’m using the Wix Editor. Are you using the same or are you working with Wix Studio? Maybe that’s causing the issue? It’s really frustrating because the code should work, but it seems like there might be something off with the input field on Wix’s end, I believe…

Video= https://youtu.be/AtencsvY98s

[Pratham]

Hi again,

And thanks to you too for creating the screen recordings and uploading it to YouTube describing the issue. I don’t know why your posts got flagged though, since the Wix Forum itself does not allow sharing videos files.

Coming back to the issue -

@Loki2k3

When using onInput, it jumps directly to the second cell even though I’m not done typing.

That’s something I totally overlooked, apologies for that.

@Loki2k3

I’m using the Wix Editor. Are you using the same or are you working with Wix Studio? Maybe that’s causing the issue? It’s really frustrating because the code should work, but it seems like there might be something off with the input field on Wix’s end, I believe…

I wasn’t trying it out on my end yet, since this seemed to be a very straightforward bit of code, but because it did not work, I created a test page on my end to replicate the issue and guess what - I’m facing the exact same problem. I tried many different approaches using onBlur, onChange, onInput… but nothing seems to work. I am getting a blank entry just like you. So this is definitely something wrong at Wix’s end.

But the good news is I’ve come up with an alternate way to achieve this, and that is to intercept the dataset directly, bypassing the input field altogether. For this you will have to disconnect the second input field as we will not be using this to submit data, but just as a visual feedback. The code is fairly simple and will directly assign the value to the particular field as you type it in input1. This works like a charm.

$w.onReady(function () {
    $w('#input1').onInput(() => {
        $w("#dataset1").setFieldValue("title", $w('#input1').value.trim());
        $w('#input2').value = $w('#input1').value.trim();
    });
});

Here’s the page that I created in the classic editor, that uses the above code:

Multi-input fields

Couple of things to note:

• Make sure the second input field is no longer connected to the dataset.
• Make sure your Dataset ID is correct, especially when you have multiple datasets on the page.
• “title” is the Field ID of the particular column in the CMS. You will see it if you have Dev Mode turned on. In case you want to link this to another column, simply replace title with the ID of the respective field as shown below:

[Loki2k3]

Yes, I also don’t know why the posts were marked, using videos can visualize issues much better.

That’s fantastic, Pratham! It works.

I have also written to WIX about this. Maybe they will fix it in the future. But your code bypasses this error flawlessly, and it also means I need significantly fewer input fields for my project.

!!! Thank you, Pratham !!!

[Pratham]

Happy to help! Cheers

[Loki2k3]

Hi Pratham, I reported the bug to Wix. That is the answer. Can you explain to me what they mean by that?

[Pratham]

It’s basically telling us to do what we just did.

So this proves that input fields connected to a dataset cannot have their value edited by just changing the value of the input fields. But when you’re using wix-data instead of a dataset, that works absolutely well.

Nevertheless, I’ll keep this in mind. Thanks for sharing this Michael! (:

[Loki2k3]

Sure, Pratham.

I tested something else. If you integrate the fields into a form and then take the value using “handleInputChange” and submit the form at the end, it transfers the values to the CMS. Outside of the form, it only works using your method.

Best regards, Michael