Diskuze: JavaScript ve formuláři.

Libor HUDÁK

Člen

Libor HUDÁK:8.5.2018 22:53

Ahoj, prosím o radu...
dělám formulář, kde bych potřeboval po vyplnění hodnoty v "roletě" zobrazit další span s inputy...

mám to zatím takto:

<head>
<script language="JavaScript" type="text/javascript">
function Zobraz(Vstup)
{ Hodnota = Vstup.value;
Segment = Vstup.name+'_podrobnosti.style.display';
/*document.write(Hodnota, Segment);*/
if (Hodnota=='ano') {Rif_podrobnosti.style.display='';}
else {Rif_podrobnosti.style.display='none';}
}
</script>
</head>

</div>
</form>
</body>

potřeboval bych aby script byl univerzální a tedy aby mi v podmínce místo Rif_podrobnosti
fungovala proměnná Segment...

nedaří se mi to nahradit a najít kde mám chybu...

díky za případnou radu

Libor

Odpovědět

8.5.2018 22:53

Peter Mlich

Člen

Peter Mlich:9.5.2018 7:35

Mozna je tam vice chyb, ale na prvni pohled si vsimnu

Segment = Vstup.name+'_podrobnosti.style.display'; // spatne
alert(Segment)

Zkus pouzivat nejaky nastroj, ktery obarvuje kod. Treba pspad. Nabo webovy prohlizec ma webovou konzolu. Ve Firefox treba Nastroje - vyvojarske nastroje - webova konzola nebo konzola. Menu zapnes kliknutim do zahlavi okna - menu bar, lista s nastroji, pokud nemas zapnute zobrazovani menu.

Editováno 9.5.2018 7:38

Nahoru Odpovědět

9.5.2018 7:35

Libor HUDÁK

Člen

Libor HUDÁK:9.5.2018 9:57

Díky...

pracuji v DreamWeaveru...
ten zvýrazňuje syntaxi u html, php, ale s JS začínám něco tam zobrazuje,
ale zkusím i to, co mi doporučuješ...

Alert zobrazuje to co chci mít obsahem proměnné (Rif_podrobnosti.style.display),
ale podmínka neumi přiřadit vlasnost css

potřeboval bych aby mi fungovala náhrada přesného popisu "objektu"
popisem v proměnné Segment takto nějak:

Segment = Vstup.name+'_podrobnosti.style.display';
if (Hodnota=='ano') {Segment='';}
else {Segment='none';}

