nps/web/views/index/edit.html

<div class="row tile">
    <div class="col-md-12 col-md-auto">
        <div class="ibox float-e-margins">
            <h3 class="ibox-title">编辑</h3>
            <div class="ibox-content">
                <form class="form-horizontal">
                    <input type="hidden" name="id" value="{{.t.Id}}">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">mode </label>
                        <div class="col-sm-10">
                            <select class="form-control" name="type" id="type">
                                <option {{if eq "tcp" .t.Mode}}selected{{end}} value="tcp">tcp</option>
                                <option {{if eq "udp" .t.Mode}}selected{{end}} value="udp">udp</option>
                                <option {{if eq "socks5" .t.Mode}}selected{{end}} value="socks5">socks5
                                </option>
                                <option {{if eq "httpProxy" .t.Mode}}selected{{end}} value="httpProxy">http
                                <option {{if eq "secret" .t.Mode}}selected{{end}} value="secret">secret
                                <option {{if eq "p2p" .t.Mode}}selected{{end}} value="p2p">p2p
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">remark</label>
                        <div class="col-sm-10">
                            <input value="{{.t.Remark}}" class="form-control" type="text" name="remark"
                                   placeholder="empty means to be unrestricted">
                        </div>
                    </div>

                    <div class="form-group" id="port">
                        <label class="col-sm-2 control-label">port of server</label>
                        <div class="col-sm-10">
                            <input value="{{.t.Port}}" class="form-control" type="text" name="port" placeholder="such as 8024">
                        </div>
                    </div>
                    <div class="form-group" id="target">
                        <label class="col-sm-2 control-label">target of Intranet(ip:port)</label>
                        <div class="col-sm-10">
                            <input value="{{.t.Target}}" class="form-control" type="text" name="target"
                                   placeholder="such as 10.1.50.203:22 ">
                            <span class="help-block m-b-none">can only fill in ports if it is local machine proxy</span>
                        </div>
                    </div>

                    <div class="form-group" id="client_id">
                        <label class="col-sm-2 control-label">id of client</label>
                        <div class="col-sm-10">
                            <input value="{{.t.Client.Id}}" value="{{.client_id}}" class="form-control" type="text" name="client_id"
                                   placeholder="id of client">
                        </div>
                    </div>

                    <div class="form-group" id="password">
                        <label class="col-sm-2 control-label">unique identification key</label>
                        <div class="col-sm-10">
                            <input value="{{.t.Password}}" class="form-control" type="text" name="password"
                                   placeholder="unique identification key">
                            <span class="help-block m-b-none">when p2p or secret</span>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <div class="col-sm-4 col-sm-offset-2">
                            <button class="btn btn-success" href="#" id="add"><i
                                class="fa fa-fw fa-lg fa-eye"></i>save
                        </button>
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>

</main>
<script>
    var arr = []
    arr["all"] = ["type", "port", "compress", "u", "p", "target","password"]
    arr["tcp"] = ["type", "port", "target", "u", "p", "compress"]
    arr["udp"] = ["type", "port", "target", "compress"]
    arr["socks5"] = ["type", "port", "compress", "u", "p"]
    arr["httpProxy"] = ["type", "port", "compress", "u", "p"]
    arr["secret"] = ["type", "target", "compress", "u", "p","password"]
    arr["p2p"] = ["type", "compress", "u", "p","password"]
    arrClientHide = ["compress", "u", "p", "crypt", "mux"]

    function resetForm() {
        for (var i = 0; i < arr["all"].length; i++) {
            $("#" + arr["all"][i]).css("display", "none")
        }
        o = $("#type option:selected").val()
        for (var i = 0; i < arr[o].length; i++) {
            $("#" + arr[o][i]).css("display", "block")
        }
    }

    function resetClientCnf() {
        for (var i = 0; i < arrClientHide.length; i++) {
            $("#" + arrClientHide[i]).css("display", "block")
        }
        op = $("#use_client  option:selected").val()
        if (op == 1) {
            for (var i = 0; i < arrClientHide.length; i++) {
                $("#" + arrClientHide[i]).css("display", "none")
            }
        }
    }

    $(function () {
        resetForm()
        resetClientCnf()
        $("#type").on("change", function () {
            resetForm()
            resetClientCnf()
        })
        $("#use_client").on("change", function () {
            resetForm()
            resetClientCnf()
        })
        $("#add").on("click", function () {
            $.ajax({
                type: "POST",
                url: "/index/edit",
                data: $("form").serializeArray(),
                success: function (res) {
                    alert(res.msg)
                    if (res.status) {
                        history.back(-1)
                    }
                }
            })
        })
    })
</script>