Autor Zpráva
merlinok
Profil
Dobrý den,
potřeboval bych pomoc s jednou stránkou kterou používám na registraci.

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>Registrace</title>
</head>
<form name="registace" method="POST" action="phpSecurePages/process.php">
  <table width="75%" border="1" cellspacing="0" cellpadding="0" align="center">
    <tr valign="middle"> 
      <td colspan="2" bgcolor="#FFFFCC"> 
        <div align="center"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2">Registrace 
        </font></b></div>
    </td>
  </tr>
    <tr valign="middle"> 
      <td colspan="2"><font face="Verdana, Arial, Helvetica, sans-serif" size="2">* 
        Políčka <font color="#990000">červeně</font> je nutno vyplnit</font></td>
  </tr>
    <tr valign="middle"> 
      <td width="17%" bgcolor="#CCCCCC"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#990000">Jméno</font></b></td>
      <td width="83%"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2">
        &nbsp;<input type="text" name="username" size="20" maxlength="20">
        </font></b></td>
  </tr>
    <tr valign="middle"> 
      <td width="17%" bgcolor="#CCCCCC"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#990000">Heslo</font></b></td>
      <td width="83%"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2">
        &nbsp;<input type="password" name="password" size="20" maxlength="20">
        </font></b></td>
  </tr>
      <tr valign="middle"> 
      <td width="17%" bgcolor="#CCCCCC"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#990000">Postava</font></b></td>
      <td width="83%"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2">
        &nbsp;Vyberte si Rasu a Povolání
        </font></b></td>
  </tr>
      <tr valign="middle"> 
      <td width="17%" bgcolor="#CCCCCC"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#990000">Rasa</font></b></td>
      <td width="83%">
      <b><font face="Verdana, Arial, Helvetica, sans-serif" size="2">
        &nbsp;<select name="rasa" size="6">
              <option value="Člověk">Člověk
              <option value="Skřet">Skřet
              <option value="Elf">Elf
              <option value="Ork">Ork
              <option value="Temný elf">Temný Elf
              <option value="Trpaslík">Trpaslík
              </select>
        </font></b></td>
  </tr>
      <tr valign="middle"> 
      <td width="17%" bgcolor="#CCCCCC"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#990000">Povolání</font></b></td>
      <td width="83%">
      
      <b><font face="Verdana, Arial, Helvetica, sans-serif" size="2">
        &nbsp;<select name="job" size="9">
              <option value="Kouzelník">Kouzelník
              <option value="Nekromant">Nekromant
              <option value="Lovec">Lovec
              <option value="Vrah">Vrah
              <option value="Barbar">Barbar
              <option value="Paladin">Paladin
              <option value="Upír">Upír
              <option value="Vlkodlak">Vlkodlak
              <option value="Dělník">Dělník
              </select>
        </font></b></td>
  </tr>
    <tr valign="middle"> 
      <td colspan="2" bgcolor="#FFFFCC">
        <div align="center"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2"></font></b><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2"> 
          <input type="submit" name="Submit" value="Submit">&nbsp;
          <input type="reset" name="Reset" value="Reset">
          </font></b></div>
      </td>
  </tr>
</table>
</form>
</body>
</html>

Když se na to podíváte tak je to normální formulář v tabulce. Můj problém spočívá vtom, že když kliknu třeba na člověk tak by se vedle toho měl objevit text o té rase.
Když potom kliknu na jakékoli povolání tak aby se vedle povolání objevil další text o povolání.
Snad mě chápete a pomůžete.
pmg
Profil
1. Do hlavičky (<head>) vlož
<script type="text/javascript">
var postava = {
	'Člověk': 'Popis člověka.',
	'Skřet': 'Popis skřeta.',
	'Elf': 'Popis elfa.',
	'Ork': 'Popis orka.',
	'Temný elf': 'Popis temného elfa.',
	'Trpaslík': 'Popis trpaslíka.'
}

function describe(element, titles, target) {
	target = document.getElementById(target);
	var title = titles[element.value];
	target.innerHTML = title ? title : '';
};
</script>


2. Do selektu pro výběr osoby přidej atribut onchange takto:
<select name="rasa" size="6" onchange="describe(this, postava, 'popis')">

3. Přidej do tabulky další (prázdnou) buňku, ve které se má zobrazit popis.

<td id="popis"></td>

Pokud to chceš uvnitř buňky, použij <div id="popis"></div>. Důležité je ale to id="popis".

