Autor Zpráva
MilanJ
Profil
#1 · Zasláno: 3. 8. 2006, 09:41:00 · Upravil/a: MilanJ
Odpovědět Citovat
Řeším následující problém... mám SELECT (viz níže), který obsahuje několik položek.
Když žádná nevyhovuje, má uživatel zvolit položku other a v tu chvíli potřebuji, aby se zobrazilo políčko pro ruční zadání
<input name="jiny" type="text" id="jiny">, které bylo do téhle chvíle CSS stylem zakázáno, resp. mělo vlastnost display='none'; .
Vím, že změnu visibility udělám pomocí document.getElementById('jiny').style.display='block';, jak ale zařídím, aby se po kliknutí na other v SELECTu rovnou zobrazil INPUT ?


<select name="select">
<option>choose Country</option>
<option>Czech Republic</option>
<option>Germany</option>
<option>Austria</option>
<option>Russia</option>
<option>USA</option>
<option>other</option>
</select>


Nemám velké zkušennosti s JS, předem děkuji.
WanTo
Profil
#2 · Zasláno: 3. 8. 2006, 09:59:09
Odpovědět Citovat
Hotovo :-)


Choose country:
<select name="select" onchange = "if(this.value == 'other') document.getElementById('other').style.display = ''; else document.getElementById('other').style.display = 'none';">
<option>Czech Republic</option>
<option>Germany</option>
<option>Austria</option>
<option>Russia</option>
<option>USA</option>
<option>other</option>
</select>
<br>

<span id = "other" style = "display: none;">
Other:
<input type = "text" name = "other">
</span>
MilanJ
Profil
#3 · Zasláno: 3. 8. 2006, 10:05:27
Odpovědět Citovat
Není někde chybička? ...nefunguje to
WanTo
Profil
#4 · Zasláno: 3. 8. 2006, 10:07:29
Odpovědět Citovat
MilanJ
Kde ti to nefunguje? Testoval jsem to v Opeře a bez problémů.
MilanJ
Profil
#5 · Zasláno: 3. 8. 2006, 10:08:29
Odpovědět Citovat
Tak už to funguje, chybělo mi zadání VALUE. Moc díky.;-)
MilanJ
Profil
#6 · Zasláno: 3. 8. 2006, 10:32:53 · Upravil/a: MilanJ
Odpovědět Citovat
WanTo
Nastala malá/velká komplikace. Tvůj script funguje jak má, super, ale je to trošku složitější...
Mrkni na níže uvedený zdroják celé stránky. V podstatě potřebuju, aby to fungovalo i s tím swapováním tak, aby se po kliknutí na Other zobrazil <DIV id="test">... (Tvůj script jsem v tomhle příkladu vynechal, něfachá to)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" title="Default style" href="/reg/css/screen_Annonce.css">
<link rel="stylesheet" type="text/css" media="screen" title="Default style" href="/reg/css/annonceScreen.css">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<meta http-equiv="Content-Language" content="cs">
<title>test</title>

<script type="text/javascript">

function swap_subregion(sel) {
var i,idx,opt;
idx=document.forms[0].ad_region.selectedIndex;
idx=document.forms[0].ad_region.options.item(idx).value;
if (idx==0) return;
//alert(idx+"->"+regn[idx]);
for (i=document.forms[0].ad_subregion.length-1;i>=1;i--) {
document.forms[0].ad_subregion.remove(i);
}
for (i=0;i<regn[idx].length;i++) {
opt=document.createElement("OPTION");
opt.text=regn[idx][i];
opt.value=regid[idx][i];
if (sel==regid[idx][i]) opt.selected=true;
if(document.all)
document.forms[0].ad_subregion.add(opt);
else
document.forms[0].ad_subregion.add(opt,null);
}
}

var regn=new Array();
var regid=new Array();

regn[1]=new Array();
regid[1]=new Array();
regn[1][0]="Andorra";regid[1][0]=1;
regn[1][1]="Austria";regid[1][1]=2;
regn[1][2]="Belgium";regid[1][2]=3;
regn[1][3]="Cyprus";regid[1][3]=4;
regn[1][4]="Denmark";regid[1][4]=17;
regn[1][5]="Finland";regid[1][5]=5;
regn[1][6]="France";regid[1][6]=6;
regn[1][7]="Germany";regid[1][7]=7;
regn[1][8]="Greece";regid[1][8]=8;
regn[1][9]="Iceland";regid[1][9]=9;
regn[1][10]="Ireland";regid[1][10]=10;
regn[1][11]="Italy";regid[1][11]=11;
regn[1][12]="Luxembourg";regid[1][12]=12;
regn[1][13]="Malta";regid[1][13]=13;
regn[1][14]="Monaco";regid[1][14]=14;
regn[1][15]="Netherlands";regid[1][15]=15;
regn[1][16]="Norway";regid[1][16]=16;
regn[1][17]="Portugal";regid[1][17]=17;
regn[1][18]="Spain";regid[1][18]=18;
regn[1][19]="Sweden";regid[1][19]=19;
regn[1][20]="Switzerland";regid[1][20]=20;
regn[1][21]="UK";regid[1][21]=21;
regn[1][22]="Other";regid[1][22]=22;


