在 post 提交之前修改表单数据？

Question

我有一个非常大的表格（post 请求的值太多）现在我试图通过逐行汇总值来尽量减少 post 参数的数量。

<form name="old_postform" method="post" action="https://example.com" />
    <input type="text" name="1_firstname" />
    <input type="text" name="1_lastname" />
    <input type="text" name="1_age" />
    <input type="text" name="2_firstname" />
    <input type="text" name="2_lastname" />
    <input type="text" name="2_age" />
    <input type="text" name="3_firstname" />
    <input type="text" name="3_lastname" />
    <input type="text" name="3_age" />
</form>

我已经尝试通过中断它并提交另一个表单来对表单的提交事件做出反应，但这并不奏效，因为我还有一些其他值也需要提交：

$('form[name="old_postform"]').submit(function (e) {
    let new_postform = '<form id="new_postform" method="post">';

    for(var i = 0; i < 1000; i++) {
        new_postform += '<input type="hidden" name="' + i + '" value="';
        new_postform += $('input[name=' + i + '_firstname' + ']').val() + ';';
        new_postform += $('input[name=' + i + '_lastname' + ']').val() + ';';
        new_postform += $('input[name=' + i + '_age' + ']').val() + ';';
    }

    new_postform += '</form>';
    $("#new_postform").submit();
});

有没有一种简单的方法可以从旧形式中删除所有以一位、两位或三位数字开头的 post 参数并添加我的新 post_form 来代替？

非常感谢您的帮助！ ;)

Answer 1

您无需创建另一个表单即可提交。读取所有参数并从表单中删除不需要的输入，添加分号分隔值作为隐藏输入并提交表单。

见下方代码

$('form[name="old_postform"]').submit(function (e) {
    var $form = $(this);
    var $inputs = $form.find(":input");
    var len = $inputs.length/3; // calculate number of firstname, lastname and age per index

    for(var i=1; i<=len; i++){
      var $fn = $('input[name=' + i + '_firstname]');
      var $ln = $('input[name=' + i + '_lastname]');
      var $age = $('input[name=' + i + '_age]');
      var values = '<input type="hidden" name="' + i + '" value="';
        values += $fn.val() + ';';
        values += $ln.val() + ';';
        values += $age.val() + ';">';

        //remove read elements
        $fn.remove();
        $ln.remove();
        $age.remove();

       //append hidden input
       $form.append(values);
    };
    $form.submit();
});

在 post 提交之前修改表单数据？

Modify form-data before post submit?

javascript

jquery

post

submit