Изменение метки href на основе нажатия кнопки

-2

EDIT: Кнопки в углу не отправят поиск. Кнопка go все равно будет нажата, чтобы отправить ее.Изменение метки href на основе нажатия кнопки

Итак, я работаю над небольшим проектом, когда мне скучно на работе. Это не должно быть что-то серьезное, и я преподаю немного javascript, jquery, html и css, когда я иду (спасибо вам, ребята, конечно). Эта часть я не могу понять, или найти что-нибудь.

Моя страница: http://afrohorse.netau.net/

Как прямо сейчас, у меня есть форма, что при вводе, и нажмите идти, он будет искать в Google. Я планирую иметь его, чтобы я мог щелкнуть одну из четырех кнопок (расположенных на каждом углу страницы), и он изменится там, где он будет искать, когда вы отправляете. Вот код для моей формы.

<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=» изменится на «http://www.youtube.com/results?search_query=» после нажатия на кнопку YouTube. Это выполнимо? Если да, то каким будет самый простой способ?

Спасибо. :)

источник

2014-02-13 Mathew MacLean

Вам действительно лучше удалить форму и просто использовать кнопку. Вы могли бы сделать то, что у вас есть выше, как это ...

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; 

    }); 
});

источник

2014-02-13 12:51:04 Archer

Я еще совсем новичок в JS, и я чувствую, немного потерян. Я немного поработал с поиском и смотрел вокруг Stackoverflow, но все еще не мог понять, как это реализовать. Хотя, это определенно похоже на то, что я ищу. –

Кроме того, кнопки на углу не будут отправлять его. Они будут просто обновлять информацию о том, куда он идет, и вы по-прежнему нажимаете кнопку «идти». Я не уверен, что ваш пример это делает. Похоже, он будет использовать несколько разных кнопок. –

На самом деле я ничего не вижу на вашем сайте, кроме окна поиска, и нажимаю кнопку. Вышеприведенный код может быть легко изменен для перехода в разные местоположения с помощью кнопки 1, но я не вижу, как вы ожидаете узнать, какой поиск выполнить. – Archer

Я хотел бы сделать это diffirently. Я бы дал кнопку/ID. Если эта кнопка/будет нажата, я бы проверил, какую кнопку, так что youtube или google. Затем получите вход и отправьте пользователю правильную ссылку. так что-то вроде этого:

<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 :) поэтому события ABIT в JQuery ти различных

источник

2014-02-13 12:56:05 Jesper

Изменение метки href на основе нажатия кнопки

ответ

Смежные вопросы