a ono se tomu nechce... <:(

prosím ještě jednou o pohled znaleckým okem...
asi je to nějaká blbá drobnost v systaxi...

díky za pomoc...

Libor

Nahoru Odpovědět

9.5.2018 9:57

Peter Mlich

Člen

Peter Mlich:9.5.2018 11:30

Alert zobrazuje obsah promenne. A mel zobrazovat pravdepodobne string. Jinymi slovy, mas to cele spatne.
Navic, nevim teda jak js v html5, ale k objektu se dostanes podle id pomoci document.getElementById. Cili, to melo vypadat nejak takto:

obj = document.getElementById('Vstup.name+'_podrobnosti');
obj.style.display = Hodnota!=='ne' ? '' : 'none';

Pouzil bych negaci. Kdyz tam nebude ne, at se to zobrazi, jinak to bude skryte. Kdyz bys to mel opacne =='ano', tak to bude schovane v pripadech '', 'ne', 'cokoliv'. A vetsinou je default hodnota prazdna ''. Takze by se to skrylo. A nebo to schvalne tak chces, to nevim.

Navic by tam mohl byt problem s tim select.value. Mozna v html5 to funguje, nemam otestovano. Ale ve starsich prohlizecich se carovalo se selectedIndex

el_sel.options[el_sel.selectedIndex].value

Editováno 9.5.2018 11:33

Nahoru Odpovědět

9.5.2018 11:30

Libor HUDÁK

Člen

Libor HUDÁK:9.5.2018 18:56

děkuji za navedení... takže funkční výsledek:

<!doctype html>
<html>
<meta charset="windows-1250">
<head>
<script language="JavaScript" type="text/javascript">
function Zobraz(Vstup)
{ Hodnota = Vstup.value;
Objekt = Vstup.id+'Podrobnosti';
var Segment = document.getElementById(Objekt);
if (Hodnota=='ano') {Segment.style.display='';}
else {Segment.style.display='none';}
}
</script>
</head>
<body>
<form>
Rif:
<select id="Rif" onClick="Zobraz(this);" >
<option value="ano">ano</option>
<option value="ne">ne</option>
</select>
<span id="RifPodrobnosti"> xxx </span>
</form>
</body>
</html>

problém byl v tom (mimo jiné), že get element se s vypočteným argumentem muselo deklarovat jako var (proměnná), jinak algorytmus v žádné variante nefungoval...

děkuji za pomoc při tvorbě mého prvního JavaScriptu...

Libor

Nahoru Odpovědět

9.5.2018 18:56

Michal Štěpánek

Člen

Michal Štěpánek:10.5.2018 7:53

Když na vložení "kódu" použiješ tlačítko "</>" (druhé zleva) bude ten kód zobrazen mnohem přehledněji...

<!doctype html>
<html>
<meta charset="windows-1250">
<head>
<script language="JavaScript" type="text/javascript">
function Zobraz(Vstup)
{ Hodnota = Vstup.value;
Objekt = Vstup.id+'Podrobnosti';
var Segment = document.getElementById(Objekt);
if (Hodnota=='ano') {Segment.style.display='';}
else {Segment.style.display='none';}
}
</script>
</head>
<body>
<form>
Rif:
<select id="Rif" onClick="Zobraz(this);" >
<option value="ano">ano</option>
<option value="ne">ne</option>
</select>
<span id="RifPodrobnosti"> xxx </span>
</form>
</body>
</html>

No uznej, nekouká se na to lépěji?

Editováno 10.5.2018 7:54

Nahoru Odpovědět

10.5.2018 7:53

Nikdy neříkej nahlas, že to nejde. Vždycky se totiž najde blbec, který to neví a udělá to...

Libor HUDÁK

Člen

Libor HUDÁK:10.5.2018 16:42

uznávám...<:)
budu ho používat...

díky...

Nahoru Odpovědět

10.5.2018 16:42

Marian Benčat

Člen

Marian Benčat:10.5.2018 17:13

Ten syntax hajlajt šel z toho raději na parek

Nahoru Odpovědět

10.5.2018 17:13

Totalitní admini..

Člen

:10.5.2018 20:12

Marián výnimočne s tebou súhlasím

Nahoru Odpovědět

10.5.2018 20:12

Člen

:10.5.2018 20:59

Pridávam sa s iným návrhom, jasne, že s Vue

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <form>
      Rif:
      <select v-model="isVisible">
        <option value="1">ano</option>
        <option value="0">ne</option>
      </select>
      <span v-if="isVisible"> xxx </span>
    </form>
    <script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
    <script>
      new Vue({
        el: 'form',
        data: { isVisible: 1 }
      })
    </script>
  </body>
</html>

Nahoru Odpovědět

10.5.2018 20:59

Libor HUDÁK

Člen

Libor HUDÁK:10.5.2018 21:07

upřímně:
za prvé mi to nefunguje...
a za druhé tak nějak nerad používám řešení třetích stran...
budu to pracně studovat, ladit, jakákoli změna je pracná nebo nemožná, a vysvětli to klientovi
za půl roku mi to upgradují, za dva roky smažou...

a investovaný čas se může proměnit ve vakuum...

co já se nasnažil ve "flashi" a kde je dnes...

L.

Nahoru Odpovědět

10.5.2018 21:07

Člen

:10.5.2018 21:47

Písal som to z nudy vo vlaku, na mobile, takže je možné, že tam mám niekde preklep. Ale ... hoci vaše argumenty majú logiku, v praxi to nefunguje. Nemáte čas písať si pri každom projekte JavaScript po svojom, nejaký framework je dnes proste nutnosť. Aspoň to jQuery, keď už nič iné. A že ho časom upgradujú či zmažú vás trápiť nemusí, veď ten fw necháte pripnutý zo súboru zo svojho servera.

Nahoru Odpovědět

10.5.2018 21:47

Člen

:10.5.2018 21:55

Funkčná verzia.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <form>
      Rif:
      <select v-model="isVisible">
        <option :value="true">ano</option>
        <option :value="false">ne</option>
      </select>
      <span v-if="isVisible"> xxx </span>
    </form>
    <script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
    <script>
      new Vue({
        el: 'form',
        data: { isVisible: true }
      })
    </script>
  </body>
</html>

Nahoru Odpovědět

10.5.2018 21:55

Libor HUDÁK

Člen

Libor HUDÁK:12.5.2018 10:40

ano, už funguje... <:) díky...
jQuery, Bootstrap, Wow.js jsou třeba...
klientovi se tam musí vždy něco míhat, aby člověk působil trochu jako guru...
jinak má pocit, že by to přece zvládl sám, a ještě mnohem rychleji...

