Diskuze: JavaScript ve formuláři.

JavaScript JavaScript JavaScript ve formuláři.

Aktivity (1)
Avatar
Libor HUDÁK
Člen
Avatar
Libor HUDÁK:8. května 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. května 22:53
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:9. května 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. května 7:38
 
Nahoru Odpovědět 9. května 7:35
Avatar
Libor HUDÁK
Člen
Avatar
Odpovídá na Peter Mlich
Libor HUDÁK:9. května 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. května 9:57
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:9. května 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. května 11:33
 
Nahoru Odpovědět 9. května 11:30
Avatar
Libor HUDÁK
Člen
Avatar
Odpovídá na Peter Mlich
Libor HUDÁK:9. května 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. května 18:56
Avatar
Odpovídá na Libor HUDÁK
Michal Štěpánek:10. května 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. května 7:54
Nahoru Odpovědět 10. května 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. května 16:42

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

díky...

 
Nahoru Odpovědět  +1 10. května 16:42
Avatar
Marian Benčat
Redaktor
Avatar
Odpovídá na Michal Štěpánek
Marian Benčat:10. května 17:13

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

Nahoru Odpovědět  +2 10. května 17:13
Totalitní admini..
Avatar
Odpovídá na Marian Benčat
Vladislav Ladicky:10. května 20:12

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

 
Nahoru Odpovědět 10. května 20:12
Avatar
Vladislav Ladicky:10. května 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. května 20:59
Avatar
Libor HUDÁK
Člen
Avatar
Libor HUDÁK:10. května 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. května 21:07
Avatar
Odpovídá na Libor HUDÁK
Vladislav Ladicky:10. května 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. května 21:47
Avatar
Odpovídá na Libor HUDÁK
Vladislav Ladicky:10. května 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. května 21:55
Avatar
Libor HUDÁK
Člen
Avatar
Libor HUDÁK:12. května 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. května 10:40
Avatar
Odpovídá na Libor HUDÁK
Vladislav Ladicky:12. května 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. května 13:06
Avatar
Libor HUDÁK
Člen
Avatar
Libor HUDÁK:12. května 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. května 14:44
Avatar
Odpovídá na Libor HUDÁK
Vladislav Ladicky:13. května 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. května 8:04
Avatar
Vladislav Ladicky:13. května 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. května 14:52
 
Nahoru Odpovědět 13. května 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.