Question

编辑：角落里的按钮不会提交搜索。仍然会点击go按钮提交它。

所以，当我在工作中感到无聊时，我正在做一个小项目。它并不意味着什么是严肃的，我正在教我一些javascript，jquery，html和css（当然，感谢你们好心人）。这部分我无法弄清楚，或找不到任何关于。

我的页面是：http://afrohorse.netau.net/

截至目前，我有一个表单，当您输入时，按go，它将搜索谷歌。我打算拥有它，这样我就可以点击四个按钮中的一个（位于页面的每个角落），当你提交时它会改变搜索的位置。这是我表格的代码。

<form onsubmit="location.href='https://www.google.ca/#q=' + document.getElementById('myInput').value; return false;">
   <input type="text" id="myInput" class="search left" value="" autofocus/>
   <button class="go"><span>GO!</span></button>
</form>

所以，理想情况下，我希望如此“https://www.google.ca/#q=”在点击youtube按钮后会更改为“http://www.youtube.com/results?search_query=”。这可行吗？如果是这样，最简单的方法是什么？

感谢。：）

Answer 1

您最好删除表单并只使用按钮。你可以像上面那样做你上面的......

<强> HTML

<input type="text" id="myInput" class="search left" value="" autofocus/>
<button class="go" id="search-button">GO!</button>

<强>的Javascript

$(function() {

    $("#search-button").on("click", function() {

        var query = $("#myInput").val();

        // if using Google search...
        location.href = "https://www.google.ca/#q=" + query;

        // if using Youtube search...
        location.href = "http://www.youtube.com/results?search_query=" + query;

    }); 
});

Answer 2

我会不同地做。我会给按钮/一个ID。如果单击此按钮/我会检查什么按钮，所以youtube或谷歌。然后获取输入并将用户发送到正确的链接。所以像这样：

<a href="#" id="btn_google">google it</a>
<a href="#" id="btn_youtube">youtube it</a>
<input type="text" id="input_search" placeholder="What are you searching for?">

JS：

$('btn_google').addEvent("click", function(e){
    e.preventDefault();
    location.href='http://www.google.ca/#q='.$('input_search').value;
});
$('btn_youtube').addEvent("click", function(e){
    e.preventDefault();
    location.href='http://www.youtube.ca/results?search_query='.$('input_search').value;
});

顺便说一下，我使用mootools :)所以事件是jquery中的abit diffirent

根据按下按钮更改href标签

2 个答案: