【JavaScript】hidden属性のvalueへfunction関数で得た結果を入れたい

前提・実現したいこと

こんにちは。プログラミングはスク卒レベルの者です。この度初めて質問投稿します。質問の内容・質問の仕方など誤っている場合は申し訳ありません。

Gmailの作成画面のような簡単なエディタを作成しています。
エディタ箇所に入力したものをHTML化し、それをformで送信したいのですが、つまづいています。
（一部はサイトで見つけたものをコメントアウト部分もそのままコピペしています）

下記のコードは、作成中のものを少し簡易的にしたものです。
★★★★で印したところにどう記述すれば良いか、調べてもわかりませんでした。
似たような質問もいくつかあったと思いますが、自分のコードに当てはめることができませんでした...。調べ方が悪い・不勉強であること承知の上です<(_ _)>

function changeText()〜の箇所は、あと少し処理がありますが　数行削除しています。
最終的にはこの関数で得た結果をvalueに入れ、add.phpへ飛ばしてDBへ保存するという実装を目指しています。PHPは動作確認済みです。

大変恐縮ですが、どなたかご教示いただけないでしょうか。よろしくお願いいたします。

※実際は太字ボタンや赤文字ボタン、それに伴うJS記述がありますが、質問に関係ないと思い削除しています。

<!DOCTYPE html> 
<html>
<head>
    <title>Gmailみたいなエディタ</title>
    <script> 
    //innerText をサポートしない Web ブラウザと共通で使用するための 
    //setText 関数を定義        
    function setAlter_innerText(element) {        
       if (element.innerText) {        
          element.setText = function (text) {
              element.innerText = text; }        
       } else {
          element.setText = function (text) {
           element.textContent = text; }        
       }
       return element;
    }

    //getElementById の短縮
    var $id = function (id) {
        return document.getElementById(id); };

    //コンテンツのロードが完了したら
    window.onload = function () {
       var editArea = $id('editArea');
             
       //innerText を設定するためのメソッドを追加
       setAlter_innerText(editArea);

            //★★★★★editAreaの文字をinnnerHTMLしてhiddenのvalueに入力したい★★★★★
            function changeText(){
                editArea.innerHTML
            };
     }
    </script> 
</head> 
<body>
    
    <div id="editArea" contenteditable="true"><!--エディタエリア--></div> 

        
    <form name="test2" action="add.php" method="post" enctype="multipart/form-data">   
        <input type="hidden" name="text_body" id="textBody" value="＠＠＠＠ココにeditArea.innerHTMLで得た結果を入れてsubmitしたい＠＠＠">
        <input type="submit" onclick="changeText()" value="送信">
    </form>
</body> 
</html>

行動規範の内容に同意します

回答2件

ベストアンサー

ココナラで個別に相談して解決しました！

投稿2019/12/01 09:11

退会済みユーザー

総合スコア0

HTML
1<form name="test2" action="add.php" method="post" enctype="multipart/form-data">   
2  <input type="hidden" name="text_body" id="textBody" value="＠＠＠＠ココにeditArea.innerHTMLで得た結果を入れてsubmitしたい＠＠＠">
3  <input type="submit" onclick="textBody.value = editArea.innerHTML" value="送信">
4</form>

追記：
要望により修正してみました↓

HTML
1<form name="test2" action="add.php" method="post" enctype="multipart/form-data">   
2  <input type="hidden" name="text_body" id="textBody" value="＠＠＠＠ココにeditArea.innerHTMLで得た結果を入れてsubmitしたい＠＠＠">
3  <input type="submit" value="送信">
4</form>

JavaScript
1window.onload = function () {
2  var editArea = $id('editArea');
3
4  //innerText を設定するためのメソッドを追加
5  setAlter_innerText(editArea);
6
7  //★★★★★editAreaの文字をinnnerHTMLしてhiddenのvalueに入力したい★★★★★
8  function changeText(){
9    textBody.value = editArea.innerHTML;
10  };
11  document.querySelector('form[name="test2"]>input[type="submit"]').onclick = changeText;
12}

追記２：
確認に使ったサーバー側のコードを載せておきます。
（確認にあたってはformタグのaction属性をaction="add.php"からaction="http://localhost:3000"に変更しています）

JavaScript
1const express = require('express');
2const multer  = require('multer')
3const app = express();
4app.post('/', multer().none(), (req, res) => {
5    res.send(req.body.text_body);
6});
7app.listen(3000);

投稿2019/11/29 11:39

編集2019/11/29 14:26

shinji709

総合スコア805

退会済みユーザー

2019/11/29 11:42

回答ありがとうございます。 onclick="textBody.value = editArea.innerHTML"、とのことですが、実際は、function changeText()の中身はあと数行あり少し長めの関数なのです。 onclickの中に長々と書くのは見た目もよくないかなと思うのですが、他に方法はないでしょうか？

shinji709

2019/11/29 11:45

なるほど考え直します

退会済みユーザー

2019/11/29 11:50

申し訳ありません、ありがとうございます。よろしくお願いします<(_ _)>

退会済みユーザー

2019/11/29 12:41

ありがとうございます。ご教示通り追記してPOST送信してみましたが、エディタに入力した値は valueには入ってくれませんでした,,,,

shinji709

2019/11/29 14:30

追記２に、確認に使ったサーバー側コードを追加しました。text_bodyフィールドをエコーバックするだけのものです。editAreaの内容が入ってくることを確認しています。サーバー側の問題だとすると、質問者さんのサーバーコードは`action="add.php"`の表記を見るにphpのようなので、残念ながら私には力になれそうもありません。

退会済みユーザー

2019/12/01 09:11

この度はありがとうございました。 teratailでは解決に至りませんでしたが、別のサイトの利用で解決済みです。また機会あればよろしくお願いします！

行動規範の内容に同意します

あなたの回答