Form submit link-ké alakítása


Van egy régebbi tutorial (“Tartalom váltása a lap újratöltése nélkül II. – HTMLHttpRequest“), amit szerettem volna használni egy adminisztrációs felületen. Remekül működött, amíg bele nem futottam abba, hogy egy form-mal adatokat adokat kéne átadni.

A probléma egyszerűen: egy form elküldése nem link, hanem egy submit-gomb, így a …class=loadinto-someDiv… semmit nem ér.
Hamar beláttam, hogy ilyen linkre lenne szükségem: search.php?what=something

Egy egyszerű kereső form-on keresztül mutatom be a megoldást.

1. Létrehozunk egy form-ot (amit a name-attribútumban megadott névvel fogunk azonosítani).

1
<form name="searchForm">

2. Létrehozzuk a text típusú input mezőt (szintén a name lesz a fontos)

1
<input type="text" name="whatAreYouSearchingFor" />

3. Létrehozunk egy sima anchor tag-et #-értékű href-fel (hogy aláhúzza a böngésző), amit klikk-re megfelelő formára hozunk. (a példában a searchForm.elements[‘whatAreYouSearchingFor’].value tartalma az input-mezőbe írt sztring)

1
<a href="#" onclick="this.href='search.php?what='+searchForm.elements['whatAreYouSearchingFor'].value;">Search</a>

4. Lezárjuk a form-ot.

1
</form>

Természetesen csak akkor működik, ha nem ENTER-rel szubmittálja a kedves felhasználó, hanem rákattint a link-re. Akkor egészben a kopipészt miatt.

1
2
3
4
<form name="searchForm">
<input type="text" name="whatAreYouSearchingFor" />
<a href="#" onclick="this.href='search.php?what='+searchForm.elements['whatAreYouSearchingFor'].value;">Search</a>
</form>
Kapcsolódó bejegyzések:
  • Felmerült egy kérdésként, hogy lehetne egy login oldal tartalmánál (belépési név és jelszót kell megadni) jelezni a felhasználók számára azt, hogy melyik mező mi …

  • Form-ok készítése esetén biztos volt már dolgod az alapértelmezett (és meglehetősen csúnya) nagy, szürke “submit” gombokkal. Ezek sok esetben rontanak a …

  • Weblapkészítés során ha egy olyan oldalt kell készíteni, hol egy vagy akár több input mező is van (regisztráció, kapcsolatfelvétel stb..), hasznos lehet megadni, …

  • Elsőnek készítsünk egy form-ot: A check.php-ben vegyünk fel egy változót:$pass = $_POST[“pass”]; Majd egy if feltétellel vizsgálju …

  • Ahogy belépek egy magyar nyelvű fórumba ahol webszerkesztés téma is van, olyan nincs, hogy ne találjak olyan kérdést, hogy “Keresés, hogyan?”. Most erre talász i …

A cikket beküldte: sanyez (http://8es8.extra.hu)

9 hozzászólás

  1. tomnash says:

    ha a form method paraméterében GET-et adsz meg (POST helyett), akkor pont ezt csinálja mint amit vázoltál

  2. sanyez says:

    tomnash: valóban, de csak akkor, ha újra akarod tölteni az egész lapot. Ez pont akkor jó, ha elég egy div-be betölteni az eredményt a háttérben.

  3. bolint says:

    Szia!
    Még mindig csinálhatod azt, hogy amit az onclickre raktál, azt beteszed egy függvénybe és megadod a form onsubmit-jának is (az a-ban pedig a függvényhívás után rakhatsz egy return false;-t, hogy ne kerüljön be a # a böngészősávba és ne ugorjon a lap a tetejére…), akkor enterre való submitkor is menni fog.

  4. sanyez says:

    bolint: nem igazán értem, amit írtál. Az anchor tag onclick-je csak beállítja a href attribútum értékét. A form onsubmit-je is beállíthatja az anchor href-jét, de akkor még kattintani is kell a link-re.. Vagy lehet, hogy nem erre gondoltál.

  5. bolint says:

    Szia!

    Rövidebb lesz egy példával :)

    function doSearch(){
    document.getElementById(‘button’).href=’search.php?what=’+searchForm.elements[‘whatAreYouSearchingFor’].value;
    //azt nem értem miért az ‘a’ href-jét állítod, de meghagytam
    return false;
    }

    Search

    Ilyenkor, ha enterre submitál a form, akkor is az hajtódik végre amit akarsz (csak azért írtam, mert ezt írtad: “Természetesen csak akkor működik, ha nem ENTER-rel szubmittálja a kedves felhasználó…”).

  6. bolint says:

    OK :) nem sikerült helyesen beszúrnom.

    Újra:

    7
    8
    9
    10
    11
    12
    13
    
    <script>
    function doSearch(){
    document.getElementById(’button’).href=’search.php?what=+searchForm.elements['whatAreYouSearchingFor'].value;
    //azt nem értem miért az ‘a’ href-jét állítod, de meghagytam
    return false;
    }
    </script>
    4
    5
    6
    7
    
    <form name="searchForm" onsubmit="return doSearch();">
    <input type="text" name="whatAreYouSearchingFor" />
    <a href="#" id="button" onclick="doSearch();return false;" rel="nofollow">Search</a>
    </form>
  7. sanyez says:

    bolint: az én hibám, nem voltam elég részletes, ezért értettük félre egymást, de most megmutatom mire gondolok: http://href.hu/x/74sy Itt látható, hogy miért az a href-jét állítgatom: ha a link-re kattintok, akkor betölti egy div-be az eredményt, ami jó, mert ezt akartam elérni, ha viszont enter-rel submit-tálok, akkor újratöltődik az index.php, mivel nincs megadva action a form-hoz. Odalinkeltem a forrást is, ha tudsz megoldást az enter-problémára, örömmel veszem és bocs, ha “megvezettelek”.

  8. bolint says:

    Szia!

    Elég bonyolult a kódód (nem sértésből mondom…). És az enter is pont azért nem működik ahogyan leírtam :) Próbáltam gyorsan átalakítani, de igazából az addEvent nélkül gyorsabban menne :) Nem gondolkodtál még mondjuk jQuery beemelésén, akkor nem kellene minden click-et vizsgálni a documentumban, hanem megadhatnád, hogy a eztfuttasd-ide classú ‘a’ elemek onclickje legyen az a függyvény (ugyan úgy automata maradna az eljárás). Egyébként így sem rossz, de nagyon át kellene szabnom, hogy jó legyen (mondjuk ha már elkezdtem, akkor lehet befelyezem este…).

  9. Arno says:

    Egy olyan megoldásra lenne szükségem HTML file-ban mint ez, csak müködjön enterre.
    Bolint megoldása nem ment nekem.
    Valaki valami ötlet? jelenleg a Google keresésre ezt használom:

    1
    2
    3
    
     
     
              <a href="#" rel="nofollow">Search</a>

    Ez természetesen mint a leirásban is olvasható nem ment enterre.

Szólj hozzá
a Form submit link-ké alakítása c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>