从文本到网站的 HTML 按钮链接答案

【问题标题】：HTML Button Link to Website from Text从文本到网站的 HTML 按钮链接
【发布时间】：2015-06-04 19:56:49
【问题描述】：

我正在尝试使用一个 HTML 按钮来链接到一个新网站，给定一个提供的文本字段输入。

我有这样的选择：

Option: <br />
                One <input type="radio" value="Short"
                name="option" <br />: 
                Two <input type="radio" value="Long"
                name="option" <br />:
                Three <input type="radio" value="Zero"
                name="option" <br />:

如果选择了一个，我希望有一个按钮转到 .../one，如果选择了两个，则 .../two 等等...

<form> <input class="MyButton" type="button" value="Google"
         onclick=window.location.href='www.google.com' /> </form>

我知道这是我转到指定链接的方式，但我想根据我的选项选择转到链接，而不是静态选择。谢谢

【问题讨论】：

标签： html button hyperlink

【解决方案1】：

首先你必须修复你的 HTML 错误。没有输入元素有结束标签。

用 span 包裹一、二、三

Option: <br />
   <span>One</span> <input type="radio" value="Short" name="option" /> <br />
   <span>Two</span> <input type="radio" value="Long" name="option" /> <br />
   <span>Three</span> <input type="radio" value="Zero" name="option" /> <br />

<form> <input class="MyButton" type="button" value="Google" /> </form>

然后你可以得到你的选择值和设置按钮onclick值

$(document).ready(function(){

   $("input[type='radio']").click(function(){
       var text = $(this).prev('span').text();
       $('form > input').attr('onclick',
            "javascript:window.location.href='https://www.google.com/" + text + "'");
   });

});

点击Google按钮后，您将重定向到https://www.google.com/yourSelectValue

【讨论】：

【解决方案2】：

为此使用 javascript。

单击按钮时进行函数调用。像这样...

<input type="button" onclick="myfunction()"/>

并在函数内部从文本输入中获取值并使用适当的方法转到链接。

【讨论】：

我如何从文本输入中获取值？
@Logan 只是谷歌它伙计......就像这样 - var x = document.getElementById("myText").value;

【解决方案3】：

我个人不会为此使用 javascript，您可以使用带有formaction 属性中 URL 的普通按钮。

<form>
    <button formaction="http://stackexchange.com">Stackexchange</button>
</form>

form 标签是必需的。

参考：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formaction

【讨论】：