Click the upload icon below to upload a file

標題：Click the upload icon below to upload a file
JavaScript (index.html)：

<div>
    <label for="fileboxy">
        <img src="http://bit.ly/2PmisVq" style="cursor: pointer;" />
    </label>
    <input id="fileboxy" type="file" style="display: none;" />
</div>

範例：

說明：
使用label的方式點選圖片同步觸發隱藏的input file選擇檔案。

Form iframe virtual load post

標題：虛擬表單送出
JavaScript (inidex.html)：

<button id="test">test</button>
<div id="show">show</div>
<script type="text/javascript">
function $(id) {
    switch(id.substr(0,1)) {
        case '#':
            return document.getElementById(id.substr(1));
        case '.':
            var elems = document.body.getElementsByTagName('*');
            var target = id.substr(1);
            var result=[];
            for(i=0;j=elems[i];i++) {
                if((j.className).indexOf(target)!=-1) result.push(j);
            }
            return result;
        default:
            return document.getElementsByTagName(id);
    }
}
var loadpost = {
    current : null,
    queue : [],
    request : function(q) {
        //Create iframe
        try { //IE
            var iframe = document.createElement('<iframe name="loadboxy">');
        } catch (e) {
            var iframe = document.createElement('iframe');
        }
        iframe.style.display = 'none';
        iframe.name = 'loadboxy';
        iframe.id = 'loadboxy';
        if(iframe.attachEvent) {
            iframe.attachEvent("onload", function(){
                loadpost.load();
            });
        } else {
            iframe.onload = function(){
                loadpost.load();
            };
        }
        //Create form
        var form = document.createElement('form');
        form.target = 'loadboxy';
        form.action = q.url;
        form.method = 'post';
        form.style.display = 'none';
        for(var key in q.param) {
            if(q.param[key].constructor == Array) {
                for(var i=0;i<q.param[key].length;i++) {
                    var input = document.createElement('input');
                    input.type = 'hidden';
                    input.name = key;
                    input.value = q.param[key][i];
                    form.appendChild(input);
                }
            } else {
                var input = document.createElement('input');
                input.type = 'hidden';
                input.name = key;
                input.value = q.param[key];
                form.appendChild(input);
            }
        }
        //Queue
        this.queue.push({
            form : form,
            iframe : iframe,
            flag : 0,
            load : q.load
        });
        if (!this.current) this.action();
    },
    task : function() {
        var iFrame = this.current.iframe;
        var iFrameBody;
        if (iFrame.contentDocument) //FF
            iFrameBody = iFrame.contentDocument.getElementsByTagName('body')[0];
        else if (iFrame.contentWindow) //IE
            iFrameBody = iFrame.contentWindow.document.getElementsByTagName('body')[0];
        this.current.load(iFrameBody.innerHTML);
    },
    load : function() {
        if(this.current.flag == 1) {
            this.task();
            $('body')[0].removeChild(this.current.iframe);
            $('body')[0].removeChild(this.current.form);
            this.action();
        } else {
            this.current.flag = 1;
            this.send();
        }
    },
    action : function() {
        this.current = null;
        if(this.queue.length) {
            this.current = this.queue.shift();
            $('body')[0].appendChild(this.current.iframe);
        }
    },
    send : function() {
        $('body')[0].appendChild(this.current.form);
        this.current.form.submit();
    }
};
$('#test').onclick = function() {
    loadpost.request({
        url : "action.php",
        param : {
            'num1' : 10,
            'num2' : 20,
            'num[]' : new Array(30, 40)
        },
        load : function(data) {
            $('#show').innerHTML = data;
        }
    });
};
</script>

PHP (action.php)：

<?php
$num1 = !empty($_POST['num1']) ? $_POST['num1'] : null;
$num2 = !empty($_POST['num2']) ? $_POST['num2'] : null;
$total = $num1 + $num2;
echo $num1."+".$num2."=".$total;
?>

說明：
純JavaScript產生虛擬form、iframe並發送POST訊息取得php傳回之內容。

JavaScript Checkbox Clean

標題：(必填)
JavaScript (index.html)：

<script type="text/javascript">
function create() {
    var box = document.getElementById("codeboxy");
    var boxs = document.createElement("input");
    boxs.type = "checkbox";
    boxs.name = "addBox";
    boxs.setAttribute('defaultChecked', true); //針對IE6進行勾選
    boxs.checked = true; //進行勾選
    box.appendChild(boxs);
}
function clean() {
    //掃描div內的input物件
    var list = document.getElementById("codeboxy").getElementsByTagName("input");
    for(var i=0;i<list.length;i++)
        if(list[i].name == "addBox") //過濾名為addBox之項目
            list[i].checked = false; //清除點選狀態
}
</script>
<button onclick="create();">Dynamic Create</button><br />
<button onclick="clean();">Clean Checkbox</button><br />
<div id="codeboxy"></div>

說明：
相容於IE6、IE7、IE8、FireFox、Chrome瀏覽器之Checkbox生成及清除範例。

範例：

HTML Form

標題：HTML Form to PHP常用語法範例

HTML (index.html)：

<form action="test.php" name="test" id="test" enctype="multipart/form-data" method="post">
<fieldset>
<legend>Hello CodeBoxy</legend>
    Text : <input type="text" name="t1" id="t1" value="TEXT" /><br />
    Password : <input type="password" name="p1" id="p1" value="password" /><br />
    Hidden : <input type="hidden" name="h1" id="h1" value="hidden" /><br />
    Button :
    <input type="button" name="b1" id="b1" value="Enable" />
    <input type="button" name="b2" id="b2" value="Disabled" disabled="disabled" /><br />
    File : <input type="file" name="f1" id="f1" /><br />
    Checkbox :
    <input type="checkbox" name="c1" id="c1" checked="checked" />QQBoxy
    <input type="checkbox" name="c2" id="c2" />CodeBoxy<br />
    Radio :
    <input name="r1" id="r1" type="radio" checked="checked" />QQBoxy
    <input name="r1" id="r2" type="radio" />CodeBoxy<br />
    Select :
    <select name="s1" id="s1">
        <optgroup label="QQBoxy">
        <option value="1-1">1-1</option>
        </optgroup>
        <optgroup label="CodeBoxy">
            <option value="2-1" selected="selected">2-1</option>
            <option value="2-2">2-2</option>
        </optgroup>
    </select><br />
    Textarea :<br />
    <textarea name="a1" id="a1" cols="40" rows="2">Hello&#13;&#10;CodeBoxy</textarea><br />
    <input type="image" src="qqboxy.gif" /><input type="submit" /><input type="reset" />
</fieldset>
</form>

補充：PHP GET POST

$test = !empty($_GET['test']) ? $_GET['test'] : null;

$test = !empty($_POST['test']) ? $_POST['test'] : null;

範例：

Hello CodeBoxy

Text :
Password :
Hidden :
Button :
File :
Checkbox : QQBoxyCodeBoxy
Radio : QQBoxyCodeBoxy
Select : 1-12-12-2
Textarea :
Hello CodeBoxy

說明：
簡單展示常用HTML Form語法，補充PHP為GET與POST接收語法。