时间戳

首页 > 解决方案 > 隐藏按钮并显示重定向文本

html - 隐藏按钮并显示重定向文本

问题描述

我有这个简单的提交表单，我从 Spring Endpoint 发送到用户的浏览器：

<html>
   <head>
      <meta HTTP-EQUIV="Content-Type" content="text/html; charset=UTF-8" />
      <meta HTTP-EQUIV="Cache-Control" CONTENT="no cache" />
      <meta HTTP-EQUIV="Pragma" CONTENT="no cache" />
      <meta HTTP-EQUIV="Expires" CONTENT="0" />
   </head>
   <body OnLoad="AutoSubmitForm();">
      <form name="downloadForm" action="AcsUrl" method="POST">
         <input type="hidden" name="PaReq" value="PaReq" />
         <input type="hidden" name="TermUrl" value="TermUrl" />
         <input type="hidden" name="MD" value="optionalValue" />
         <SCRIPT LANGUAGE="Javascript">
            AutoSubmitForm() { document.downloadForm.submit();}
         </SCRIPT>
         <input type="submit" name="continue" value="Continue" />
      </form>
   </body>
</html>

当页面运行客户端的浏览器时，是否有某种方法可以隐藏continue按钮并显示“重定向”？

标签： htmlforms

解决方案

将您的脚本更新为：

<SCRIPT LANGUAGE="Javascript">
   AutoSubmitForm() { 
     document.downloadForm.submit();
   }
  var form = document.querySelector('form[name="downloadForm"]');
  var submitFN = function () {
     // hide btn
     document.querySelector('input[type="submit"]').style.display = "none";
     // create dom node let it be paragraph
     var node = document.createElement("p"); 
     // create text node 'redirecting'
     var textnode = document.createTextNode("Redirecting");     
     // append text node to dom node 
     node.appendChild(textnode);
     // append dom node to dom body
     document.querySelector("body").appendChild(node); 
  }
  form.addEventListener("submit", submitFN, false);
</SCRIPT>

没有 JS：

<html>
   <head>
      <meta HTTP-EQUIV="Content-Type" content="text/html; charset=UTF-8" />
      <meta HTTP-EQUIV="Cache-Control" CONTENT="no cache" />
      <meta HTTP-EQUIV="Pragma" CONTENT="no cache" />
      <meta HTTP-EQUIV="Expires" CONTENT="0" />
   </head>
   <body OnLoad="AutoSubmitForm();">
      <form name="downloadForm" action="AcsUrl" method="POST">
         <input type="hidden" name="PaReq" value="PaReq" />
         <input type="hidden" name="TermUrl" value="TermUrl" />
         <input type="hidden" name="MD" value="optionalValue" />
         <SCRIPT LANGUAGE="Javascript">
            AutoSubmitForm() { document.downloadForm.submit();}
         </SCRIPT>
         <input type="submit" name="continue" value="Continue" style="display: none;"/>
      </form>
      <p> Redirecting</p>
   </body>
</html>

推荐阅读