Question

如何使用<input type=button>请求将GET表示为超链接并重定向？

Answer 1

有几种不同的方法可以做到这一点 - 首先，只需将其放在指向您想要的位置的表单中：

<form action="/my/link/location" method="get">
    <input type="submit" value="Go to my link location" 
         name="Submit" id="frm1_submit" />
</form>

即使没有启用javascript，这也有效。

其次，使用带有javascript的独立按钮：

<input type="submit" value="Go to my link location" 
    onclick="window.location='/my/link/location';" />

然而，这在没有JavaScript的浏览器中会失败（注意：这是真的不好的做法 - 你应该使用事件处理程序，而不是像这样的内联代码 - 这只是最简单的方法说明我正在谈论的事情。）

第三个选项是设置实际链接的样式，如按钮：

<style type="text/css">
.my_content_container a {
    border-bottom: 1px solid #777777;
    border-left: 1px solid #000000;
    border-right: 1px solid #333333;
    border-top: 1px solid #000000;
    color: #000000;
    display: block;
    height: 2.5em;
    padding: 0 1em;
    width: 5em;       
    text-decoration: none;       
}
// :hover and :active styles left as an exercise for the reader.
</style>

<div class="my_content_container">
    <a href="/my/link/location/">Go to my link location</a>
</div>

这样做的好处是可以在任何地方使用和来表示您最想要的含义。

Answer 2

您可以让<button>代码执行以下操作：

<a href="http://www.google.com/">
   <button>Visit Google</button>
</a>

或：

<a href="http://www.google.com/">
   <input type="button" value="Visit Google" />
</a>

这很简单，不需要javascript！

注意：

此方法在HTML结构中无效。但是，它适用于许多现代浏览器。请参阅以下参考：


For <button>;和

For <input type="button />

Answer 3

    <script type="text/javascript">
<!-- 
function newPage(num) {
var url=new Array();
url[0]="http://www.htmlforums.com";
url[1]="http://www.codingforums.com.";
url[2]="http://www.w3schools.com";
url[3]="http://www.webmasterworld.com";
window.location=url[num];``
}
// -->
</script>
</head>
<body>
<form action="#">
<div id="container">
<input class="butts" type="button" value="htmlforums" onclick="newPage(0)"/>
<input class="butts" type="button" value="codingforums" onclick="newPage(1)"/>
<input class="butts" type="button" value="w3schools" onclick="newPage(2)"/>
<input class="butts" type="button" value="webmasterworld" onclick="newPage(3)"/>
</div>
</form>
</body>

这是另一种方式，它比另一种方式更简单。

<input id="inp" type="button" value="Home Page" onclick="location.href='AdminPage.jsp';" />

这更简单。

Answer 4

对于那些从搜索（谷歌）偶然发现并试图转换为.NET和MVC代码的人。（如我的情况）

@using (Html.BeginForm("RemoveLostRolls", "Process", FormMethod.Get)) {
     <input type="submit" value="Process" />
}

这将显示一个标有“Process”的按钮，并带您进入“/ Process / RemoveLostRolls”。如果没有“FormMethod.Get”，它就可以了，但被视为“帖子”。

Answer 5

我认为这是你的需要。

a href="#" onclick="document.forms[0].submit();return false;"

Answer 6

不要这样做。我可能想用猴血来驾车。我有我的理由，但有时最好坚持按照设计的方式使用东西，即使它并非“绝对完美”地与你正在驾驶的外观相匹配。

要备份我的论点，我提交以下内容。

查看此图片如何缺少底部的状态栏。此链接使用onclick="location.href"模型。（这是我前任的真实生产示例）这可能会让用户对点击链接犹豫不决，因为他们不知道它在哪里，对于初学者来说。

enter image description here

您还使搜索引擎优化更加困难IMO以及使您的代码/ html的调试和阅读更加复杂。提交按钮应提交表单。您为什么（开发社区）尝试创建非标准UI？

如何使输入类型=按钮像超链接一样使用get请求重定向？

6 个答案: