jQuery-제출시 추가 매개 변수 추가 (아약스 아님)


206

jQuery의 '제출'을 사용하면 추가 매개 변수를 양식에 전달할 수 있습니까? Ajax 로이 작업을 수행하려고하지 않습니다. 이것은 정상적인 새로 고침 양식 제출입니다.

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

어떤 서버 측 기술을 사용하고 있습니까?
Enrique

제출하기 전에 직렬화 된 양식에 추가되는 [answer] [1] 내 답변을 참조하십시오. [1] : stackoverflow.com/questions/17809056/…
Jeff Lowery

답변:


371

이것은 나를 위해 그것을했다 :

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

Daff의 답변을 기반으로하지만 NAME 속성을 추가하여 양식 모음에 표시하고 VALUE를 VAL로 변경했습니다. 또한 FORM의 ID를 확인했습니다 (제 경우에는 form1)

Firefox firebug를 사용하여 요소가 삽입되었는지 확인했습니다.

숨겨진 요소는 양식 모음에 다시 게시되며 읽기 전용 필드 만 삭제됩니다.

미셸


46
바이너리로 '당신은 내 햇빛입니다'를 어떻게 부르나요? 정말 고맙습니다. 이것은 많은 것들을 해결합니다.
Ciel

38
가독성을 약간 향상시킬 수 있습니다. var input = $ ( "<input>", {type : "hidden", name : "mydata", value : "bla"}); $ ( '# form1'). append ($ (input));
Konstantine Kalbazov

2
$ ( "<input>"). attr ( "type", "hidden"). attr ( "name", "mydata"). val ( "bla"). appendTo ( '# form1'); 다른 방법입니다
kiev

6
$ ( "<input>", {type : "hidden", name : "mydata", value : "bla"}). appendTo ( "# form1");
gabeio

데이터 크기에 제한이 없습니까? JSON.stringify (obj) 및이 방법을 사용하여 큰 객체를 보냈고 잘린 것처럼 보입니다.
omikron

26

귀하의 경우 양식에 다른 숨겨진 필드를 동적으로 추가하는 것으로 충분합니다.

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

제출해야하는 데이터는 양식을 사용할 수 없습니다. 서버 측에서 캡처하고 처리해야합니다.
Ciel

"양식 불가능"이란 무엇을 의미합니까?
Vincent Ramdhanie

죄송합니다. 전혀 작동하지 않았습니다. 강제 데이터만으로도 양식에 데이터를 주입하지 않습니다.
Ciel

양식 필드에 배치 할 수 없습니다.
Ciel

2
문자열 인 경우 양식 필드에 넣을 수 있습니다
PetersenDidIt

19

이것을 사용할 수도 있습니다. 나를 위해 잘 일했다

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

이것은 btnsubmit = GET 값으로 저장을 register.php 양식에 제출합니다.


이것은 더 우아한 솔루션처럼 보입니다. encodeURIComponent()데이터 유형에 따라 매개 변수 값에 사용해야 합니다.
Andres 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
addHidden의 고급 버전
Jonathan

1
이 솔루션의 단순함이 마음에 듭니다. 많은 경우를 처리하지 않지만 처리하는 경우를 잘 처리합니다.
Phil

11

제출 단추를 클릭하여 제출 이벤트를 바인드 할 필요는 없습니다. 제출 이벤트를 바인드하면 제출 이벤트가 트리거되는 방식에 상관없이 제출 이벤트를 캡처합니다.

당신이 원하는 것은 아약스를 통해 원하는 것처럼 정렬 가능한 것을 제출하는 것입니다. 다음과 같이 해보십시오 :

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

내 대답을 업데이트했습니다. 당신이하려는 일을 이해한다고 생각하십시오.
PetersenDidIt

name생성 된 숨겨진 양식 입력에 속성을 추가하고 있습니까? stackoverflow.com/questions/504681 / ...에 따르면 FormCollection 객체에는 모든 <input>요소에 이름이 필요합니다.
npdoty

예, 정렬 가능한 값을 쉼표로 구분 된 문자열로 formcollection에 푸시하려고합니다. 업데이트를 시도했지만 여전히 게시되지 않습니다. 내가 뭘 잘못하고 있는지 잘 모르겠습니다. 도움을 주셔서 감사합니다.
Ciel

문제는 클라이언트 쪽이 아니라 서버쪽에있는 것 같습니다.
PetersenDidIt

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>

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.