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Ó CIKKEKTÖBB A SZERZŐTŐL

9 HOZZÁSZÓLÁS

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

  2. 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. 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. 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. 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. 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. 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. 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. 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.

HOZZÁSZÓLOK A CIKKHEZ

Kérjük, írja be véleményét!
írja be ide nevét