2

Доброго времени суток. Задача такая. есть некое поле ввода Под ним есть ссылка

<a class="..." href="php.php?id=ZZZ" >php</a>

Вопрос, как при помощи onclick="ZZZ()" передать текст из поля ввода в адрес. То есть, человек пишет слово в поле, например "Праздник", а затем жмёт на ссылку и его переводит по ссылке на страницу php.php?id=Праздник

Приношу свои извинения, если данный вопрос оскорбил глаза про. Я только начал разбираться в javascript.

4 ответа 4

3

Без jquery, я бы сделал так:

document.getElementById('pole_vvoda').onkeyup = function() {
  document.getElementById('link').href = "url.php?id=" + this.value;
}
<input id="pole_vvoda" type="text" />
<a href="404.php либо url.php?id=default_value" id="link">Туда</a>

Пример на jsfiddle

Сам javascript тоже знать полезно.

1
  • jsfiddle требовался на ХК, здесь же есть свой "мини-jsfiddle" - при создании/редактирования вопроса/ответа выбираем листок со стрелками (фрагмент кода Control+M) - и пишем свой пример. Несколько ограниченный, по функционалу, но для показа кода хватит. Если местный механизм не позволяет показать пример в полном объеме, то тогда уже можно и ссылку на jsfiddle привести.
    – BOPOH
    13 апр 2015 в 5:15
3
$('селктор-для-ссылки').click(function(e){
    e.preventDefault()
    var v = $('селктор-для-инпута').val()
    window.location.href = 'php.php?id=' + v

})

Что-то в таком духе. Но, я уверен, ты хотел сделать иначе - повесить обработчик на изменение инпута, который подменяет href в ссылке. Это будет сделать сложнее, потому что обработчик на изменение инпута - это уродский код. Ведь он меняется и при нажатии бэкспейса и при нажатии на буквы-цифры и при ctrl+v. Нативной поддержки, по-моему нет нормальной.

https://api.jquery.com/category/selectors/

Вот, почитай про селекторы, лучше использовать id.

На чистом JS твоя ZZZ будет вглядеть примерно так:

function ZZZ() {
    var el = document.getElementById('id-инпута')
    var v = el.value
    window.location.href = '/php.php?id=' + v
    return false
}
2
  • а как еще можно передать значение из инпута в ссылку? На мой взгляд javascript - это лучший способ. Вечерком проверю, если сработает - очень хорошо будет.
    – anj1817
    12 апр 2015 в 14:19
  • только JS-ом и можно, по-другому никак.
    – FreeDooM
    12 апр 2015 в 14:20
3

То есть человек пишет слово в поле, например "Праздник". Затем жмет на ссылку и его переводит по ссылке на страницу php.php?id=Праздник

Очень похоже на то, что вам просто нужно передать GET-ом какие-то данные с формы

JS здесь не нужен также, как и ссылка, нужна кнопка :)

<form method="GET" action="php.php" target="_blank">
  <input type="text" name="id" />
  <input type="submit" value="Отправить" />
</form>

<!-- seee more here http://jsfiddle.net/ua9csb6t/ -->

Как это работает:

  1. у формы есть атрибут action - в нём указывается куда необходимо передать данные
  2. Данными для формы явзяются все input, textarea, select html-контролы
  3. чтобы в php.php передать по ключу id какие-то данные - необходимо создать форму с соответствующим action и разместить в ней поле с атрибутом name=id (собственно как в коде выше)

вот рабочий пример


PS: для передачи данных формы лучше использовать POST

см. для справки HTTP Methods: GET vs. POST

1
  • Нет, вопрос задан корректно, необходимо было передать данные именно в ссылку. Но спасибо за внимание.
    – anj1817
    14 апр 2015 в 11:42
2

onClick юзать противопоказано вообще всем адекватным кодерам.
Всё гениальное просто:

function listen(e){
  this.href = 'php.php?id=' + encodeURIComponent(document.querySelector('#toLink').value); // Устанавливаем значение из input[type='text']
  // For Example [start]
  document.querySelector('#preview').innerHTML = 'Я перехожу сюда: <strong>' + this.href + '</strong>';
  setTimeout(function(){
    document.querySelector('#preview').innerHTML = '';
  }, 1000);
  e.preventDefault(); // Пока эта строка есть, перехода не будет. Уберёшь - переход произойдёт
  // For Example [end]
}

document.querySelector('#link').addEventListener('click', listen);
a{
  color: #30a7fc;
  text-decoration: none;
}
Введите адрес: <input type='text' id='toLink' /><br />
<a href='#' id='link'>Перейти</a><br />

<!-- For Example -->
<span id='preview'>&nbsp;</span>

Примеры можно выкинуть :)

2
  • уже не в первый раз с Вами советуюсь! Ух, крутой вы чел)
    – anj1817
    12 апр 2015 в 20:39
  • @anj1817, Я аж покраснел, благодарю :)
    – user31688
    12 апр 2015 в 20:51

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.