IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: JavaScript ve formuláři.

Aktivity
Avatar
Libor HUDÁK
Člen
Avatar
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="JavaS­cript" type="text/ja­vascript">
function Zobraz(Vstup)
{ Hodnota = Vstup.value;
Segment = Vstup.name+'_po­drobnosti.sty­le.display';
/*document.wri­te(Hodnota, Segment);*/
if (Hodnota=='ano') {Rif_podrobnos­ti.style.displa­y='';}
else {Rif_podrobnos­ti.style.displa­y='none';}
}
</script>
</head>

<body>
<form>
<div style="width:350px;">
Rif:
<select name="Rif" onClick="Zobraz(this);" >
<option value="ano">a­no</option>
<option value="ne">ne</op­tion>
</select>

<span id="Rif_podrob­nosti"> xxx </span>

</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
Avatar
Peter Mlich
Člen
Avatar
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
Avatar
Libor HUDÁK
Člen
Avatar
Odpovídá na Peter Mlich
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_podrobnos­ti.style.displa­y),
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+'_po­drobnosti.sty­le.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
Avatar
Peter Mlich
Člen
Avatar
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.getE­lementById. 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
Avatar
Libor HUDÁK
Člen
Avatar
Odpovídá na Peter Mlich
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="JavaS­cript" type="text/ja­vascript">
function Zobraz(Vstup)
{ Hodnota = Vstup.value;
Objekt = Vstup.id+'Podrob­nosti';
var Segment = document.getE­lementById(Ob­jekt);
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">a­no</option>
<option value="ne">ne</op­tion>
</select>
<span id="RifPodrob­nosti"> 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
Avatar
Michal Štěpánek
Člen
Avatar
Odpovídá na Libor HUDÁK
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...
Avatar
Libor HUDÁK
Člen
Avatar
Odpovídá na Michal Štěpánek
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
Avatar
Marian Benčat
Člen
Avatar
Odpovídá na Michal Štěpánek
Marian Benčat:10.5.2018 17:13

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

Nahoru Odpovědět
10.5.2018 17:13
Totalitní admini..
Avatar

Člen
Avatar
Odpovídá na Marian Benčat
:10.5.2018 20:12

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

 
Nahoru Odpovědět
10.5.2018 20:12
Avatar

Člen
Avatar
: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
Avatar
Libor HUDÁK
Člen
Avatar
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
Avatar

Člen
Avatar
Odpovídá na Libor HUDÁK
: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
Avatar

Člen
Avatar
Odpovídá na Libor HUDÁK
: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
Avatar
Libor HUDÁK
Člen
Avatar
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
Avatar

Člen
Avatar
Odpovídá na Libor HUDÁK
: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
Avatar
Libor HUDÁK
Člen
Avatar
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
Avatar

Člen
Avatar
Odpovídá na Libor HUDÁK
: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
Avatar

Člen
Avatar
: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
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 18 zpráv z 18.