jQuery의 $(form).submit();양식 태그 내에서 onSubmit을 트리거하지 않습니까?

StackOverflow https://stackoverflow.com/questions/645555

  •  22-07-2019
  •  | 
  •  

문제

나는 다음을 가지고 있습니다 :

<script type="text/javascript">
function CancelFormButton(button) {
    $(button.form).submit();
}
</script>

<form onsubmit="alert('here');">
<input type="button" value="Cancel" onClick="CancelFormButton(this);" />
</form>

"취소" 버튼을 클릭하면 양식 태그의 제출 시가 트리거되지 않습니다.

대신 이 줄은 양식을 성공적으로 제출합니다. $(button.form).submit(); 하지만 건너뛴다 alert('here'); 양식 태그의 onsubmit 내에서.

이게 맞는 걸까요, 아니면 제가 뭔가 잘못하고 있는 걸까요?

그건 그렇고, 이 경우에는 이 기능을 원하지만 onsubmit이 트리거되는 브라우저에서 문제가 발생하는지 궁금합니다.

도움이 되었습니까?

해결책

죄송합니다. 질문을 오해했습니다.

에 따르면 JavaScript- 양식을 호출 할 때 onsubmit 캡처 .submit ():

최근에 물었습니다. "JavaScript를 사용하여 양식을 제출할 때 왜 양식이 이벤트가 해고되지 않습니까?"

답 : 현재 브라우저는 HTML 사양 의이 부분을 준수하지 않습니다. 이벤트는 사용자가 활성화 할 때만 발생합니다. 코드로 활성화 될 때는 발사되지 않습니다.

(강조 추가).

메모: "사용자가 활성화"에는 제출 버튼을 누르기도 포함됩니다 (아마도 Enter 키의 기본 제출 동작이 포함되어 있지만 시도하지 않았습니다). 또한 코드를 사용하여 제출 버튼을 클릭하면 트리거됩니다.

다른 팁

이것 작업은 @cletus가 발견 한 문제를 해결합니다.

function submitForm(form) {
    //get the form element's document to create the input control with
    //(this way will work across windows in IE8)
    var button = form.ownerDocument.createElement('input');
    //make sure it can't be seen/disrupts layout (even momentarily)
    button.style.display = 'none';
    //make it such that it will invoke submit if clicked
    button.type = 'submit';
    //append it and click it
    form.appendChild(button).click();
    //if it was prevented, make sure we don't get a build up of buttons
    form.removeChild(button);
}

모든 현대식 브라우저에서 작동합니다.
탭/스폰 된 아동 창에서 작동합니다 (예, IE <9에서도).
그리고 바닐라에 있습니다!

양식 요소에 대한 DOM 참조를 전달하면 첨부 된 모든 청취자 인 OnSubmit을 확인하고 (그때까지 방지하지 않으면) 양식을 제출할 수 있습니다.

내 간단한 해결책 :

$("form").children('input[type="submit"]').click();

그것은 나를위한 일입니다.

어떤 경우에는 이 동작을 원하는 것이 합리적이라고 생각하지만 양식 제출을 트리거하지 않는 코드는 (항상) 기본 동작이어야 한다고 주장합니다.다음을 사용하여 양식 제출을 포착하고 싶다고 가정해 보겠습니다. 

$("form").submit(function(e){
    e.preventDefault();
});

그런 다음 입력에 대한 유효성 검사를 수행합니다.코드가 제출 핸들러를 트리거할 수 있다면 절대 포함할 수 없습니다.

$("form").submit()

무한 루프가 발생하기 때문입니다(SAME 핸들러가 호출되어 제출을 방지하고 유효성을 검사한 후 다시 제출함).동일한 핸들러를 트리거하지 않고 제출 핸들러 내에서 양식을 수동으로 제출할 수 있어야 합니다.

이것이 질문에 직접적으로 대답할 수 없다는 것을 알고 있지만 이 페이지에는 이 기능이 어떻게 해킹될 수 있는지에 대한 다른 답변이 많이 있으며 이를 지적할 필요가 있다고 느꼈습니다(설명하기에는 너무 깁니다).

트리거 ( '제출')가 작동하지 않습니다. 다음 코드는 저에게 작동합니다.이 코드를 사용할 때 onsubmit 메소드를 호출하십시오.

$("form").find(':submit').click();

기능에서 트리거 () 이벤트를 시도하십시오.

$("form").trigger('submit'); // and then... do submit()

대신에

$("form").submit()

이 시도

 $("<input type='submit' id='btn_tmpSubmit'/>").css('display','none').appendTo('form');
 $("#btn_tmpSubmit").click();

나는 몇 년 전에이 질문을 Serval을 발견했다.

최근에 제출 방법을 "다시 작성"하려고했습니다. 아래는 내 코드입니다

window.onload= function (){
for(var i= 0;i<document.forms.length;i++){
    (function (p){
        var form= document.forms[i];
        var originFn= form.submit;
        form.submit=function (){
            //do something you like
            alert("submitting "+form.id+" using submit method !");
            originFn();
        }
        form.onsubmit= function (){
            alert("submitting "+form.id+" with onsubmit event !");
        }
    })(i);


}

}

<form method="get" action="" id="form1">
<input type="submit" value="提交form1" />
<input type="button" name="" id="" value="button模拟提交1" onclick="document.forms[0].submit();" /></form>

즉, "Cletus"와 같은 이유로 다른 브라우저에서 실패했습니다.

해결 방법을위한 가장 쉬운 솔루션은 유형 제출 및 트리거로 '임시'입력을 만드는 것입니다.

var submitInput = $("<input type='submit' />");
$("#aspnetForm").append(submitInput);
submitInput.trigger("click");
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top