regn[2]=new Array();
regid[2]=new Array();
regn[2][0]="Bulgaria";regid[2][0]=23;
regn[2][1]="Croatia";regid[2][1]=24;
regn[2][2]="Czech Republic";regid[2][2]=25;
regn[2][3]="Estonia";regid[2][3]=26;
regn[2][4]="Hungary";regid[2][4]=27;
regn[2][5]="Latvia";regid[2][5]=28;
regn[2][6]="Lithuania";regid[2][6]=29;
regn[2][7]="Poland";regid[2][7]=30;
regn[2][8]="Romania";regid[2][8]=31;
regn[2][9]="Russia";regid[2][9]=32;
regn[2][10]="Serbia & Mont.";regid[2][10]=33;
regn[2][11]="Slovakia";regid[2][11]=34;
regn[2][12]="Slovenia";regid[2][12]=35;
regn[2][13]="Turkey";regid[2][13]=36;
regn[2][14]="Ukraine";regid[2][14]=37;
regn[2][15]="Other";regid[2][15]=38;


regn[3]=new Array();
regid[3]=new Array();
regn[3][0]="Algeria";regid[3][0]=39;
regn[3][1]="Bahrain";regid[3][1]=40;
regn[3][2]="Botswana";regid[3][2]=41;
regn[3][3]="Egypt";regid[3][3]=42;
regn[3][4]="Ethiopia";regid[3][4]=43;
regn[3][5]="Iran";regid[3][5]=44;
regn[3][6]="Iraq";regid[3][6]=45;
regn[3][7]="Israel";regid[3][7]=47;
regn[3][8]="Jordan";regid[3][8]=48;
regn[3][9]="Kenya";regid[3][9]=49;
regn[3][10]="Kuwait";regid[3][10]=50;
regn[3][11]="Lebanon";regid[3][11]=51;
regn[3][12]="Madagascar";regid[3][12]=52;
regn[3][13]="Mauritius";regid[3][13]=53;
regn[3][14]="Morocco";regid[3][14]=54;
regn[3][15]="Pakistan";regid[3][15]=55;
regn[3][16]="Qatar";regid[3][16]=56;
regn[3][17]="Tanzania";regid[3][17]=57;
regn[3][18]="Saudi Arabia";regid[3][18]=58;
regn[3][19]="Seychelles";regid[3][19]=59;
regn[3][20]="Somalia";regid[3][20]=60;
regn[3][21]="Somalia";regid[3][21]=61;
regn[3][22]="Syrian Arab Republic";regid[3][22]=62;
regn[3][23]="Tunisia";regid[3][23]=63;
regn[3][24]="United Arab Emirates";regid[3][24]=64;
regn[3][25]="Yemen";regid[3][25]=65;
regn[3][26]="Other";regid[3][26]=66;


regn[4]=new Array();
regid[4]=new Array();
regn[4][0]="Argentina";regid[4][0]=67;
regn[4][1]="Belize";regid[4][1]=68;
regn[4][2]="Bolivia";regid[4][2]=69;
regn[4][3]="Brazil";regid[4][3]=70;
regn[4][4]="Chile";regid[4][4]=71;
regn[4][5]="Costa Rica";regid[4][5]=72;
regn[4][6]="Ecuador";regid[4][6]=73;
regn[4][7]="Mexico";regid[4][7]=74;
regn[4][8]="Paraguay";regid[4][8]=75;
regn[4][9]="Peru";regid[4][9]=76;
regn[4][10]="Uruguay";regid[4][10]=77;
regn[4][11]="Venezuela";regid[4][11]=78;
regn[4][12]="Other";regid[4][12]=79;


