Warum zieht mein JS den Wert nicht richtig aus dem Formular? in Frage

Question

HTML ist recht einfach:

<form> <input type="text" name="locSearch" id="locSearch" /> <button id="locSearchBtn"><i class="fa fa-search" id="search-icon"></i></button> </form>

js:

$(document).ready(function() { 
getsWeather('seattle, wa', 'f'); 
$("#locSearchBtn").click(function() { 
    getsWeather(document.getElementById('locSearch').value, 'f'); 
}); 

Als ich senden Sie das Formular (entweder durch Eingabe drücken oder das Symbol einreichen klicken, die Seite neu geladen, sondern mit der Standardeinstellung (zB mit 'Seattle, wa als Standardargument für die getsWeather-Funktion). Ich brauche es, um alles in das Eingabefeld zu ziehen und dieses als Argument in der getsWeather-Funktion zu verwenden, das aber momentan nicht funktioniert.

Irgendwelche Ideen? Lassen Sie mich wissen, wenn Sie mehr Code benötigen, um es zu verstehen

Answer 1

Wenn Sie die Seite ändern möchten, müssen Sie verhindern, dass das Formular übermittelt wird, wenn Sie auf die Schaltfläche klicken. Zwei Möglichkeiten, das zu tun:

1. hinzufügen return false bis Ende Ihrer click-Handler für die Schaltfläche. Dies verhindert die Formularübergabe (wenn JavaScript auf dem Client aktiviert ist).

2. Fügen Sie type="button" zu der Schaltfläche hinzu, so dass es keine Absenden-Schaltfläche mehr ist.

Idealerweise würden Sie # 1 mit der Handhabung ein Formular Vorlage kombinieren, wenn der Kunde JavaScript nicht hat, konnte die kleine Anzahl von Menschen zu behandeln, die mit JavaScript surfen über das Formular Vorlage deaktiviert beim Umgang mit JavaScript- aktiviert Clients mit dem In-Page-Update.