jQuery-在提交时添加其他参数(非ajax)


206

使用jQuery的“提交”-是否可以将其他参数传递给表单?我不希望使用Ajax进行此操作-这是正常的,刷新式的表单提交。

$('#submit').click(function () {
    $('#event').submit(function () {
        data: { 
        form['attendees'] = $('#attendance').sortable('toArray').toString();
    });
});

您正在使用哪种服务器端技术?
恩里克

请参阅我的答案[这里] [1],该答案将在提交之前附加到序列化表格中。[1]:stackoverflow.com/questions/17809056/…–
杰夫·洛里

Answers:


371

这个为我做到了:

var input = $("<input>")
               .attr("type", "hidden")
               .attr("name", "mydata").val("bla");
$('#form1').append(input);

基于Daff的答案,但添加了NAME属性以使其在表单集合中显示,并将VALUE更改为VAL还检查了FORM的ID(在我的情况下为form1)

使用Firefox萤火虫检查元素是否已插入。

隐藏的元素确实会回发到表单集合中,仅保留只读字段。

米歇尔


46
如何以二进制形式演唱“你是我的阳光”?非常感谢。这解决了很多事情。
Ciel 2010年

38
您可以稍微提高可读性:var input = $(“ <input>”,{type:“ hidden”,name:“ mydata”,value:“ bla”}); $('#form1')。append($(input));
康斯坦丁·卡尔巴佐夫

2
$(“ <input>”)。attr(“ type”,“ hidden”)。attr(“ name”,“ mydata”)。val(“ bla”)。appendTo('#form1'); 是另一种方式
基辅2014年

6
我喜欢以下组合:$(“ <input>”,{type:“ hidden”,name:“ mydata”,value:“ bla”})。appendTo(“#form1”);
gabeio '16

数据大小没有限制吗?我使用JSON.stringify(obj)和此方法发送了一些大对象,它似乎被截断了。
omikron

26

在您的情况下,只需将另一个隐藏字段动态添加到表单中就足够了。

var input = $("<input>").attr("type", "hidden").val("Bla");
$('#form').append($(input));

我需要提交的数据不具备表单功能。必须在服务器端捕获并处理它。
Ciel 2010年

“没有形式能力”是什么意思?
Vincent Ramdhanie

抱歉-这根本没有用。即使只有强制数据,它也不会将其注入表单。
Ciel 2010年

不能将其放置在表单字段中。
Ciel 2010年

2
如果它是字符串,则可以将其放在表单字段中
PetersenDidIt,2010年

19

您甚至可以使用这个。对我来说很好

$("#registerform").attr("action", "register.php?btnsubmit=Save") 
$('#registerform').submit();

这将提交btnsubmit =另存为GET值到register.php表单。


这似乎是一个更优雅的解决方案。只需记住encodeURIComponent()根据数据类型将其用于参数值。
安德列斯SK

1
当允许用户多次提交表单时,这实际上更好。表单不会获得多个具有不同值的隐藏字段。
梅隆(Mellon)

11

您可以编写一个jQuery函数,该函数允许您向表单添加隐藏字段:

// This must be applied to a form (or an object inside a form).
jQuery.fn.addHidden = function (name, value) {
    return this.each(function () {
        var input = $("<input>").attr("type", "hidden").attr("name", name).val(value);
        $(this).append($(input));
    });
};

然后在提交前添加隐藏字段:

var frm = $("#form").addHidden('SaveAndReturn', 'Save and Return')
                    .submit();

1
stackoverflow.com/questions/2601223/...为addHidden的更高级版本
乔纳森

1
我喜欢这种解决方案的简单性。它不能处理很多情况,但是可以很好地处理它。
菲尔,

11

您无需单击提交按钮就绑定提交事件,只需绑定提交事件即可,它将捕获提交事件,而不会触发它。

想想您想要的是像通过ajax一样提交可排序对象。尝试做这样的事情:

var form = $('#event').submit(function () {
    $.each($('#attendance').sortable('toArray'),function(i, value){
        $("<input>").attr({
            'type':'hidden',
            'name':'attendace['+i+']'
        }).val(value).appendTo(form);
    });
});

仍未在服务器端显示formcollection ...我有什么特别的事情要做才能使隐藏字段显示在服务器上?它正在使用FormCollection对象通过C#/ ASP.NET MVC。
Ciel 2010年

更新了我的答案,认为我理解了您要做什么。
PetersenDidIt,2010年

您是否name要在生成的隐藏表单输入中添加属性?根据stackoverflow.com/questions/504681/…,看起来FormCollection对象要求所有<input>元素都具有名称。
npdoty 2010年

是的,我正在尝试将可排序项作为逗号分隔值的字符串推入formCollection中。我已经尝试过您的更新,但仍然没有发布。我不确定自己在做什么错...我感谢您的帮助。
Ciel 2010年

听起来问题不在于客户端,而在于服务器端。
PetersenDidIt 2010年

2

类似的答案,但我只是想将其用于简单/快速的测试。

var input = $("<input>")
               .attr("name", "mydata").val("go Rafa!");

$('#easy_test').append(input);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>



<form id="easy_test">
  
</form>

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.