4. Když budeš chtít popis i pro povolání, zkopíruj to var postava = { ... }; z bodu 1. Text postava změň na povolani a doplň potřebné popisky. Podle bodu 2 uprav druhý select, ale místo describe(this, postava, 'popis') napiš describe(this, povolani, 'popis2'); třetí krok obdobně, jen id="popis2".

Půjde to?
merlinok
Profil
Tak mi to funguje skvěle, až na to že se mi ta nová buňka objeví vždy úplně na pravo a né hned vedle výběru ale vytvoří se nový sloupec (vpravo)
merlinok
Profil
Tak jsem to předělal přes Microsoft Word a funguje to skvěle... teď si to jen optimalizuju pro moji starou verzi (neupravenou wordem)...
Mockrát ti děkuji, sám bych na to nepřišel.
merlinok
Profil
nevím proč ale tenhle kód co mi vyhodil word je trochu divnej...

<html xmlns:v="urn:schemas-microsoft-com:vml"

xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:w="urn:schemas-microsoft-com:office:word"
xmlns="http://www.w3.org/TR/REC-html40">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<meta name=ProgId content=Word.Document>
<meta name=Generator content="Microsoft Word 11">
<meta name=Originator content="Microsoft Word 11">
<link rel=File-List href="registrace_soubory/filelist.xml">
<link rel=Edit-Time-Data href="registrace_soubory/editdata.mso">
<!--[if !mso]>
<style>
v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style>
<![endif]-->
<title>Registrace</title>
<!--[if gte mso 9]><xml>
<o:DocumentProperties>
<o:Author>AVALON</o:Author>
<o:LastAuthor>AVALON</o:LastAuthor>
<o:Revision>2</o:Revision>
<o:TotalTime>1</o:TotalTime>
<o:Created>2008-08-04T23:44:00Z</o:Created>
<o:LastSaved>2008-08-04T23:46:00Z</o:LastSaved>
<o:Pages>1</o:Pages>
<o:Words>57</o:Words>
<o:Characters>342</o:Characters>
<o:Company>DOMA</o:Company>
<o:Lines>2</o:Lines>
<o:Paragraphs>1</o:Paragraphs>
<o:CharactersWithSpaces>398</o:CharactersWithSpaces>
<o:Version>11.5606</o:Version>
</o:DocumentProperties>
</xml><![endif]--><!--[if gte mso 9]><xml>
<w:WordDocument>
<w:SpellingState>Clean</w:SpellingState>
<w:GrammarState>Clean</w:GrammarState>
<w:FormsDesign/>
<w:HyphenationZone>21</w:HyphenationZone>
<w:ValidateAgainstSchemas/>
<w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid>
<w:IgnoreMixedContent>false</w:IgnoreMixedContent>
<w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText>
<w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel>
</w:WordDocument>
</xml><![endif]--><!--[if gte mso 9]><xml>
<w:LatentStyles DefLockedState="false" LatentStyleCount="156">
</w:LatentStyles>
</xml><![endif]-->
<style>
<!--
/* Font Definitions */
@font-face
{font-family:Verdana;
panose-1:2 11 6 4 3 5 4 4 2 4;
mso-font-charset:238;
mso-generic-font-family:swiss;
mso-font-pitch:variable;
mso-font-signature:536871559 0 0 0 415 0;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{mso-style-parent:"";
margin:0cm;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:12.0pt;
font-family:"Times New Roman";
mso-fareast-font-family:"Times New Roman";}
@page Section1
{size:595.3pt 841.9pt;
margin:70.85pt 70.85pt 70.85pt 70.85pt;
mso-header-margin:35.4pt;
mso-footer-margin:35.4pt;
mso-paper-source:0;}
div.Section1
{page:Section1;}
-->
</style>
<!--[if gte mso 10]>
<style>
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:"Normální tabulka";
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin:0cm;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.0pt;
font-family:"Times New Roman";
mso-ansi-language:#0400;
mso-fareast-language:#0400;
mso-bidi-language:#0400;}
</style>
<![endif]-->
<script type="text/javascript">
var postava = {
'Člověk': 'Popis člověka.',
'Skřet': 'Popis skřeta.',
'Elf': 'Popis elfa.',
'Ork': 'Popis orka.',
'Temný elf': 'Popis temného elfa.',
'Trpaslík': 'Popis trpaslíka.'
}

function describe(element, titles, target) {
target = document.getElementById(target);
var title = titles[element.value];
target.innerHTML = title ? title : '';
};
</script>
<!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026"/>
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1"/>
</o:shapelayout></xml><![endif]-->
</head>

<body lang=CS style='tab-interval:35.4pt'>

<div class=Section1>

<form action="phpSecurePages/process.php" method=POST
enctype="application/x-www-form-urlencoded">

<div align=center>

<table class=MsoNormalTable border=1 cellspacing=0 cellpadding=0 width="75%"
style='width:75.0%;mso-cellspacing:0cm;mso-padding-alt:0cm 0cm 0cm 0cm'>
<tr style='mso-yfti-irow:0;mso-yfti-firstrow:yes;mso-row-margin-right:.4%' >
<td width="99%" colspan=3 style='width:99.6%;background:#FFFFCC;padding:0cm 0cm 0cm 0cm'>
<p class=MsoNormal align=center style='text-align:center'><b><span
style='font-size:10.0pt;font-family:Verdana'>Registrace </span></b></p>
</td>
<td style='mso-cell-special:placeholder;border:none;padding:0cm 0cm 0cm 0cm'
width="0%"><p class='MsoNormal'>&nbsp;</td>
</tr>
<tr style='mso-yfti-irow:1;mso-row-margin-right:.4%'>
<td width="99%" colspan=3 style='width:99.6%;padding:0cm 0cm 0cm 0cm'>
<p class=MsoNormal><span style='font-size:10.0pt;font-family:Verdana'>*
Políčka <span style='color:#990000'>červeně</span> je nutno vyplnit</span></p>
</td>
<td style='mso-cell-special:placeholder;border:none;padding:0cm 0cm 0cm 0cm'
width="0%"><p class='MsoNormal'>&nbsp;</td>
</tr>
<tr style='mso-yfti-irow:2;mso-row-margin-right:.4%'>
<td width="16%" style='width:16.94%;background:#CCCCCC;padding:0cm 0cm 0cm 0cm'>
<p class=MsoNormal><b><span style='font-size:10.0pt;font-family:Verdana;
color:#990000'>Jméno</span></b></p>
</td>
<td width="82%" colspan=2 style='width:82.66%;padding:0cm 0cm 0cm 0cm'>
<p class=MsoNormal><b><span style='font-size:10.0pt;font-family:Verdana'>&nbsp;<INPUT TYPE="text" MAXLENGTH="20" SIZE="20" NAME="username">
</span></b></p>
</td>
<td style='mso-cell-special:placeholder;border:none;padding:0cm 0cm 0cm 0cm'
width="0%"><p class='MsoNormal'>&nbsp;</td>
</tr>
<tr style='mso-yfti-irow:3;mso-row-margin-right:.4%'>
<td width="16%" style='width:16.94%;background:#CCCCCC;padding:0cm 0cm 0cm 0cm'>
<p class=MsoNormal><b><span style='font-size:10.0pt;font-family:Verdana;
color:#990000'>Heslo</span></b></p>
</td>
<td width="82%" colspan=2 style='width:82.66%;padding:0cm 0cm 0cm 0cm'>
<p class=MsoNormal><b><span style='font-size:10.0pt;font-family:Verdana'>&nbsp;<INPUT TYPE="password" MAXLENGTH="20" SIZE="20" NAME="password">
</span></b></p>
</td>
<td style='mso-cell-special:placeholder;border:none;padding:0cm 0cm 0cm 0cm'
width="0%"><p class='MsoNormal'>&nbsp;</td>
</tr>
<tr style='mso-yfti-irow:4;mso-row-margin-right:.4%'>
<td width="16%" style='width:16.94%;background:#CCCCCC;padding:0cm 0cm 0cm 0cm'>
<p class=MsoNormal><b><span style='font-size:10.0pt;font-family:Verdana;
color:#990000'>Postava</span></b></p>
</td>
<td width="82%" colspan=2 style='width:82.66%;padding:0cm 0cm 0cm 0cm'>
<p class=MsoNormal><b><span style='font-size:10.0pt;font-family:Verdana'>&nbsp;Vyberte
si Rasu a Povolání </span></b></p>
</td>
<td style='mso-cell-special:placeholder;border:none;border-bottom:outset 1.0pt'
width="0%"><p class='MsoNormal'>&nbsp;</td>
</tr>
<tr style='mso-yfti-irow:5'>
<td width="16%" style='width:16.94%;background:#CCCCCC;padding:0cm 0cm 0cm 0cm'>
<p class=MsoNormal><b><span style='font-size:10.0pt;font-family:Verdana;
color:#990000'>Rasa</span></b></p>
</td>
<td width="32%" style='width:32.26%;padding:0cm 0cm 0cm 0cm'>
<p class=MsoNormal><b><span style='font-size:10.0pt;font-family:Verdana'>&nbsp;<SELECT NAME="rasa" SIZE="6"
onchange="describe(this, postava, 'popis')">
<OPTION VALUE="Člověk">Člověk
<OPTION VALUE="Skřet">Skřet
<OPTION VALUE="Elf">Elf
<OPTION VALUE="Ork">Ork
<OPTION VALUE="Temn&yacute; elf">Temn
merlinok
Profil
<OPTION VALUE="Temn&yacute; elf">Temn&yacute; Elf
<OPTION VALUE="Trpasl&iacute;k">Trpasl&iacute;k
</SELECT>
  </span></b><o:p></o:p></p>
  </td>
  <td width="50%" style='width:50.4%;padding:0cm 0cm 0cm 0cm' id=popis>
  <p class=MsoNormal><o:p>&nbsp;</o:p></p>
  </td>
  <td width="0%" style='width:.4%;padding:0cm 0cm 0cm 0cm'>
  <p class=MsoNormal><o:p>&nbsp;</o:p></p>
  </td>
 </tr>
 <tr style='mso-yfti-irow:6'>
  <td width="16%" style='width:16.94%;background:#CCCCCC;padding:0cm 0cm 0cm 0cm'>
  <p class=MsoNormal><b><span style='font-size:10.0pt;font-family:Verdana;
  color:#990000'>Povolání</span></b></p>
  </td>
  <td width="32%" style='width:32.26%;padding:0cm 0cm 0cm 0cm'>
  <p class=MsoNormal><b><span style='font-size:10.0pt;font-family:Verdana'>&nbsp;<SELECT NAME="job" SIZE="9">
<OPTION VALUE="Kouzeln&iacute;k">Kouzeln&iacute;k
<OPTION VALUE="Nekromant">Nekromant
<OPTION VALUE="Lovec">Lovec
<OPTION VALUE="Vrah">Vrah
<OPTION VALUE="Barbar">Barbar
<OPTION VALUE="Paladin">Paladin
<OPTION VALUE="Up&iacute;r">Up&iacute;r
<OPTION VALUE="Vlkodlak">Vlkodlak
<OPTION VALUE="Děln&iacute;k">Děln&iacute;k
</SELECT>
  </span></b></p>
  </td>
  <td width="50%" style='width:50.4%;padding:0cm 0cm 0cm 0cm'>
  <p class=MsoNormal><o:p>&nbsp;</o:p></p>
  </td>
  <td width="0%" style='width:.4%;border:none;padding:0cm 0cm 0cm 0cm'>
  <p class=MsoNormal><span style='font-size:10.0pt'><o:p>&nbsp;</o:p></span></p>
  </td>
 </tr>
 <tr style='mso-yfti-irow:7;mso-yfti-lastrow:yes'>
  <td width="99%" colspan=3 style='width:99.6%;background:#FFFFCC;padding:0cm 0cm 0cm 0cm'>
  <p class=MsoNormal align=center style='text-align:center'><b><span
  style='font-size:10.0pt;font-family:Verdana'><INPUT TYPE="submit" ACTION="phpSecurePages/process.php" METHOD="POST" NAME="Submit">&nbsp;
  <INPUT TYPE="reset" NAME="Reset"></span></b></p>
  </td>
  <td width="0%" style='width:.4%;border:none;padding:0cm 0cm 0cm 0cm'>
  <p class=MsoNormal><span style='font-size:10.0pt'><o:p>&nbsp;</o:p></span></p>
  </td>
 </tr>
</table>

</div>

</form>

</div>

</body>

</html>
panther
Profil
merlinok
nevím proč ale tenhle kód co mi vyhodil word je trochu divnej...

a co jsi čekal? Že ti z Wordu vyleze krásný čistý, validní, sémantický a použitelný kód?

Chlapče, Word není HTML editor, na tvorbu stránek se nepoužívá.
pmg
Profil
U té původní tabulky byly procentuálně nastaveny rozměry buněk (celkem 100 %). Chtělo by to u těch ostatních řádků zvětšit colspan a rozměry upravit podle potřeb. Nepouštěl jsem se do toho, protože jsem nevěděl, jak přesně to chceš zobrazit.

Jestli to v tom Wordu funguje, zkus z něj třeba extrahovat jen tu tabulku...
merlinok
Profil
nějak se mi to z toho extrahovat nepovedlo, ale funguje to tak jak má a sem stím spokojen.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: