Autor Zpráva
MilanJ
Profil
Ř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
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
Není někde chybička? ...nefunguje to
WanTo
Profil
MilanJ
Kde ti to nefunguje? Testoval jsem to v Opeře a bez problémů.
MilanJ
Profil
Tak už to funguje, chybělo mi zadání VALUE. Moc díky.;-)
MilanJ
Profil
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
Prosímtě, nejdřív mi řekni, co to má vlastně dělat. Jinak se nedoberu k žádnému smysluplnému výsledku.
MilanJ
Profil
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
Možná existuje jednodušší řešení, použil jsem script z webu.
WanTo
Profil
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
Perfektní! Moc díky.;-)
MilanJ
Profil
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
Pošli mi sem ten kus kódu.
MilanJ
Profil
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
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
Jooo...no dyť jo. Už po několikáté...MOC DÍK.;-)
MilanJ
Profil
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
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
Následující kontrukci moc nerozumím, co znamená?
if(document.all)
Toto téma je uzamčeno. Odpověď nelze zaslat.