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

teele

  • Käyttäjä
  • Viestejä: 849
    • Profiili
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.

« Viimeksi muokattu: 11.06.23 - klo:13.33 kirjoittanut teele »

nm

  • Käyttäjä
  • Viestejä: 16370
    • Profiili
Vs: textarea -teksti diviin javascriptillä
« 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

  • Käyttäjä
  • Viestejä: 849
    • Profiili
Vs: textarea -teksti diviin javascriptillä
« 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  :)



« Viimeksi muokattu: 11.06.23 - klo:12.52 kirjoittanut teele »

nm

  • Käyttäjä
  • Viestejä: 16370
    • Profiili
Vs: textarea -teksti diviin javascriptillä
« Vastaus #3 : 11.06.23 - klo:12.58 »
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

  • Käyttäjä
  • Viestejä: 849
    • Profiili

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_

  • Käyttäjä
  • Viestejä: 1845
  • Fufufuuffuuu
    • Profiili

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?