NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:
Avatar
Kamil
Člen
Avatar
Kamil:19.4.2022 11:58

Ahoj,

po vytvoření posluchače se mi vytvoří událost pouze asi jen na klik a hned mi to zmízí, rád bych, aby to nemizelo.

Zkusil jsem:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .krok1{
            width:600px;
            height:600px;
            background: red;
        }
    </style>
    <title>Document</title>
</head>
<body>

    <form action="index.html" method="POST">
        <select id="list-fail">
            <option value="chk_sensor">chk_sensor</option>
            <option value="localhost">localhost</option>
        </select>
        <input type="submit" value="odeslat" id="tlaciko-odeslat">
    </form>

    <script>
        let odeslat = document.getElementById('tlaciko-odeslat');

        odeslat.addEventListener('onclick', () => {
            let seznam = document.getElementById('list-fail').value;
                if (seznam == "chk_sensor"){
                    // vytvoreni section
                    const krok1 = document.createElement("section");
                    // přidání třídy
                    krok1.classList.add("krok1");
                    document.body.append(krok1);
                }
                else if (seznam == "localhost"){
                    alert ("Vybral jsi localhost");
                }
        });

    </script>
</body>
</html>

Chci docílit: Aby se mi po vybrani hodnoty ukázaly kroky, které definuji. Nyní se ukáží, ale po odkliknutí zmizí.

 
Odpovědět
19.4.2022 11:58
Avatar
Kamil
Člen
Avatar
Kamil:19.4.2022 12:04

oprava: místo onclick, tak tam mám mít click aby to udělalo, co jsem popisoval

 
Nahoru Odpovědět
19.4.2022 12:04
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:19.4.2022 15:15

Nejsem si uplne jisty, o co se pokousis. Ale, tu udalost mas navazanou na tlacitko, ktere formular odesila. Takze, bud mu zakaz dalsi udalosti nebo zablokuj formulari odeslani a nebo pouzij jine tlacitko, ktere formular neodesila, treba input type=button.
Dojde k tomu, ze se vykona ten js. Pak se formular odesle a stranka se znovu nacte cista. Pripadne tam neco doplni browser, pokud ma povolene nastaveni pamatovat si vyplnene policka formulare nebo nejake takove nastaveni.

Editováno
 
Nahoru Odpovědět
19.4.2022 15:15
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:19.4.2022 15:19

google = How to prevent form from being submitted

html
................VVV
<form onsubmit="return mySubmitFunction(event)">
  ...
</form>

script

function mySubmitFunction()
{
  someBug()
  return false; // <<<
}
----------
const element = document.querySelector('form');
element.addEventListener('submit', event => {
  event.preventDefault();
  // actual logic, e.g. validate the form
  console.log('Form submission cancelled.');
});

<form>
  <button type="submit">Submit</button>
</form>
----------------
<form onsubmit="alert('stop submit'); return false;" >
----------------
var form = document.getElementById("idOfForm");
form.onsubmit = function() {
  return false;
}
Editováno
 
Nahoru Odpovědět
19.4.2022 15:19
Avatar
Kamil
Člen
Avatar
Odpovídá na Peter Mlich
Kamil:19.4.2022 16:18

Chci mít rozhodujici strom, kde na základě hodnoty ze select se bude ukazovat návod jak něco řešit.

 
Nahoru Odpovědět
19.4.2022 16:18
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:19.4.2022 22:16

Tu funkci spoustej primo selectem?
https://www.jakpsatweb.cz/…_prejdi.html

<select onchange="location.href=this.options[this.selectedIndex].value">

Mimochodem, vsiml jsem si, ze tam mas vue, jedno tema. Co ho pouzit? Tam by tyhle veci meli jit jednoduseji nez beznym js kodem.
google = vue select show content
https://jsfiddle.net/ay2atz8y

<div id="app">
   <select v-model="selected">
       <option v-for="product in products" v-bind:value="{ id: product.id, text: product.name }">{{ product.name }}
       </option>
   </select>
   <h1>Value:
   {{selected.id}}
   </h1>
   <h1>Text:
   {{selected.text}}
   </h1>
</div>
<script>
var app = new Vue({
  el: '#app',
  data: {
        selected: '',
    products: [
        {id: 1, name: 'A'},
      {id: 2, name: 'B'},
      {id: 3, name: 'C'}
    ]
  }
})
</script>
---
methods:{
    onChange: function(e){
        var id = e.target.value;
        var name = e.target.options[e.target.options.selectedIndex].text;
        console.log('id ',id );
        console.log('name ',name );
    },


 <select name="customerName" id="" v-on:change="onChangeSite($event)">
         <option value="1">Jan</option>
         <option value="2">Doe</option>
         <option value="3">Khan</option>
   </select>

Vubec, v tom forku je fura dalsich prikadu...
https://stackoverflow.com/…-using-vuejs

Editováno
Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
 
Nahoru Odpovědět
19.4.2022 22:16
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 6 zpráv z 6.