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），并将其作为普通文本放在页面textarea中。但是，如果用户单击“提交”按钮/链接，他将被发送到另一个页面。我还需要将文本形式的脚本传递到下一页，因此，出于这个原因，我必须：

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

我尝试过的事情：

<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();
};

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

3 个答案: