Как сделать перенаправление кнопки на другую страницу с помощью jQuery или просто Javascript


102

Я делаю прототип и хочу, чтобы кнопка поиска ссылалась на образец страницы результатов поиска.

Как сделать перенаправление кнопки на другую страницу при нажатии на нее с помощью jQuery или простого JS.


Я попросил js, потому что не представлял, что существует простое решение HTML. Спасибо, что решил мою цель.
Анкур,

Ответы:


65

Без скрипта:

<form action="where-you-want-to-go"><input type="submit"></form>

А еще лучше, поскольку вы просто куда-то собираетесь, представьте пользователю стандартный интерфейс "просто иду куда-то":

<a href="where-you-want-to-go">ta da</a>

Хотя контекст звучит как «Имитация обычного поиска, при котором пользователь отправляет форму», и в этом случае первый вариант - это правильный путь.


14
Кто бы мог подумать о ссылке? ха-ха
meouw

+1 за форму. Поскольку в конечном итоге это будет правильная форма поиска, вы должны сделать это сейчас, если возможно.
DisgruntledGoat

@suhail - В три раза больше кода и зависимость от JavaScript - это плохо.
Quentin

1
@ayjay - нажатие кнопки отправки отправляет форму только в том случае, если кнопка отправки связана с этой формой. Ввод в него данных - традиционный и наиболее поддерживаемый способ сделать это.
Квентин

1
@mimi - Нет. Проблемы с повторной отправкой формы возникают только тогда, когда вы делаете запрос, который не является «безопасным» (в этом случае это должна быть форма POST… но вопрос касался простой навигации, поэтому нет причин не думать, что это безопасно). Браузеры только предупреждают людей о том, что запрос может быть небезопасным (поэтому они не будут этого делать, потому что это не так method="POST").
Квентин,

202

ты это имеешь ввиду?

$('button selector').click(function(){
   window.location.href='the_link_to_go_to.html';
})

1
В соответствии с этим StackOverflow вопрос и ответ, нужно наклониться к , window.locationа не document.locationтак как это не является каноническим.
Джуджхар Сингх

74
$('#someButton').click(function() {
    window.location.href = '/some/new/page';
    return false;
});

5
зачем возвращать false?
Франсиско Корралес Моралес,

2
Без него return falseнажатие клавиши «Enter или Return» может просто перенаправить вас на текущий URL, а не на новую ссылку. Это особенно полезно, когда у вас есть элемент управления вводом текста, который вы хотели бы отправить по другому URL-адресу, когда вы нажимаете клавишу ввода / возврата.
Вера побеждает

2
Это не очень хорошее объяснение. Возвращаемое значение указывает, следует ли продолжать обработку события. По умолчанию событие будет продолжать всплывать и может запускать другие действия, такие как отправка формы, переход по ссылке или ничего. Однако здесь очень хочется «впитать» событие. При возврате false обработка события здесь заканчивается.
redreinard

1
спасибо - возвращение false спасло меня - мне было интересно, почему URL-адрес не изменился - но, увы, какой-то другой скрипт должен был продолжить обработку щелчка.
Деррик Деннис

22

В вашем html вы можете добавить атрибут данных к вашей кнопке:

<button type="submit" class="mybtn" data-target="/search.html">Search</button>

Затем вы можете использовать jQuery для изменения URL-адреса:

$('.mybtn').on('click', function(event) {
    event.preventDefault(); 
    var url = $(this).data('target');
    location.replace(url);
});

Надеюсь это поможет


2020: Лучший ответ для меня из-за информации о целевых данных .... Спасибо !!!
MarcoZen



10

Не нужен javascript, просто оберните его ссылкой

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

Анкур не просил действующий HTML5, он попросил решение для своего прототипа
Оуэн


7

Вы можете использовать window.location

window.location="/newpage.php";

Или вы можете просто сделать так, чтобы форма, в которой находится кнопка поиска, действовала на нужной странице.


4

Вы можете использовать этот простой код JavaScript, чтобы сделать кнопку поиска ссылкой на образец страницы результатов поиска. Здесь я перенаправлен на «/ search» моей домашней страницы. Если вы хотите выполнять поиск из поисковой системы Google, вы можете использовать « https://www.google.com/search » в действии формы.

<form action="/search"> Enter your search text: 
<input type="text" id="searchtext" name="q"> &nbsp;
<input onclick="myFunction()" type="submit" value="Search It" />
</form> 
<script> function myFunction() 
{ 
var search = document.getElementById("searchtext").value; 
window.location = '/search?q='+search; 
} 
</script>

2

Из кода YT 2012.

<button href="https://stackoverflow.com/signin" onclick=";window.location.href=this.getAttribute('href');return false;">Sign In</button>


2

это САМЫЙ БЫСТРЫЙ (самый читаемый, наименее сложный) способ сделать это, Оуэнс работает, но это не законный HTML, технически этот ответ не jQuery (но поскольку jQuery является предварительно подготовленным псевдокодом, переинтерпретированным на клиентской платформе как собственный JavaScript - там на самом деле нет такой вещи , как JQuery в любом случае)

 <button onclick="window.location.href='http://www.google.com';">Google</button>

0

А в Rails 3 с CoffeeScript с использованием ненавязчивого JavaScript (UJS):

Добавить в assets/javascripts/my_controller.js.coffee:

$ ->
  $('#field_name').click ->
    window.location.href = 'new_url'

который гласит: когда событие document.ready запущено, добавьте onclickсобытие в объект DOM, идентификатор field_nameкоторого выполняет javascriptwindow.location.href='new_url';


0

Здесь есть много вопросов о перенаправлении на стороне клиента, и я не могу рассказать о большинстве из них ... этот вопрос является исключением.

Перенаправление не должно исходить от клиента… оно должно исходить от сервера. Если у вас нет контроля над сервером, вы, конечно, можете использовать Javascript, чтобы выбрать другой URL-адрес для перехода, но ... это не перенаправление. Перенаправление выполняется с помощью 300 кодов состояния на сервере или с помощью тега META в HTML.


0

Используйте ссылку и стилизуйте ее как кнопку:

<a href="#page2" class="ui-btn ui-shadow ui-corner-all">Click this button</a>
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.