| Autor | Zpráva | ||
|---|---|---|---|
| Martos Profil * |
Mám formulář, kde mám 3 povinné pole (viz kód níže). Mým cílem je, aby ve formuláři nebyly všechny 3 pole vidět najednou, ale v jednotlivých krocích. Tedy nejdřív bude vidělt jen první pole, po vyplnění a kliknutí na nějaké tlačítko "Další" se zobrazí druhé pole, pak zase po vyplnění a kliknutí na "Další" se objeví poslední třetí pole a po kliknutí na nějaké tlačítko "Odeslat" se fotmulář odešle pomocí scriptu, na který se v kódu odkazuje.
Poradíte? Nejlépe zakomponovat úpravu přímo do kódu. Zde je ten můj zdroj: <html>
<head>
<meta http-equiv="Content-Language" content="cs">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>Kontakt</title>
<script language="javascript">
function formValidate()
{
errorMessage = "";
if (document.getElementById('jmeno').value == "")
{
errorMessage += 'Pole "Vaše jméno" není vyplněno\n';
}
if (document.getElementById('email').value == "")
{
errorMessage += 'Pole "Váš e-mail" není vyplněno\n';
}
if (document.getElementById('kod').value == "")
{
errorMessage += 'Pole "Kód" není vyplněno\n';
}
if (errorMessage != "")
{
alert("Následující pole nejsou správně vyplněny:\n\n" + errorMessage);
return false;
}
else
{
return true;
}
}
</script>
</head>
<body bgcolor="#dec7a7">
<form method="post" action="form_save_kontakt.php" onsubmit="return formValidate();">
<table border="0" cellspacing="0" cellpadding="0" style="font-size: 10pt; font-family: Arial">
<tr>
<td width="309">Vaše jméno: <font color="#FF0000">*</font></td>
<td><input type="text" size="33" name="jmeno" id="jmeno"></td>
</tr>
<td width="309">Váš e-mail: <font color="#FF0000">*</font></td>
<td><input type="text" size="33" name="email" id="email"></td>
</tr>
<tr>
<td width="309">Kód: <font color="#FF0000">*</font></td>
<td><input type="text" size="33" name="kod" id="predmet"></td>
<tr>
<td width="309"> </td>
<td> </td>
</tr>
<tr>
<td width="309"> </td>
<td><input type="submit" value="Odeslat formulář"></td>
</tr>
</table>
</body>
</html>Moderátor Davex: Vkládej prosím kódy mezi značky [pre] a [/pre] (stačí kliknout na
 ). |
||
| Kry5 Profil |
#2 · Zasláno: 31. 7. 2011, 21:00:23
Pokud ovládáš javascript neměl by to být problém. Událost onChange společne s vlastností style.display a postupně zobrazíš celý formulář -> ale doporučuji políčka schovávat také pomocí js, protože kdyby ho nějaký uživatel neměl neuvidí zbylá políčka.
|
||
| Martos Profil * |
#3 · Zasláno: 1. 8. 2011, 16:25:17
Kry5:
Bohužel javascript neovládám. Tento kód jsem někdy vyhrabal, ani nevím kde. Funguje to, jen to chci upravit. Zkusíš tu úpravu zakomponovat do kódu, prosím? |
||
| Tori Profil |
#4 · Zasláno: 1. 8. 2011, 17:03:56
Martos:
Můžete to udělat i v PHP, kde se bude stránka 1-3 zobrazovat podle parametru v URL. Data buď zpracovávat/ověřovat hned, nebo ukládat do session a použít až všechny naráz (vizte např. návod na vícestránkový formulář od J.Vrány). |
||
| Kry5 Profil |
#5 · Zasláno: 1. 8. 2011, 18:13:23
Tori:
V PHP to ale bude až zbytečně složité pokud bude chtít mít vše na jedné stránce a zachovat hodnoty předchozích vyplněných políček (načítání session, kontrolování co už v session je co není, podle toho vyplňování value...) Martos: JavaScriptem by se to psalo asi nějak takto: <td><input type="text" size="33" name="jmeno" id="input1"></td><input type="button" id="odeslat1" onClick="zobraz(1)">Další</button></td> function zobraz(i) {
if (document.getElementById('input'+i).value == "")
{
alert("Pole není vyplněno!");
return;
}
i++;
document.getElementById('input'+i).style.display = "block";
document.getElementById('input'+i).style.display = "block";
}První položku s tlačítkem tu máš napsanou. Druhé dáš id input2 a id odeslat2 a zobraz(2). Každé další pak vždycky číslo o jedna větší u všeho. A všem tlačítkum i inputum kromě prvního nastavíš display: none; |
||
|
Časová prodleva: 5 dní
|
|||
| fd Profil * |
#6 · Zasláno: 6. 8. 2011, 22:52:37
fd
|
||
|
Časová prodleva: 13 let
|
|||
0