regn[5]=new Array();
regid[5]=new Array();
regn[5][0]="Bahamas";regid[5][0]=80;
regn[5][1]="Barbados";regid[5][1]=81;
regn[5][2]="Bermuda";regid[5][2]=82;
regn[5][3]="Canada";regid[5][3]=83;
regn[5][4]="Cuba";regid[5][4]=84;
regn[5][5]="Dominican Republic";regid[5][5]=85;
regn[5][6]="Ecuador";regid[5][6]=86;
regn[5][7]="Haiti";regid[5][7]=87;
regn[5][8]="Jamaica";regid[5][8]=88;
regn[5][9]="United States of America";regid[5][9]=89;
regn[5][10]="Other";regid[5][10]=90;


regn[6]=new Array();
regid[6]=new Array();
regn[6][0]="Australia";regid[6][0]=91;
regn[6][1]="Brunei";regid[6][1]=92;
regn[6][2]="China";regid[6][2]=93;
regn[6][3]="Fiji";regid[6][3]=94;
regn[6][4]="Hong Kong";regid[6][4]=95;
regn[6][5]="India";regid[6][5]=96;
regn[6][6]="Indonesia";regid[6][6]=97;
regn[6][7]="Japan";regid[6][7]=98;
regn[6][8]="Kazakhstan";regid[6][8]=99;
regn[6][9]="Korea";regid[6][9]=100;
regn[6][10]="Macao";regid[6][10]=101;
regn[6][11]="Malaysia";regid[6][11]=102;
regn[6][12]="Maldives";regid[6][12]=103;
regn[6][13]="Nepal";regid[6][13]=104;
regn[6][14]="New Zealand";regid[6][14]=105;
regn[6][15]="Philippines";regid[6][15]=106;
regn[6][16]="Singapore";regid[6][16]=107;
regn[6][17]="Sri Lanka";regid[6][17]=108;
regn[6][18]="Taiwan";regid[6][18]=109;
regn[6][19]="Thailand";regid[6][19]=110;
regn[6][20]="USA - Hawaii";regid[6][20]=111;
regn[6][21]="Vietnam";regid[6][21]=112;
regn[6][22]="Other";regid[6][22]=113;


function init(){
checkForm.init();
changeFields(document.vlozeniInzeratu.ad_text_type.value);
return(true);
}

</script>



<style type="text/css">
<!--
#test {
position:absolute;
left:26px;
top:85px;
width:119px;
height:36px;
z-index:1;
background-color: #009999;
display: none;
}
-->
</style>
</head>

<body>

<div id="test"></div>
<form method="post" enctype="multipart/form-data" id="vlozeniInzeratu" name="vlozeniInzeratu">
<table class="formTable" summary="Data inzerátu">
<tr>
<th>Region:</th>
<td>
<select name="ad_region" onchange="swap_subregion(0)">
<option value="">--choose--</option>
<option value="1" >Western Europe</option>
<option value="2">Central &amp; Eastern Europe</option>
<option value="3">Africa &amp; Middle East</option>
<option value="4">Central &amp; South America</option>
<option value="5">North America &amp; Caribic</option>
<option value="6" >Asia – Pacific</option>
</select>
</td>
</tr>
<tr>
<th>Oblast:</th>
<td>
<select name="ad_subregion">
<option value="">--choose--</option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
WanTo
Profil
#7 · Zasláno: 3. 8. 2006, 10:34:51
Odpovědět Citovat
Prosímtě, nejdřív mi řekni, co to má vlastně dělat. Jinak se nedoberu k žádnému smysluplnému výsledku.
MilanJ
Profil
#8 · Zasláno: 3. 8. 2006, 10:37:34
Odpovědět Citovat
Vybereš Region a na základě regionu se vybere obsah Oblasti. A pokud v Oblasti vyberu other, měl by se zobrazit INPUT (pro ilustraci jsem v příkladu použil DIV id="test").
Snad to zní smysluplně.
MilanJ
Profil
#9 · Zasláno: 3. 8. 2006, 10:38:16
Odpovědět Citovat
Možná existuje jednodušší řešení, použil jsem script z webu.
WanTo
Profil
#10 · Zasláno: 3. 8. 2006, 10:52:39 · Upravil/a: WanTo
Odpovědět Citovat
Problém je zde ten, že value v případě zvolení Other není Other, ale nějaké číslo - regid. Takže v podmínce musí být ověření několika čísel.

Zde je funkční kód:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" title="Default style" href="/reg/css/screen_Annonce.css">
<link rel="stylesheet" type="text/css" media="screen" title="Default style" href="/reg/css/annonceScreen.css">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<meta http-equiv="Content-Language" content="cs">
<title>test</title>

<script type="text/javascript">
//skript jsem smazal, aby nezabíral místo
</script>



<style type="text/css">
<!--
/* styly taky */
-->
</style>
</head>

<body>

