Чтение переменной из введенного текста и открытие в новой вкладке без публикации формы

Question

Я хотел бы прочитать поисковый термин из введенного текста, и когда я щелкаю ссылку на странице, я хотел бы добавить этот поисковый термин к ссылке и открыть на новой странице

var a = document.querySelectorAll("a.mylink")[0] ;
a.addEventListener("click",function(e){
    e.preventDefault();
    var query = e.currentTarget.previousElementSibling.textContent;
    window.open(e.currentTarget.href+"?"+query,"_blank");
},false);

<input type="text" name="search_term">
<a target="_blank" class="mylink" href="http://stackoverflow.com">Preview Search Results</a>

Answer 1

Как то так? https://jsfiddle.net/ibowankenobi/bvr5jmas/1/

var a = document.getElementsByTagName("a")[0];
a.addEventListener("click",function(e){
    e.preventDefault();
    var query = e.currentTarget.previousElementSibling.value;
    window.open(e.currentTarget.href+"?"+query,"_blank");
},false);

Для концепции нескольких тегов:

https://jsfiddle.net/ibowankenobi/bvr5jmas/3/

Для одного тега и соответствующего ввода:

HTML:

<input type="text" name="search_term" data-for="someLink">
<a target="_blank" id="someLink" class="mylink" href="http://stackoverflow.com">Preview Search Results</a>

JS:

var aTag = document.querySelector("a.mylink") ;
aTag.addEventListener("click",function(e){
  e.preventDefault();
  var query = document.querySelector("input[data-for='"+e.currentTarget.id+"']").value;
  window.open(e.currentTarget.href+"?"+query,"_blank");
},false);

FIDDLE: https://jsfiddle.net/ibowankenobi/bvr5jmas/6/

Answer 2

Вы можете зарегистрировать прослушиватель keyup на search_term и обновить ссылку на href при изменении условия поиска

$(function() {
  $('#search_term').keyup(function() {
    var link = $(this).next("a").get(0);
    link.href = "xyz.com/" + this.value;
  });
});