Hur gör man för att sökte ord ska vara kvar i sökfält?(HTML, PHP)

Trädvy Permalänk
Medlem
Registrerad
Apr 2016

Hur gör man för att sökte ord ska vara kvar i sökfält?(HTML, PHP)

Hej alla
Jag har en uppgift att skapa kod som söker specifik ord från databasen

<form action="" method="get" class="form-inline"> <input name="search" type="text" class="form-control" placeholder="Sok efter bok"> <input name="search-button" type="submit" class="btn btn-primary" value="Sok"> </form>

Den är kod för min sökmotor
Det fungerar jättebra men finns nackdeln att ordet i sökfältet tas bort automatiskt vid varje sökning.
Om vi gugglar, vi kan märka att ord i sökfältet försvinnas inte. Hur gör man för att ha samma funktion?
Jag har inte någon webbprogrammeringsbok därför jag kunde inte hitta någon info

Trädvy Permalänk
Medlem
Registrerad
Feb 2015

Det finns så vitt jag vet inget automatiskt sätt att få formuläret att "minnas" vad du senast matade in där. Åtminstone inte i ren HTML.

Vad du däremot kan göra (ett sätt åtminstone, det finns säkert fler) är att använda parametern 'value' i 'input' taggarna för att ange vilket värde som skall visas, och sedan generera formuläret med olika värden beroende på vad som matades in.

Trädvy Permalänk
Medlem
Plats
Landskrona
Registrerad
Nov 2008

@ProgrammeringElev

Eftersom du använder method="get" i ditt formulär så läggs sökordet samt sökknappen till i URL när man gör en sökning, exempelvis http://doman.se/search.php?search=Test&search-button=Sok. Du kan ta bort name="search-button" från din sök-knapp.

Kör nedanstående kod för att printa ut vad variabeln _GET innehåller när du gjort en sökning.

<?php // Check if _GET is set if( isset( $_GET ) && !empty( $_GET ) ) { // Debug variable _GET echo "<pre>"; print_r($_GET); echo "</pre>"; } ?>

Svaret du får är:

Array ( [search] => Test [search-button] => Sok )

Du kan sedan komma åt sökordet med följande kod: $_GET['search']

Lägg till value="" på din input som innehåller sökordet så får du:

<form action="" method="get" class="form-inline"> <input name="search" type="text" class="form-control" placeholder="Sok efter bok" value="<?php if( isset( $_GET['search'] ) && !empty( $_GET['search'] ) ) { echo $_GET['search']; } ?>"> <input name="search-button" type="submit" class="btn btn-primary" value="Sok"> </form>

Man kan nu söka på sidan genom http://doman.se/search.php?search=SÖKORD samt att sökfältet minns vad man sökte på...

@Erik_T Se mitt svar om du är nyfiken på hur man löser det

Trädvy Permalänk
Medlem
Registrerad
Nov 2016

Precis som tidigare har skrivits så är standardsättet att man skriver ut värdet igen i value attributet efter sökning.

Annars går det ju trixa till med lite javascript också men kanske inte fungerar i alla webbläsare fortfarande

<!doctype html> <html> <form action="" method="get" onsubmit="sessionStorage.setItem('search',this.search.value)" class="form-inline"> <input name="search" id="search" type="text" class="form-control" placeholder="Sok efter bok"> <input name="search-button" type="submit" class="btn btn-primary" value="Sok"> </form> <script> document.getElementById("search").value = sessionStorage.getItem("search"); </script> </html>

Trädvy Permalänk
Medlem
Plats
Landskrona
Registrerad
Nov 2008

@kyuw
De senaste versionerna av IE, Edge, Chrome, FF och Safari stödjer Storage
http://caniuse.com/#feat=namevalue-storage

Trädvy Permalänk
Medlem
Registrerad
Apr 2016
Skrivet av Erik_T:

Det finns så vitt jag vet inget automatiskt sätt att få formuläret att "minnas" vad du senast matade in där. Åtminstone inte i ren HTML.

Vad du däremot kan göra (ett sätt åtminstone, det finns säkert fler) är att använda parametern 'value' i 'input' taggarna för att ange vilket värde som skall visas, och sedan generera formuläret med olika värden beroende på vad som matades in.

Skrivet av kyuw:

Precis som tidigare har skrivits så är standardsättet att man skriver ut värdet igen i value attributet efter sökning.

Annars går det ju trixa till med lite javascript också men kanske inte fungerar i alla webbläsare fortfarande

<!doctype html> <html> <form action="" method="get" onsubmit="sessionStorage.setItem('search',this.search.value)" class="form-inline"> <input name="search" id="search" type="text" class="form-control" placeholder="Sok efter bok"> <input name="search-button" type="submit" class="btn btn-primary" value="Sok"> </form> <script> document.getElementById("search").value = sessionStorage.getItem("search"); </script> </html>

Skrivet av kevvs:

@kyuw
De senaste versionerna av IE, Edge, Chrome, FF och Safari stödjer Storage
http://caniuse.com/#feat=namevalue-storage

tack så mycket!!!!!