Kirjoittaja Aihe: textarea -teksti diviin javascriptillä ja muokatun tekstin lähetys fetchillä (Luettu 4117 kertaa)

teele · « : 04.06.23 - klo:18.58 »

Tässä alla pitäisi saada textarean sisältö sivulla olevaan diviin, kun napsataan kopiointipainiketta, mutta kopioitu arvo vain vilahtaa divissä ja sitten divin sisältö palautuu ennalleen.

Koodia: [Valitse]

<!DOCTYPE html>
<html>
  <head>
    <title>Textarea -koe</title>
  </head>
  <body>
      <div id="output">alkuperäisteksti</div>
  
    <h1>Textarea Example</h1>
    <form>
      <label for="input-text">Enter Text:</label><br>
      <textarea id="input-text" name="input-text" rows="4" cols="50"></textarea><br><br>
      <button onclick="copyText()">Copy to Div</button>
    </form>

    <script>
      function copyText() {
        var input = document.getElementById("input-text");
        var output = document.getElementById("output");

        document.getElementById("output").innerHTML = input.value;
      }
    </script>
  </body>
</html>

Miten muutoksen saisi pysyväksi.

nm · « **Vastaus #1 :** 04.06.23 - klo:21.11 »

Button-elementti lähettää oletuksena lomakkeen, vaikka määrität onclick-käsittelijän. Tällöin selain lataa sivun uudelleen, ja juuri muokattu sisältö häviää.

Voit joko estää oletustoiminnon (googlaa event.preventDefault()) tai voit muuttaa buttonin tyypiksi pelkän ”button”, joka ei lähetä lomaketta:
https://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html#the-button-element

teele · « **Vastaus #2 :** 11.06.23 - klo:12.49 »

Kiitos selityksestä, linkissä oli itselleni ihan uutta tietoa button-elementistä

Tässä vähän taustaa ongelmalle, ehkä se sopii vielä tähän säikeeseen?

Tarkoituksena on käyttää textarea-elementtiä sivulla olevan divin tekstin muokkaamiseen ja lähettää muokattu teksti palvelimelle niin, että muokattu teksti tulisi korvaamaan pysyvästi entisen tekstin sivun divillä.

Korvaavan tekstin voinee sijoittaa javascript-muuttujaan ja muuttaa divin sisältöä vasta sen jälkeen, kun lomake on jo lähetetty palvelimelle fetchillä.... tai javascriptillä voinee luoda uuden lomakkeen formData-funktiolla..... tai sivun voinee päivittää taas sen jälkeen, kun muutos on mennyt palvelimelle ja sivun lähdeteksti on muuttunut sielläkin muutetun divin oslalta .....

Nyt vain pitäisi valita "siistein" vaihtoehto, jolla saa mahdollisimman siistiä koodia eikä se aiheuta kovin paljon turhaa datasiirtoa tai muuta ylimääräistä ..... käsiteltävä teksti ei ole kovin pitkä

Ehkä joku muukin keino voisi olla haettu siistein tapa päivittää sivun tekstiä pysyvästi textarean ja fetcihin avulla. Otan mielelläni vihjeitä vastaan

nm · « **Vastaus #3 :** 11.06.23 - klo:12.58 »

Lainaus käyttäjältä: teele - 11.06.23 - klo:12.49

Korvaavan tekstin voinee sijoittaa javascript-muuttujaan ja muuttaa divin sisältöä vasta sen jälkeen, kun lomake on jo lähetetty palvelimelle fetchillä.... tai javascriptillä voinee luoda uuden lomakkeen formData-funktiolla..... tai sivun voinee päivittää taas sen jälkeen, kun muutos on mennyt palvelimelle ja sivun lähdeteksti on muuttunut sielläkin muutetun divin oslalta .....

Kuulostaa siltä, että sivu tai päivitettävä osa sivusta olisi paras ladata uudelleen palvelimelta, koska silloin käyttäjä näkee varmuudella, että päivitys on mennyt perille. Jos client-koodi päivittää sivua omatoimisesti, se voi peittää tiedonsiirto-ongelman, jonka vuoksi päivitys ei mene palvelimelle asti.

teele · « **Vastaus #4 :** 11.06.23 - klo:13.32 »

Selvä, ehkä turhaan ajattelin välttää tiedonsiirtoa varsinkin, kun kyseessä on vain ihan pieni teksti ja mahdollista perillemeno- ja päivitysvirhettä en osannut ajatella ollenkaan.

_Pete_ · « **Vastaus #5 :** 11.06.23 - klo:19.38 »

Lainaus käyttäjältä: teele - 11.06.23 - klo:13.32

Selvä, ehkä turhaan ajattelin välttää tiedonsiirtoa varsinkin, kun kyseessä on vain ihan pieni teksti ja mahdollista perillemeno- ja päivitysvirhettä en osannut ajatella ollenkaan.

Eikö olisi helpompaa vaan käyttää wordpressiä jossa tämä toimii?

Ubuntu Suomen keskustelualueet

Uutiset:

Kirjoittaja Aihe: textarea -teksti diviin javascriptillä ja muokatun tekstin lähetys fetchillä (Luettu 4117 kertaa)

teele

textarea -teksti diviin javascriptillä ja muokatun tekstin lähetys fetchillä

nm

Vs: textarea -teksti diviin javascriptillä

teele

Vs: textarea -teksti diviin javascriptillä

nm

Vs: textarea -teksti diviin javascriptillä

teele

Vs: textarea -teksti diviin javascriptillä ja muokatun tekstin lähetys fetchillä

_Pete_

Vs: textarea -teksti diviin javascriptillä ja muokatun tekstin lähetys fetchillä