2011-02-23 7 views
19

제출 단추가 <form> 태그 내에 있지 않은 양식이 있습니다. 제출 버튼에는 click 처리기가있어 jQuery의 submit() 이벤트를 통해 양식을 제출할 수 있습니다. 이것은 완벽하게 작동합니다.jQuery를 사용하여 양식을 제출할 때 추가 변수 전달

그러나 제출 버튼의 값을 POST로 지정해야합니다. 버튼은 <form> 태그 안에 존재하지 않으므로 POST 배열에 포함되지 않습니다. 따라서 양식을 제출할 때 추가 변수를 전달하는 방법을 설계해야합니다. 이를 달성하기 위해 일어날 수없는 것을에

일부 규정은 다음과 같습니다

  • 제출 버튼은 <form> 태그 내에서 이동할 수 없습니다.
  • jQuery ajax, post 또는 get 메쏘드를 사용할 수 없습니다.
  • 숨겨진 input 필드 또는 CSS에 의해 숨겨진 버튼을 제출할 수 없습니다.
  • 양식은 양식에 정상적인 제출 단추가있는 것처럼 정확하게 작동해야합니다.

나는 이와 비슷한 것을 상상했지만, 분명히 작동하지 않습니다.

$('#admin_form').submit({'variable_name', 'true'}); 

아무도 아이디어를 얻을 수 있습니까?

답변

32

당신이 할 수있는 한 가지 방법은 자바 스크립트가 제출 된 제출 버튼의 값으로 양식에 포스트 필드를 삽입하도록 onsubmit 속성을 사용하는 것입니다. 숨겨진 입력 필드를 사용하여이 작업을 수행해야하지만 사용자가 제출 버튼을 클릭 한 직후에 입력 필드 만 추가하면되므로 입력 필드가 처음부터 존재하지 않습니다.). 따라서 다음과 같이됩니다 :

function submitHandler() 
{ 
    submitVal = $('#submitButton').val(); 
    $('#myForm').append("<input type='hidden' name='submitValue' value='"+ 
         submitVal+"' />"); 
    return true; 
} 

버튼을 클릭 할 때 오른쪽 값이 그대로 유지됩니다.

1

Jesse의 대답은 POST를 통해이를 수행하는 유일한 방법입니다. 폼의 액션 값에 변수를 추가 할 수도 있지만 POST 대신 GET을 통해 해당 매개 변수를 전달하게됩니다. 기본 브라우저의 "제출"작업을 허용하기 전에 양식에 추가 된 숨겨진 입력이 없으면 제출되기 전에 HTTP 요청의 원시 게시물 데이터에 액세스 할 수있는 방법이 없습니다. - 계란 딜레마 이전의 닭입니다. 다음 페이지로 전송되는 HTTP POST 데이터/헤더를 변경하는 것이지만 브라우저가 데이터를 다음 페이지에 게시하기 전에 데이터가 존재하는 유일한 방법은 입력 태그를 양식 요소에 포함시키는 것입니다.

$ .post() 함수를 사용하면 onsubmit 처리기에서 게시물을 통해 원하는 모든 데이터를 보내고 성공한 페이지에서 원하는 처리기로 리디렉션 할 수 있습니다. 나는 이것이 위의 규칙에 따르지 않는다는 것을 알고 있지만 문제에 대한 또 다른 가능한 해결책은 없습니다.

  1. "복제"숨겨진 버전
  2. 이 주사는 DOM에 양식 하여에 버튼을 제출

    는하지만 진짜 미친 모든 규칙을 따르십시오

    , 당신은 또한 수 양식
  3. 트리거 복제 된 양식에 삽입 된 제출 단추에서 이벤트를 클릭하십시오.
3

이것은 오래된 질문 것으로 보인다,하지만 난 그냥 비슷한 문제로 실행하고 (나를 위해) 좋은 해결책을 발견하기 때문에, 나는 그것을 게시 할 거라고 생각 :

$('#admin_form').trigger('submit', [ { 'variable_name': true } ]); 

또는

을 당신이 값 truevariable_name라는 변수를 전달하려는 또는 2 개 별도의 변수를 전달할지 여부에 따라
$('#admin_form').trigger('submit', [ 'variable_name', 'true' ]); 

.

그리고 분명히 이것은 양식 필드의 나머지 부분과 함께 자동으로 variable_name을 제출하지 않지만 jQuery에서와 같이 제출 핸들러가있는 경우 변수는 인수로 전달됩니다. 행사. 당신이 제출 핸들러를 작성하지 않고 변경되었습니다 요소에서 바로 그것을 할 원한다면

+0

https://api.jquery.com/event.data/ 나는이 정확한 구문을 시도하고 변수없이했다 t passed – MattParra

+1

양식에 대한 제출 처리기가 있습니까? ('submit', function() {...}); ' – AsGoodAsItGets

+0

정말 고마워요! $ (form_selector) .trigger ('submit', [{ 'show_again': true}]);/* - */ $ (양식). 제출 (함수 (e, show_again) {}); – xwild

0

이 작동 : JQuery와에

<script> 
$(function() { 
    $(".datePicker").datepicker({ 
     dateFormat: 'dd-M-yy', 
     onSelect: function (date) { 
     $('#dateChanger').append("<input type='hidden' name='changed_" + $(this).attr("name") + "' value='" + $(this).attr("value") + "' />");  
     $("#dateChanger").submit(); 
    } 
    }); 
}); 
</script> 
+0

그것은 선택이 발생할 때마다 새로운'input' 요소를 추가 할 것입니다. 누군가가 여러 번 날짜를 변경했다면 (3 번), DOM에 삽입 된 숨겨진 3 개의 추가 input 요소가 생겨 더 많은 문제를 일으킬 수 있습니다. –

0

1.11.1

나는 그런 식으로 그것을 관리했습니다 : 또한

$(yourForm).on('submit',{'yourExtraData':extraData},function(event){ 
     alert('your extra data ' + event.data['yourExtraData'] + ' went thru'); 
}); 

확인 :

관련 문제