如何将 Javascript 与 HTML 表单链接？答案

【问题标题】：How to link Javascript with HTML forms?如何将 Javascript 与 HTML 表单链接？
【发布时间】：2013-08-27 15:59:54
【问题描述】：

嘿嘿！

我有这段代码（只是一个例子）：

function random(min, max) {
    return min + parseInt(Math.random() * (max-min+1));
}
function getKey(length, charset) {
    var key = "";
    while(length--) {
        key += charset[random(0, charset.length-1)];
    }
    return key;
}
$(document).ready(function() {
    var key = getKey(16, "0123456789ABCDEF");
});

并希望将这个 (javascript) “链接”到 input[type="submit"]-form (html)。所以，如果我点击按钮，他每次都会生成一个新的“键”。

您能和我一起找到解决方案吗？ :-)

【问题讨论】：

标签： javascript jquery html forms random

【解决方案1】：

试试这段代码

<html>
<head>
    <script>
        function random(min, max) {
            return min + parseInt(Math.random() * (max - min + 1));
        }

        function getKey(length, charset) {
            var key = "";
            while (length--) {
                key += charset[random(0, charset.length - 1)];
            }
            return key;
        }
        $(document).ready(function () {
            $('#ipt').click(function () {
                var key = getKey(16, "0123456789ABCDEF");
                alert(key);
            });
        });
    </script>
</head>

<body>
    <input type="button" id="ipt" />
</body>
</html>

【讨论】：

【解决方案2】：

JSFiddle demo

这使用一点 jQuery 来更新来自 getKey 的返回值，为了便于阅读，我将其重命名为 generateKey。

新的附加代码：

function getNewKey() {
    $('#key').text(generateKey(16, "0123456789ABCDEF"));
}
$(document).ready(function() {
    getNewKey();
    $('form').on('submit', function(ev){
        getNewKey();
        return false;
    });
});

【讨论】：

没有警报的最佳答案 ;) 谢谢

【解决方案3】：

$('#key-generator').click(function() {
    key = getKey(length, charset);
    alert(key);
});

jsFiddle

【讨论】：

【解决方案4】：

在您的 HTML 代码中创建一个 ID 为 new_key 的按钮

 <button id="new_key" type="button">New key!</button>

还有你的 javascript 代码

function random(min, max) {
    return min + parseInt(Math.random() * (max-min+1));
}
function getKey(length, charset) {
    var key = "";
    while(length--) {
        key += charset[random(0, charset.length-1)];
    }
    return key;
}
$(document).ready(function() {
    var key = getKey(16, "0123456789ABCDEF");

    $( '#new_key' ).click( function(){
        key = getKey(16, "0123456789ABCDEF");
        alert( key );
    });
});

演示： http://jsfiddle.net/nohponex/JECWC/2/

【讨论】：