Forms

Posted on Edited on In Views: Disqus:

 

一、.blur()

請參考Events-Form Events第一項。

 

二、.change()

請參考Events-Form Events第二項。

 

三、.focus()

請參考Events-Form Events第三項。

 

四、.focusin()

請參考Events-Form Events第四項。

 

五、.focusout()

請參考Events-Form Events第五項。

 

六、jQuery.param()

請參考jQuery.param()

 

七、.select()

請參考Events-Form Events第六項。

 

八、.serialize()

將一個表單內所有欄位編碼成一個字串。

他可以對<input>、<textarea>、<select>，

注意被編碼的欄位必須要有 name attribute，

<input>形態為 checkboxes、radio buttons 要有值才能被編碼。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>serialize demo</title>
    <style>
        body, select {
            font-size: 12px;
        }

        form {
            margin: 5px;
        }

        p {
            color: red;
            margin: 5px;
            font-size: 14px;
        }

        b {
            color: blue;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

    <form>
        <select name="single">
            <option>Single</option>
            <option>Single2</option>
        </select>

        <br>
        <select name="multiple" multiple="multiple">
            <option selected="selected">Multiple</option>
            <option>Multiple2</option>
            <option selected="selected">Multiple3</option>
        </select>

        <br>
        <input type="checkbox" name="check" value="check1" id="ch1">
        <label for="ch1">check1</label>
        <input type="checkbox" name="check" value="check2" checked="checked" id="ch2">
        <label for="ch2">check2</label>

        <br>
        <input type="radio" name="radio" value="radio1" checked="checked" id="r1">
        <label for="r1">radio1</label>
        <input type="radio" name="radio" value="radio2" id="r2">
        <label for="r2">radio2</label>
    </form>

    <p><tt id="results"></tt></p>

    <script>
        function showValues() {
            var str = $("form").serialize();
            $("#results").text(str);
        }
        $("input[type='checkbox'], input[type='radio']").on("click", showValues);
        $("select").on("change", showValues);
        showValues();
    </script>

</body>
</html>

執行結果為

 

再額外介紹一個自製的 serializeToObject 方法，他可以把表單串列轉成 json 值組，

這方法於 kendo ui 的 model binding 使用上扮演重要角色。

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>serialize demo</title>
    <style>
        body,
        select {
            font-size: 12px;
        }

        form {
            margin: 5px;
        }

        p {
            color: red;
            margin: 5px;
            font-size: 14px;
        }

        b {
            color: blue;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>

<body>

    <form>
        <select name="single">
            <option>Single</option>
            <option>Single2</option>
        </select>

        <br>
        <select name="multiple" multiple="multiple">
            <option selected="selected">Multiple</option>
            <option>Multiple2</option>
            <option selected="selected">Multiple3</option>
        </select>

        <br>
        <input type="checkbox" name="check" value="check1" id="ch1">
        <label for="ch1">check1</label>
        <input type="checkbox" name="check" value="check2" checked="checked" id="ch2">
        <label for="ch2">check2</label>

        <br>
        <input type="radio" name="radio" value="radio1" checked="checked" id="r1">
        <label for="r1">radio1</label>
        <input type="radio" name="radio" value="radio2" id="r2">
        <label for="r2">radio2</label>
    </form>

    <p><tt id="results"></tt></p>

    <script>
        function serializeToObject(seri) {
            var object = {};
            const tuples = seri.split("&");
            for (let index = 0; index < tuples.length; index++) {
                const pair = tuples[index].split("=");
                object[pair[0]] = pair[1];
            }
            return object;
        }

        function showValues() {
            var str = $("form").serialize();
            $("#results").text(str);
            console.log(serializeToObject(str));
        }
        $("input[type='checkbox'], input[type='radio']").on("click", showValues);
        $("select").on("change", showValues);
        showValues();
    </script>

</body>

</html>

執行結果為

 

九、.serializeArray()

用法跟 .serialize() 差不多，只是將欄位編碼成陣列而已，此格式為 JSON 的前身。

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
</head>
<body>
    <form>
        <div><input type="text" name="a" value="1" id="a"></div>
        <div><input type="text" name="b" value="2" id="b"></div>
        <div><input type="hidden" name="c" value="3" id="c"></div>
        <div>
            <textarea name="d" rows="8" cols="40">4</textarea>
        </div>
        <div>
            <select name="e">
                <option value="5" selected="selected">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
            </select>
        </div>
        <div>
            <input type="checkbox" name="f" value="8" id="f">
        </div>
        <div>
            <input type="submit" name="g" value="Submit" id="g">
        </div>
    </form>

    <script>
        $("form").submit(function (event) {
            console.log($(this).serializeArray());
            event.preventDefault();
        });
    </script>
</body>
</html>

執行結果為

 

再額外介紹一個自製的 serializeArrayToObject 方法，他可以把表單陣列轉成 json 值組，

這方法於 kendo ui 的 model binding 使用上扮演重要角色。

<!DOCTYPE html>
<html>

<head>
    <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
</head>

<body>
    <form>
        <div><input type="text" name="a" value="1" id="a"></div>
        <div><input type="text" name="b" value="2" id="b"></div>
        <div><input type="hidden" name="c" value="3" id="c"></div>
        <div>
            <textarea name="d" rows="8" cols="40">4</textarea>
        </div>
        <div>
            <select name="e">
                <option value="5" selected="selected">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
            </select>
        </div>
        <div>
            <input type="checkbox" name="f" value="8" id="f">
        </div>
        <div>
            <input type="submit" name="g" value="Submit" id="g">
        </div>
    </form>

    <script>
        function serializeArrayToObject(formArray) {
            var returnArray = {};
            for (var i = 0; i < formArray.length; i++) {
                returnArray[formArray[i]['name']] = formArray[i]['value'];
            }
            return returnArray;
        }

        $("form").submit(function (event) {
            var myArray = $(this).serializeArray()
            console.log(serializeArrayToObject(myArray));
            event.preventDefault();
        });
    </script>
</body>

</html>

執行結果為

 

十、.submit()

請參考Events-Form Events第七項。

 

十一、.val()

請參考.html() .text() .val() 的差別與前端html編解碼、http://api.jquery.com/val/

 

參考資料：

Object.assign()