提交按钮上的 Javascript

Question

我有一个问题。我有一个带有一个隐藏输入元素的 html 表单。我的 javascript 代码中有一个数组。我想捕捉按下提交按钮事件（通过使用 jquery）并将数组数据推送到隐藏的输入中。

问题是 - 首先会发生什么：表单日期将流向 .php 脚本，或者 javascript 的数组将被推入隐藏输入，然后调用 .php 脚本？为什么会这样？

TIA！

更新（代码示例）：

...
// process $_POST['domains']
...

<form action="registration?id=reg" method="post" enctype="multipart/form-data" id="reg_form">
    ...
    <input type="hidden" id="domains" name="domains[]" value=""/>
    ...
    <input type="submit" name="go" value="Register"/>
</form>

<script type="text/javascript">
    var domainlist = [];

    Array.prototype.indexOf = function (name) {
        var ind = -1;
        for (var i = 0; i < this.length; i++) {
            if (this[i].name == name) {
                ind = i;
                break;
            }
        }
        return ind;
    }

    $(document).ready(function() {
        ...
    });

    function checkDomain() {
        ...
            req = $.ajax({
                type:           'post',
                cache:          false,
                url:            'ajax.php',
                data:           ...,
                success: function(data) {
                    $('#domain_list_wrap').delegate('input:checkbox', 'click', function () {
                        var dmnName = $(this).attr('name');
                        domainlist.push({name: dmnName, cost: domainsArr[dmnName.split('.')[1]]});
                        ...
                    });
                    $('#domain_cart').delegate('input:checkbox', 'click', function () {
                        domainlist.splice(domainlist.indexOf($(this).attr('name')), 1);
                        ...
                    });
                }
            });
        ...
    }
</script>

Answer 1

JavaScript submit 事件在提交表单时触发，但在向服务器发出请求之前（因为 JavaScript 在客户端运行，这非常有意义）。因此，您想象的工作方式应该没问题，您可以使用 jQuery 绑定到表单提交事件，如下所示：

$("#yourForm").submit(function() {
    //Submit event handler will run on form submit
});

submit 事件处理程序也可用于通过返回 false 来取消表单提交（例如，如果某些验证失败）。如果数据先发送到服务器就真的不行了！

Answer 2

把它放进你的身体里

<form id="frm" method="post" action="/">
    <input type="hidden" id="txtHidden" />
    <input type="submit" id="btnSubmit" value="submit" />
</form>

这在你的脑海中：

<script type="text/javascript">
    var arr = [ "hello", "there", "world" ];

    $(document).ready( function() {
        $("#btnSubmit").click( function(event) {
                   var str = arr.join(",");
                   $("#txtHidden").val(str);
                   // make sure the value is in the field
                   alert($("#txtHidden").val());
            });
    });

</script>

当你点击 btnSubmit 时，数组会以逗号连接，你会看到警报，然后表单会被提交。