この記事について
| 環境 | HTML5、javascript |
|---|---|
| 目的 | contenteditableで編集可能にした値をPOSTする |
| 結果 | 値をhiddenフォームにコピーしてからjavascriptでsubmitする |
つまずきポイント要約
- contenteditableの値はformタグで囲っただけではPOSTされない
contenteditable で編集可能にした値はテキストエリアやテキストフィールドにあるわけではないので form タグで囲っただけでは POST できない。
POST は javascript を用いれば可能。
<input type="button" value="送信" onclick="document.form1.my_value.value = document.all.textarea1.innerText;document.form1.submit();">
<form method="post" name="form1" action="">
<div id="textarea1" contenteditable>この文字列を送信する</div>
<input type="hidden" name="my_value" value="">
</form>contenteditable で編集可能な値を隠しフォーム（hidden）に入れて、それを javascript で送信する。
POST したい値が複数ある場合は、値を「;」で区切ればいい。
<input type="button" value="送信" onclick="document.form1.my_value1.value = document.all.textarea1.innerText;document.form1.my_value2.value = document.all.textarea1.innerText;document.form1.submit();">