jQuery Anker preventDefault

Question

Wie bekomme ich mit jQuery den Wert aus einem Textfeld und lade dann eine neue Seite basierend auf dem Wert?

Zum Beispiel, sagen wir, das Textfeld enthält "hallo" auf page1.php, wie ändere ich das Standardverhalten eines Anker-Tag, um jetzt laden die folgenden

page2.php?txt=hello

Bislang habe ich Folgendes:

<script type="text/javascript">
    $(document).ready(function(){
    $("a.mylink").click(function(event){
        alert("link clicked");
        event.preventDefault();
    });
});
</script>

Answer 1

Html

    <input type="text" id="demoQuery" />
    <a id='demoLink' href='javascript:'>Iam a link</a>

Javascript

jQuery('#demoLink').bind('click',function(e){
      e.preventDefault();
      document.location.href="someUrl.php?text="+ jQuery('#demoQuery').val();     
});

Answer 2

Sie können die Unschärfe Ereignis des Textfeldes, so dass der Anker nach Beendigung der Eingabe durch den Benutzer mit Hilfe der folgenden jQuery aktualisiert werden kann:

$("#textBoxId").blur(function() {
    var text = $(this).val();
    var end = text.length == 0 ? "" : "?txt=" + text;
    $("a.mylink").attr("href", "Page2.php" + end);
});

Und ändern Sie einfach die href des Ankers. Dann brauchen Sie den Anker nicht zu behandeln click selbst. Der Anker wird einfach auf "Page.php?txt=Hello" umgeleitet. Dadurch wird sichergestellt, dass der Link immer auf dem neuesten Stand ist und funktioniert, wenn der Benutzer mit der rechten Maustaste klickt und "In neuem Fenster öffnen" auswählt.

Sie können es auch andersherum machen und den Klick des Ankers behandeln:

$("a.mylink").click(function(e) {
   var text = $("#textBoxId").val();
   document.location.href = $(this).attr("href") + "?txt=" + text;
   e.preventDefault();
});

Wenn der Benutzer jedoch mit der rechten Maustaste klickt, wird dieses Ereignis nicht ausgelöst.

Answer 3

Legen Sie ein Klick-Ereignis für das Anker-Tag fest, um die Abfragezeichenfolge hinzuzufügen, wenn es angeklickt wird.

$('a').click(function() {
   var querystring = $('input').serialize();
   this.href += querystring;
});

Dies verwendet jQuery's serialisieren Methode. Wo der Selektor jede Eingabe oder jedes Feld ist, das Sie an die nächste Seite weitergeben möchten. Viel Glück!

Die Verwendung von event.preventDefault ist nicht erforderlich.