javascript - How to add input(text) value into the href attribute of a link - Stack Overflow

admin管理员组

文章数量:1414908

So I have been having a problen that's been bothering for the past couple of hours. I have a search input where after the user enters the input and presses send, the text should be added into the href attribute and sent to the results page where it will be used to query the database. I can't figure out a way to get it to work and if I could get help from any of you it would be really appreciated. I know how to get the search to work using ajax or just using ordinary html form so please don't suggest that. I just need it to work the way I asked, it's a long story :-). Thanks in advance. Here's an excerpt

<input type="text" class="form-control" id="search-text" placeholder="Search...">
<a href="results.php?search=WHERE-I-WANT-THE-INPUT-TO-GO" class="btn btn-default" id="send">Search</a>

So I have been having a problen that's been bothering for the past couple of hours. I have a search input where after the user enters the input and presses send, the text should be added into the href attribute and sent to the results page where it will be used to query the database. I can't figure out a way to get it to work and if I could get help from any of you it would be really appreciated. I know how to get the search to work using ajax or just using ordinary html form so please don't suggest that. I just need it to work the way I asked, it's a long story :-). Thanks in advance. Here's an excerpt

<input type="text" class="form-control" id="search-text" placeholder="Search...">
<a href="results.php?search=WHERE-I-WANT-THE-INPUT-TO-GO" class="btn btn-default" id="send">Search</a>

• javascript
• jquery
• html

Share Improve this question Follow asked Jun 12, 2015 at 16:47 user4909046user4909046 1

• Might need more info (like the code for your <form>) but you should probably set it up as a form with method='get' and action='newurl' rather than mess with jquery or javascript – Michael Tallino Commented Jun 12, 2015 at 16:53

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

update

$("#search-text").on("keyup",function(e){
  if(e. keyCode === 13){
    var address = $('#send').attr('href');
    window.location = address;
  } 

  $('#send').attr("href","results.php?search="+$(this).val());
})

---

You can do something like this

$('#send').on('click', function(e){
  e.preventDefault();
  var address = $(this).attr('href') + $('#search-text').val();
  window.location = address;
});

Provided the href looks like

<a href="results.php?" ... />

---

Improving @toby's solution a bit. Instead of keypress use keyup

$("#search-text").on("keyup",function(){
  $('#send').attr("href","results.php?search="+$(this).val());
})

var $anchor = $("#send");
$("#search-text").on("keypress",function(){
    $anchor.attr("href","results.php?search="+$(this).val());
})

This should do the trick

本文标签： javascriptHow to add input(text) value into the href attribute of a linkStack Overflow