JavaScript - Suchfeld hängt etwas Text an URL an

Question

Hallo, ich habe das Suchfeld mit der Schaltfläche drop down auf meiner Seite benutzt. im Dropdown habe ich zwei Optionen gegeben (Lieferant & Käufer) & geschrieben einige Code für die Auswahl der Optionen. Das Problem ist, dass nach der Eingabe des Suchbegriffs, wenn ich die Eingabe-Taste drücke, fügt es einige Text in URL wie folgt (https://html.lorem.com/?search-param=suppliers&x=paper) Hier ist das Such-Keyword Papier. Vielen Dank im Voraus.

// select item for input from searchdropdown menu desktop and other large devices 
 
selectSearchBoxItem('#search-concept-desktop', '#search-param-desktop'); 
 
// select item for input from searchdropdown menu for small screen devices; 
 
selectSearchBoxItem('#search-concept-small', '#search-param-small'); 
 

 
//Search box item selection 
 
function selectSearchBoxItem(search_concept_id, search_param_id) { 
 
    $('.search-panel-wrap .dropdown-menu').find('a').click(function(evt) { 
 
    evt.preventDefault(); 
 
    var param = $(this).attr("href").replace("#", ""); 
 
    var concept = $(this).text(); 
 
    $('.search-panel-wrap ' + search_concept_id).text(concept); 
 
    $(search_param_id).val(param); 
 
    }); 
 
}

<link href="https://fonts.googleapis.com/css?family=Lato%7cMontserrat" rel="stylesheet" type="text/css"> 
 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 
<link href="https://cdn.paperindex.com/bootstrap/css/font-awesome.min.css" rel="stylesheet"> 
 
<link href="https://cdn.paperindex.com/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
 
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 
<script src="https://cdn.paperindex.com/js/jquery/jquery-3.1.0.min.js"></script> 
 
<div class="header-navigation-wrapper"> 
 
    <nav class="navbar"> 
 
    <div class="container-fluid navbar-content-row"> 
 
     <div class="pi-navigation-items"> 
 
     <form class="navbar-left" id="desktop-search-bar" name="desktop-search-bar"> 
 
      <div class="search-panel-wrap"> 
 
      <div class="clearfix"> 
 
       <input id="search-param-desktop" name="search-param" type="hidden" value="suppliers"> <input class="search-field pull-left" id="search-field" name="x" placeholder="Enter Keyword" type="text"> 
 
       <div class="search-dropdown pull-left"> 
 
       <button class="dropdown-toggle" data-toggle="dropdown" type="button"><span id="search-concept-desktop">Suppliers</span> <span class="fa fa-angle-down"></span></button> 
 
       <ul class="dropdown-menu" role="menu"> 
 
        <li> 
 
        <a href="#suppliers">Suppliers</a> 
 
        </li> 
 
        <li> 
 
        <a href="#buyers">Buyers</a> 
 
        </li> 
 
       </ul> 
 
       </div><span class="pull-left"><button class="search-button" type="button"><i class="fa fa-search"></i></button></span> 
 
      </div> 
 
      </div> 
 
     </form> 
 
     <ul class="nav navbar-nav navbar-right pi-bottom-nav-links"> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </nav> 
 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 1

einfache Art und Weise: ---

<input type="text" name="url_param" id="url_param" /> 
 
<input type="button" onclick="prepare_link();" value="Do it!" /> 
 

 
<a href="http://anyurl.com" id="target_link">Click Your New Link!</a> 
 

 
<script> 
 
function prepare_link() { 
 
      var url_param = document.getElementById('url_param'); 
 
      var target_link = document.getElementById('target_link'); 
 

 
      if (! url_param.value) { 
 
       return false; 
 
      } 
 

 
      target_link.href = target_link.href + '/' + escape(url_param.value); 
 
    } 
 
</script>