Ich versuche, einen Wert in ein Suchfeld einzugeben und die Eingabetaste zu drücken, um ihn zu /workers/VALUE umzuleiten.

Derzeit wird zu workers/undefined umgeleitet

Verweise ich auf die falsche Klasse im var-Produkt?

$(document).ready(function() {
  $(document).keypress(function(e) {
    if (e.which == 13) {
      e.preventDefault();
      // enter pressed
      var product = $("#search-box").val();
      window.location.href = "/workers/" + product;
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<li class="nav-item hidden-sm-down search-box">
  <a class="nav-link hidden-sm-down text-muted waves-effect waves-dark" href="javascript:void(0)">
    <i class="ti-search"></i>
  </a>
  <form class="app-search">
    <input type="text" class="form-control search-box" placeholder="Search Wallet Address">
    <a class="srh-btn">
      <i class="ti-close"></i>
    </a>
  </form>
</li>
1
John Lang 18 Apr. 2018 im 17:10

4 Antworten

Beste Antwort

Ich empfehle nicht, window.location zu verwenden, aber Ihr Fehler liegt in Ihrem HTML-Code. Sie haben die ID Ihrer Eingabe vergessen.

<input type="text" id="search-box" class="form-control search-box" placeholder="Search Wallet Address">

Oder versuchen Sie es mit der Klasse

$(".search-box")
3
Samuel 18 Apr. 2018 im 14:15

Sie suchen nach einem id, aber Ihr Suchfeld hat nur diese ID als class. Ersetzen Sie diese:

$("#search-box")

Mit diesem:

$("input.search-box")
3
somethinghere 18 Apr. 2018 im 14:15

Sie verweisen in Ihrem JavaScript falsch auf das Suchfeld.

Sie sollten var product = $(".search-box").val(); verwenden, da Sie das Suchfeld als Klasse und nicht als ID festlegen. Hier finden Sie eine Kurzreferenz zu CSS-Selektoren, die möglicherweise hilfreich sind.

Außerdem sollten Sie die Suchfeldklasse nur für das Element festlegen, auf das Sie verweisen möchten (die Eingabe), da Sie sie anscheinend sowohl für das Listenelementelement als auch für das Eingabeelement festgelegt haben.

0
Manu 18 Apr. 2018 im 14:22

Ihr aktueller Code sucht nach einem Element mit der ID 'Suchfeld', das nicht vorhanden ist.

Sie können $(".search-box").get(0).val(); verwenden, um das erste Element mit einer bestimmten Klasse auszuwählen. In Ihrem Fall hat das li -Element jedoch auch dieselbe Klasse, sodass dieser Code nicht so gut funktioniert (wie angegeben) zu mir von @somethinghere Kommentar unten).

Um die Mehrdeutigkeit zu beseitigen, sollten Sie den ID-Selektor verwenden. Verwenden Sie einfach $("#search-box").val() und fügen Sie die ID wie folgt zum Eingabeelement hinzu:

<input id="search-box" type="text" class="form-control search-box" placeholder="Search Wallet Address">
0
Guilherme Lemmi 18 Apr. 2018 im 14:42