<form method="post" enctype="multipart/form-data" id="vlozeniInzeratu" name="vlozeniInzeratu">
<table class="formTable" summary="Data inzerátu">
<tr>
<th>Region:</th>
<td>
<select name="ad_region" onchange="swap_subregion(0)">
<option value="">--choose--</option>
<option value="1" >Western Europe</option>
<option value="2">Central &amp; Eastern Europe</option>
<option value="3">Africa &amp; Middle East</option>
<option value="4">Central &amp; South America</option>
<option value="5">North America &amp; Caribic</option>
<option value="6" >Asia – Pacific</option>
</select>
</td>
</tr>
<tr>
<th>Oblast:</th>
<td>
<select name="ad_subregion" onchange = "if(this.value == 22 || this.value == 38 || this.value == 66 || this.value == 79 || this.value == 90 || this.value == 113) document.getElementById('other').style.display = ''; else document.getElementById('other').style.display = 'none';">
<option value="">--choose--</option>
</select>
<span id = "other" style = "display: none;">
Other:
<input type = "text" name = "other">
</span>
</td>
</tr>
</table>
</form>
</body>
</html>
MilanJ
Profil
#11 · Zasláno: 3. 8. 2006, 10:57:12
Odpovědět Citovat
Perfektní! Moc díky.;-)
MilanJ
Profil
#12 · Zasláno: 3. 8. 2006, 11:57:31
Odpovědět Citovat
WanTo
Ještě jsem zkoušel přidat document.getElementById('other').focus(); do onChange za document.getElementById('other').style.display = '';, ale pak to nefunguje, ani když jsem přidal zubatý závorky pro blok kódu, asi chyba v syntaxi...tedy doufám že jen to.
WanTo
Profil
#13 · Zasláno: 3. 8. 2006, 12:02:46 · Upravil/a: WanTo
Odpovědět Citovat
Pošli mi sem ten kus kódu.
MilanJ
Profil
#14 · Zasláno: 3. 8. 2006, 12:14:53
Odpovědět Citovat
WanTo
tady je to, co jsem napsal do onChange
onchange = "if(this.value == 22 || this.value == 38 || this.value == 66 || this.value == 79 || this.value == 90 || this.value == 113) {document.getElementById('other').style.display = ''; document.getElementById('other').focus();} else {document.getElementById('other').style.display = 'none';}"
WanTo
Profil
#15 · Zasláno: 3. 8. 2006, 12:20:26
Odpovědět Citovat
MilanJ
Už vidím chybu. #other totiž nemá žádnou metodu focus(), protože není formulářový prvek, ale obyčejný span. Takže přiřaď nějaké ID přímo inputu a pak to bude fungovat.
MilanJ
Profil
#16 · Zasláno: 3. 8. 2006, 12:22:56
Odpovědět Citovat
Jooo...no dyť jo. Už po několikáté...MOC DÍK.;-)
MilanJ
Profil
#17 · Zasláno: 4. 8. 2006, 12:54:52
Odpovědět Citovat
WanTo
Tvůj script využívám ve formuláři. Problém nastává ve chvíli, kdy formulář odešlu... Pokud nějaký prvek ve fotmuláři není vyplněný, a já mám pomocí JS ošetřeno, že se vyplnit musí, načte se celý formulář znovu. U klasických SELECTů jsem pomocí PHP nastavil, aby si hodnotu pamatovali, ale s tímhle si rady nevím.
Jde mi o to, aby se hodnoty v SELECTu, který geberuje Tvůj JS, zachovali a nezdržovali opětovným vyplněním.
Je to řešitelný?
MilanJ
Profil
#18 · Zasláno: 4. 8. 2006, 13:46:14
Odpovědět Citovat
Možná by to vyřešila úprava scriptu v části, kde se generuje TAG:


for (i=0;i<regn[idx].length;i++) {
opt=document.createElement("OPTION");
opt.text=regn[idx][i];
opt.value=regid[idx][i];
if (sel==regid[idx][i]) opt.selected=true;
if(document.all)
document.forms[0].country.add(opt);
else
document.forms[0].country.add(opt,null);
}


Při odeslání formuláře znám hodnotu zvolené položky, tak by snad nějak mohl při generování TAGu OPTION za určité podmínky vložit selected pro tag OPTION.
MilanJ
Profil
#19 · Zasláno: 6. 8. 2006, 16:12:38
Odpovědět Citovat
Následující kontrukci moc nerozumím, co znamená?
if(document.all)
Časová prodleva: 18 let
Toto téma je uzamčeno. Odpověď nelze zaslat.

0