javascript - 在提交后修改表单数据？

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>

我已经尝试通过中断此事件并提交另一个表单来对表单的提交事件使用react，但这效果不佳，因为我还有一些其他值也需要提交:

$('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_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();
});