单击 <a> 时动态更改 href 值

Question

这是 HTML 页面，我正在处理：

<div class="container">
    <form id="script-approval-form" action="" method="post">
        <h3 class="title-submitted">Script Approval</h3>
        <h5> Below you will find the script that needs to be approved before being used: </h5>
        <fieldset>
            <textarea id = "textarea-script-approval" class="textarea-approval"
                      type="textarea" tabindex="1" required autofocus></textarea>
        </fieldset>
        <fieldset>
            <input class="email-box" placeholder="Your Email Address (if clarification is needed)"
                   type="email" pattern=".+@COMPANY.com"
                   oninvalid="this.setCustomValidity('E-mail MUST end with @COMPANY.com')"
                   value="{{ user_info.email }}" tabindex="2" required>
            <button id = "what" class="submit-btn" type="submit"><a id = "submit-lnk" class="submit-link"
                                                        href = "#"
                                                        >
                                                        Submit for Approval</a>
            </button>
        </fieldset>
    </form>
    </div>

这是一个带有预填充文本区域和提交按钮的表单。文本区域会自动填充此 JS 脚本：

const url = window.location;
const urlObject = new URL(url);
const script = urlObject.searchParams.get('authorize')
var decodedScript = window.atob(script);
document.getElementById("textarea-script-approval").value = decodedScript;

它获取编码的 base64 URL 参数（示例：url.com/script_approval?authorize=DScdsaCs）并将其作为普通文本放在页面文本区域中。但是，如果用户单击提交按钮/链接，他将被发送到另一个页面。我还需要将文本形式的脚本传递到下一页，因此我必须：

• 获取当前文本区域值
• base64编码
• 将href链接更改为/script-sent?script=${encoded_string}
• 将使用相同的 URL 参数打开下一页
• 然后我将使用我的旧 JS 脚本解码并将字符串放入我的其他页面文本区域/输入位置

我尝试了什么：

<script>
       document.getElementById("submit-lnk").onclick = function() {
           var script=document.getElementById("textarea-script-approval").value;
           var encodedScript = window.btoa(script);
           document.getElementById("submit-lnk").href = `/script-sent?authorize=${encodedScript}`;
           return false;
           };
    </script>

我确定encodedScript 包含正确的值。当我更改href时，问题就出现了。即使其语法正确，页面也只是重新加载或没有任何反应。我测试了模板化的字符串，它也显示得很好。有人可以给我任何指导吗？谢谢！

Answer 1

您可以从按钮中删除锚标记。

<button id = "what" class="submit-btn" type="submit">
   <!-- remove this -->
   <a id = "submit-lnk" class="submit-link" href = "#">Submit for Approval</a>
</button>

您可以直接重定向到页面，而不是替换href

<script>
    document.getElementById("submit-lnk").onclick = function () {
        var script = document.getElementById("textarea-script-approval").value;
        var encodedScript = window.btoa(script);

        // instead of replacing the href you can simply redirect to the page directly
        window.location.href = `/script-sent?authorize=${encodedScript}`;

        return false;
    };
</script>

Answer 2

看起来表单上的操作是空白的。尝试在那里输入下一页的路径。

或者使用本地存储在浏览器缓存中传递数据。

Answer 3

你应该能够用 jQuery 做你需要做的事情

jQuery('#what').click(function(){
    jQuery('#script-approval-form').attr('action','insert link here');
    jQuery(this).click();
};