Getting field to automatically add %20 in spaces in a URL

Question

so I'm hoping someone can help. I have a text field on my page which is pulling a variable in from Active Campaign which is the company name, and turning it into a URL on my page:

https://www.vitaldocuments.co.uk/referral-link/?company=%COMPANY%

However, as you can see the variable being pulled in will have spaces in, which is fine in that it's a workable link if they copy and past it, as it will automatically add in %20 into the spaces, but I want these to be added within the text box itself so it shows it as the actual URL here. Is this possible?

Here's the code I'm using:

<script>
    document.querySelectorAll(".copy-link").forEach((copyLinkParent) => {
        const inputField = copyLinkParent.querySelector(".copy-link-input");
        const copyButton = copyLinkParent.querySelector(".copy-link-button");
        const text = inputField.value;

        inputField.addEventListener("focus", () => inputField.select());

        copyButton.addEventListener("click", () => {
            inputField.select();
            navigator.clipboard.writeText(text);

            inputField.value = "Copied!";
            setTimeout(() => (inputField.value = text), 2000);
        });
    });
</script>

-->

I've tried the script as is, but it hasn't worked out right.

Of course. Why not use some string replacement for that? – Nico Haase Feb 07 '23 at 12:48 — Nico Haase, Feb 07 '23 at 12:48

score 2 · Answer 1 · answered Feb 07 '23 at 13:06

2

I believe You can simply use the encodeURI() method and apply it to the string of your text field

answered Feb 07 '23 at 13:06

Jacopo

143
1
1
10

score 0 · Answer 2 · answered Feb 07 '23 at 13:05

DOM values don't react try this:

     document.querySelectorAll(".copy-link").forEach((copyLinkParent) => {
        const inputField = copyLinkParent.querySelector(".copy-link-input");
        const copyButton = copyLinkParent.querySelector(".copy-link-button");
-       const text = inputField.value;

        inputField.addEventListener("focus", () => inputField.select());

        copyButton.addEventListener("click", () => {
+           const text = inputField.value;

            inputField.select();
            navigator.clipboard.writeText(text);

            inputField.value = "Copied!";
            setTimeout(() => (inputField.value = text), 2000);
        });
    });

Note: i'm pretty sure the copy button won't work on mobile you need a different code but that's beyond the scope of this question

I pasted this in place of my script but it didn't seem to work :( — Melanie Clarke, Feb 07 '23 at 13:40
you must remove the line with `-` and add the line with `+` in your code, not copy it this is a diff — Tachibana Shin, Feb 07 '23 at 14:32
Ah okay, thanks. I made those changes but it's still not made a difference — Melanie Clarke, Feb 07 '23 at 15:17

Getting field to automatically add %20 in spaces in a URL

2 Answers2