PHP & JavaScript Room :: 設置サンプル

フォーム生成:

---

---

生成したフォームのエンコード形式:

生成したHTML文:

<p>フォーム生成: 
    <input type="button" onclick="fSetEnctype('application/x-www-form-urlencoded')" value="通常用" />
    <input type="button" onclick="fSetEnctype('multipart/form-data')" value="ファイルアップロード用" />
    <input type="button" onclick="fSetEnctype('text/plain')" value="メール送信用" />
</p>

<hr />

<form action="/content/demo/test.php" method="post" id="resSetEnctype"></form>

<hr />

<p>生成したフォームのエンコード形式: <span id="resSetEnctype_enctype"></span></p>
<p>生成したHTML文:<br><textarea id="resSetEnctype_html" cols="50"  rows="5"></textarea></p>


<script type="text/javascript">
    /* エンコード形式を指定してフォーム生成 */
    function fSetEnctype(_enctype){
        var frmObj=document.getElementById("resSetEnctype");
        frmObj.enctype=_enctype;
        /* Form要素の子ノードを削除 */
        if(frmObj.childNodes.length>0){
            for(var i=frmObj.childNodes.length; i>=0; i--){
                if(frmObj.childNodes[i]!=null){
                    if(frmObj.childNodes[i].nodeName=="INPUT"){
                        frmObj.removeChild(frmObj.childNodes[i]);
                    }
                }
            }
        }

        /* テキストボックス生成 */
        var txtObj=document.createElement("INPUT");
        if(_enctype=="multipart/form-data"){
            txtObj.type="file";
        }else{
            txtObj.value="テキスト";
            txtObj.type="text";
        }
        txtObj.name="txt1";
        frmObj.appendChild(txtObj);

        /* 送信ボタン生成 */
        var btnObj=document.createElement("INPUT");
        btnObj.type="submit";
        btnObj.value="送信";
        btnObj.name="btn_submit";
        frmObj.appendChild(btnObj);

        document.getElementById("resSetEnctype_enctype").innerHTML=frmObj.enctype;
        document.getElementById("resSetEnctype_html").innerHTML=frmObj.innerHTML;
    }
</script>