Как сделать кнопку, которая будет перенаправлять на веб-страницу после вставленного слова? - PullRequest
Новая
       7

Как сделать кнопку, которая будет перенаправлять на веб-страницу после вставленного слова?

0 голосов
/ 15 декабря 2018

Я планирую создать поисковый сайт, но не знаю, как сделать что-то вроде: Пользователь вставляет что-то в поле поиска. После нажатия «Поиск», вы будете перенаправлены на такой сайт, как, duckduckgo.com/?q=текст, вставленный в поле поиска

Спасибо, Дож

Ответы [ 3 ]

0 голосов
/ 15 декабря 2018

В фрагменте я создал поле ввода и кнопку.Если вы введете «asd» в поле ввода и нажмете кнопку «Поиск», вы будете перенаправлены на: http://duckduckgo.com/?q=asd

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Demo</title>
  </head>
  <body>
    <input type="text" /> 
    <button>Search</button>

    <script>
      let button = document.querySelector('button');
      button.addEventListener('click', function() {
        let inputValue = document.querySelector('input').value;
        let redirectToUrl = 'http://duckduckgo.com/?q=' + inputValue;
        window.location.replace(redirectToUrl);
      });
    </script>
  </body>
</html>
0 голосов
/ 15 декабря 2018

Использование Javascript

Вы должны использовать: window.location.href и убедиться, что веб-сайт, на который вы перенаправляете, начинается с http:// или https://

window.location.href = "http://duckduckgo.com/?q=" + text;

Использование« формы »в HTML

Вы должны поместить поле <input> в<form> и укажите форму для URL-адреса, с которым вы работаете, и убедитесь, что это запрос GET. 

<form method='get' action='http://duckduckgo.com'>
    <input type='text' name='q' value='' />
    <input type'button' value='Submit' />
</form>

После нажатия кнопки «Отправить» вы будете перенаправлены на страницу http://duckduckgo.com?q={input text}

$("#jsBloc a").click(function() {
  window.location.href = "http://duckduckgo.com?q=" + $("#jsBloc").val();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Using Javascript: </h1>
<div id='jsBloc'>
    <input type='text' name='q' value='' />
    <a href='javascript:;'>Submit</a>
<div>

<hr />

<h1>Using Form HTML</h1>
<form method='get' action='http://duckduckgo.com'>
    <input type='text' name='q' value='' />
    <button>Submit</button>
</form>
0 голосов
/ 15 декабря 2018

Это должно работать: window.location.replace("duckduckgo.com/?q=" + string);

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...