在提交帖子之前修改表格数据?

时间:2018-09-24 06:35:50

标签: javascript jquery post submit

我的表单非常大(发布请求中的值太多),现在我试图通过逐行汇总值来尽量减少发布参数的数量。

<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>

我已经试图通过中断表单并提交另一个表单来对表单的Submit事件做出反应,但这不能很好地工作,因为我还需要提交其他一些值:

$('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?

非常感谢您的帮助! ;)

1 个答案:

答案 0 :(得分:0)

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

请参见下面的代码

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