Form adatainak küldése PHP-vel, oldalfrissítés nélkül
Egy relatív összetett problémával találtam magam szemben:
Egy apróhirdetés-beküldő és -kilistázó modult kell összehozni, oly módon, hogy JS/CSS megoldással tabokat hoztam létre és egy ChangeTab() nevű függvénnyel váltom azokat, természetesen gond nélkül működik (alapból a kilistázás jelenik meg).
Ezen felül a beküldés tabon értelemszerűen van egy form, ami submit gombra elvileg egy php-nek kéne, hogy elküldje az adatokat, majd kiírná egy div-ben (vagy akár a form helyett - részletkérdés), hogy sikerült az elküldés. Erre ajaxos (prototype.js) megoldást találtam, kipróbáltam egy üres oldalon, működik.
Viszont amikor már implementálom a tabos keretbe, gombnyomás után újra betöltődik az egész oldal, azzal, hogy az eredeti index.php?lg=hu cím átalakul index.php?# címre (action="#"), és nem ír ki semmit az adott div-ben.
Ő a kód:
és a tabváltó script:
■ Egy apróhirdetés-beküldő és -kilistázó modult kell összehozni, oly módon, hogy JS/CSS megoldással tabokat hoztam létre és egy ChangeTab() nevű függvénnyel váltom azokat, természetesen gond nélkül működik (alapból a kilistázás jelenik meg).
Ezen felül a beküldés tabon értelemszerűen van egy form, ami submit gombra elvileg egy php-nek kéne, hogy elküldje az adatokat, majd kiírná egy div-ben (vagy akár a form helyett - részletkérdés), hogy sikerült az elküldés. Erre ajaxos (prototype.js) megoldást találtam, kipróbáltam egy üres oldalon, működik.
Viszont amikor már implementálom a tabos keretbe, gombnyomás után újra betöltődik az egész oldal, azzal, hogy az eredeti index.php?lg=hu cím átalakul index.php?# címre (action="#"), és nem ír ki semmit az adott div-ben.
Ő a kód:
<div id="TabLista" style="display:block;">
<div class="apro_empty"><a href="javascript:"> </a></div>
<div class="apro_on"><a href="javascript:ChangeTab('Lista')">apróhirdetések</a></div>
<div class="apro_off"><a href="javascript:ChangeTab('Bekuld')">beküldés</a></div>
</div>
<div id="TabBekuld" style="display:none;">
<div class="apro_empty"><a href="javascript:"> </a></div>
<div class="apro_off"><a href="javascript:ChangeTab('Lista')">apróhirdetések</a></div>
<div class="apro_on"><a href="javascript:ChangeTab('Bekuld')">beküldés</a></div>
</div>
<div class="apro_main" id="ContentLista">
bla bla
</div>
<div class="apro_main_none" id="ContentBekuld">
<form action="#" id="formBekuld">
<center>Minden mező kitöltése kötelező!</center>
<table>
<tr><td class="apro_td">Név:</td><td><input type="text" id="apro_nev" size="11" /></td></tr>
<tr><td class="apro_td">E-mail:</td><td><input type="text" id="apro_mail" size="11" /></td></tr>
<tr><td class="apro_td">Tel.:</td><td><input type="text" id="apro_tel" size="11" /></td></tr>
<tr><td class="apro_td">Szöveg:</td><td><textarea id="apro_text" cols="9" rows="3"></textarea></td></tr>
<tr><td class="apro_td" colspan="2" align="center"><input type="submit" onclick="goApro()" id="apro_submit" value="mehet" class="buttons" /></td></tr>
</table>
</form>
<div id="placeholder"></div>
<script type="text/javascript">
function goApro() {
var url = 'add.php';
var pars = 'apro_nev=' + document.getElementById('apro_nev').value + '&apro_mail=' + document.getElementById('apro_mail').value;
var myAjax = new Ajax.Updater( 'placeholder', url, { method: 'post', parameters: pars });
}
</script>
</div>
<div class="apro_empty"><a href="javascript:"> </a></div>
<div class="apro_on"><a href="javascript:ChangeTab('Lista')">apróhirdetések</a></div>
<div class="apro_off"><a href="javascript:ChangeTab('Bekuld')">beküldés</a></div>
</div>
<div id="TabBekuld" style="display:none;">
<div class="apro_empty"><a href="javascript:"> </a></div>
<div class="apro_off"><a href="javascript:ChangeTab('Lista')">apróhirdetések</a></div>
<div class="apro_on"><a href="javascript:ChangeTab('Bekuld')">beküldés</a></div>
</div>
<div class="apro_main" id="ContentLista">
bla bla
</div>
<div class="apro_main_none" id="ContentBekuld">
<form action="#" id="formBekuld">
<center>Minden mező kitöltése kötelező!</center>
<table>
<tr><td class="apro_td">Név:</td><td><input type="text" id="apro_nev" size="11" /></td></tr>
<tr><td class="apro_td">E-mail:</td><td><input type="text" id="apro_mail" size="11" /></td></tr>
<tr><td class="apro_td">Tel.:</td><td><input type="text" id="apro_tel" size="11" /></td></tr>
<tr><td class="apro_td">Szöveg:</td><td><textarea id="apro_text" cols="9" rows="3"></textarea></td></tr>
<tr><td class="apro_td" colspan="2" align="center"><input type="submit" onclick="goApro()" id="apro_submit" value="mehet" class="buttons" /></td></tr>
</table>
</form>
<div id="placeholder"></div>
<script type="text/javascript">
function goApro() {
var url = 'add.php';
var pars = 'apro_nev=' + document.getElementById('apro_nev').value + '&apro_mail=' + document.getElementById('apro_mail').value;
var myAjax = new Ajax.Updater( 'placeholder', url, { method: 'post', parameters: pars });
}
</script>
</div>
és a tabváltó script:
function ChangeTab(div)
{
var TabLista= document.getElementById("TabLista");
var TabBekuld = document.getElementById("TabBekuld");
var ContentLista = document.getElementById("ContentLista");
var ContentBekuld = document.getElementById("ContentBekuld");
if (div=='Lista')
{
TabLista.style.display='block';
TabBekuld.style.display='none';
ContentLista.style.display='block';
ContentBekuld.style.display='none';
}
else if (div=='Bekuld')
{
TabLista.style.display='none';
TabBekuld.style.display='block';
ContentLista.style.display='none';
ContentBekuld.style.display='block';
}
}
{
var TabLista= document.getElementById("TabLista");
var TabBekuld = document.getElementById("TabBekuld");
var ContentLista = document.getElementById("ContentLista");
var ContentBekuld = document.getElementById("ContentBekuld");
if (div=='Lista')
{
TabLista.style.display='block';
TabBekuld.style.display='none';
ContentLista.style.display='block';
ContentBekuld.style.display='none';
}
else if (div=='Bekuld')
{
TabLista.style.display='none';
TabBekuld.style.display='block';
ContentLista.style.display='none';
ContentBekuld.style.display='block';
}
}
AJAX
(Bocs az ekezetek hianyaert, eppel X11-et emergelek, ugyhogy se grafikus kornyezet, se magyar klavi. :) )
olvasni?
erre azt válaszolni, hogy a megoldás ajax és prototype framework, egy kicsit talán nevetséges.
Mea culpa
submit gomb mindig lefut
valami ilyesmi lesz:
remélem minden érthető még akkor is ha néhol kicsit magyartalanul sikerült fogalmaznom. ;)
onload - submit
nincs rá mód
persze a head tag-be bele lehet írni valami visibility: hidden mókát, de akkor mi van ha valaki js-sel de css nélkül jön. persze ez már szőrszálhasogatás. :)
félig jogos
lightbox nem használ domload eseményt
szerk: nem a lightboxon, hanem a betöltődésén.
wow
kérdező megoldotta a problémát?
probléma megoldva(?)
Nem vagyok szaki Ajax-témában, meg biztos is vagyok benne, hogy nem így kellene elkezdeni, hanem normálisan, az alapoktól, amit mostmár sürgősen át fogok nézni.
Valamiért a megoldások közül semmi sem dolgozott normálisan, már a végletekig leredukáltam a tartalmakat. Amin nagyon kiakadtam: két felépítésileg egyforma sima, pársoros HTML-oldal közül csak az egyiken működött a script, a másikon egyáltalán nem, pedig tényleg minden ugyanaz volt, csak az ID-k mások. Aztán hirtelen már az se működött, ami először jó volt, pedig semmit sem változtattam rajta.
Mindegy, beveszek egy Bensedint, meg dobok rá egy Red Bullt, aztán mindjárt jó lesz :D
megtekinthető a kész mű?
Esetleg az elkészített anyag hozzáférhető-e?
Köszi, sramitomi