<:)

děkuji za inspiraci

Libor

Nahoru Odpovědět

12.5.2018 10:40

Člen

:12.5.2018 13:06

Nie, tak to opäť nefunguje Bootstrap sa rozmohol preto, že je jednoduchší ako napríklad Foundation a šetrí čas. A jQuery je prakticky o tomto istom, šetrí čas a funguje crossbrowser. Základ je tento: nikto nerobí projekty "z gruntu", bez frameworkov. A ani ty nebudeš. Lebo ak to skúsiš, prevalcuje ťa konkurencia ktorá urobí daný projekt rýchlejšie a kvalitnejšie ako ty. Bodka. Bootstrap, jQuery, ale aj Vue, React či Angular totiž nie sú o tom aby si pôsobil ako guru, a už vôbec nie o grafických efektíkoch, ale aby si bol efektívnejší. Napríklad Vue ti predovšetkým pomôže zaviesť do kódu poriadok. Stránku máš prehľadne organizovanú, vyskladanú z komponentov, ktoré sú navyše tiež písané deklaratívne, čiže prehľadnejšie, ako pri klasickom, imperatívnom prístupe. A o tomto to je. Takže chválim tvoju snahu byť guru a písať si veci po svojom, ale priprav sa, že tak či onak skončíš pri nejakom frameworku

Nahoru Odpovědět

12.5.2018 13:06

Libor HUDÁK

Člen

Libor HUDÁK:12.5.2018 14:44

ano, frameworky je nezbytné používat, ale myslím, že střídmě, že to není všelék...
těch přilinkovaných knihoven a následných problémů s CSS to je opruz...

Pořádek v kódu je nutná věc... bohužel píši v php a tak to prolnutí s html není vždy ideální a přehledné. Pracuji v DreamWeaveru, který šikovně umí bloky programu "sbalit" a to mi připadá jako významná pomoc... Můžeš mít hlavní strukturu a v ní sbalené části kódu, část rozbalíš upravíš a zase sbalíš....a to mi připadá praktické.
Ale dám na tebe a názvy, které uvádíš, a já ani neznám "prolustruju"...

<:) L.

Nahoru Odpovědět

12.5.2018 14:44

Člen

:13.5.2018 8:04

Zasa nie - žiadny kopec prilinkovaných knižníc a nula problémov s CSS Ty si to pletieš s Wordpress, ja hovorím o niečom úplne inom Plus, napríklad Vue na frontende sa veľmi pekne integruje s PHP na backende, preto si ho aj Laravel vybral za "dvornú" knižnicu. A posledný bod, zbav sa Dreamweaver-u Použi WebStorm, alebo Atom, prípadne Visual Studio Code, to sa mi zatiaľ páči najviac. A ak k nemu použiješ GitKraken, nemusíš ani ovládať Git - clone, push, pull, fork, reset či merge robím vizuálne, už si ani len nepamätám ani jeden gitový príkaz A oboje, aj VS Code aj Kraken idú na Win, Linux aj Mac a oba zadarmo - a tú tvoju obľúbenú vlastnosť má každý editor, to nie je dôvod ostať na Dreamwear, ten fakt na vývoj používaš asi len ty

Nahoru Odpovědět

13.5.2018 8:04

Člen

:13.5.2018 14:50

PS: Ešte Ti pripájam ten istý príklad, ale so znovupoužiteľným komponentom, lebo vlastne tak si to chcel, znovupoužiteľné...

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <form>
      <my-select label="Rif" text="xxx"></my-select><br>
      <my-select label="Rif2" text="yyy"></my-select>
    </form>

    <template id="mySelect">
      <div>
        {{ label }}
        <select v-model="isVisible">
          <option :value="true">ano</option>
          <option :value="false">ne</option>
        </select>
        <span v-if="isVisible">{{ text }}</span>
      </div>
    </template>

    <script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
    <script>
      Vue.component('my-select', {
        props: ['label', 'text'],
        template: '#mySelect',
        data: _ => ({ isVisible: true })
      })
      new Vue({ el: 'form' })
    </script>
  </body>
</html>

Editováno 13.5.2018 14:52

Nahoru Odpovědět

13.5.2018 14:50

Nejčastěji vyhledáváné

Diskuze: JavaScript ve formuláři.