提交前添加POST参数

IT技术 javascript jquery forms
2021-01-25 22:12:08

我有这个简单的表格：

<form id="commentForm" method="POST" action="api/comment">
    <input type="text" name="name" title="Your name"/>
    <textarea  cols="40" rows="10" name="comment" title="Enter a comment">
    </textarea>
    <input type="submit" value="Post"/>
    <input type="reset" value="Reset"/>
</form>

我需要在发送到服务器之前添加两个 POST 参数：

var params = [
               {
                 name: "url",
                 value: window.location.pathname
               },
               {
                  name: "time",
                  value: new Date().getTime()
               }
             ];

请不要修改表格。

6个回答

要使用 Jquery 添加它：

$('#commentForm').submit(function(){ //listen for submit event
    $.each(params, function(i,param){
        $('<input />').attr('type', 'hidden')
            .attr('name', param.name)
            .attr('value', param.value)
            .appendTo('#commentForm');
    });

    return true;
});
@Hontoni我们可以在将参数项附加到表单之前检查表单中是否存在参数项，这可以使参数项仅附加一次。
2021-03-19 22:12:08
那就是修改表格。这是 IMO 的解决方案：stackoverflow.com/a/34566506/9258504
2021-03-24 22:12:08
您可以使用myInput = document.createElement('input')然后将属性设置为对象，如下所示：myInput.type = 'text'; myInput.name = 'name'
2021-03-25 22:12:08
那就是修改表格
2021-04-12 22:12:08

你可以在没有 jQuery 的情况下做到这一点：

    var form=document.getElementById('form-id');//retrieve the form as a DOM element

    var input = document.createElement('input');//prepare a new input DOM element
    input.setAttribute('name', inputName);//set the param name
    input.setAttribute('value', inputValue);//set the value
    input.setAttribute('type', inputType)//set the type, like "hidden" or other

    form.appendChild(input);//append the input to the form

    form.submit();//send with added input

以前的答案可以缩短并且更具可读性。

$('#commentForm').submit(function () {
    $(this).append($.map(params, function (param) {
        return   $('<input>', {
            type: 'hidden',
            name: param.name,
            value: param.value
        })
    }))
});

如果要在不修改表单的情况下添加参数，则必须序列化表单，添加参数并使用 AJAX 发送：

var formData = $("#commentForm").serializeArray();
formData.push({name: "url", value: window.location.pathname});
formData.push({name: "time", value: new Date().getTime()});

$.post("api/comment", formData, function(data) {
  // request has finished, check for errors
  // and then for example redirect to another page
});

请参阅.serializeArray()和$.post()文档。

@Alex OP 说他们不想修改表单。
2021-03-17 22:12:08
@MonneratRJ 不同意，因为用户从未指定他们想要使用 ajax。我曾经遇到过同样的问题，因为我不想使用 ajax。
2021-03-22 22:12:08
@MichałPerłakowski 将某些东西从字面上理解的案例之一。
2021-04-05 22:12:08
@Alex ok 是有道理的...... Pim Jager 的回答符合要求......
2021-04-08 22:12:08
“如果您想在不修改表单的情况下添加参数”我一直在寻找这个！
2021-04-08 22:12:08

您可以执行 form.serializeArray()，然后在发布之前添加名称-值对：

var form = $(this).closest('form');

form = form.serializeArray();

form = form.concat([
    {name: "customer_id", value: window.username},
    {name: "post_action", value: "Update Information"}
]);

$.post('/change-user-details', form, function(d) {
    if (d.error) {
        alert("There was a problem updating your user details")
    } 
});
其它你可能感兴趣的问题
上一篇在 css / js 中自动换行 下一篇Rails 中每个视图的 JavaScript 文件