양식을 호출 할 때 "성공적인"버튼을 흡수하는 것

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

문제

기기와 같은 제품의 웹 GUI에서 작업하고 있습니다.

잘 작동하는 HTML 양식이 있습니다. 확인란이있는 물건 목록을 표시하고 사용자는 일부를 확인하고 양식을 제출하는 "제거"버튼을 클릭합니다. 서버는 게시물을 가져오고 항목을 제거하고 페이지를 새로 고칩니다. 모두 괜찮습니다.

"확실합니까?"를 추가해야 할 요구 사항이 있습니다. 양식에 대한 확인. 전화를 추가하면

 confirm("are you sure?");

양식 태그의 OnSubmit 메소드 또는 제출 버튼 태그의 OnClick로서 잘 작동하지만 추악한 브라우저 네이티브 확인 대화 상자를 사용합니다.

제품의 다른 곳에서는 사용하고 싶은 멋진 커스텀 CSS 스타일 확인 대화 상자가 있지만 다음과 같이 작동합니다. 적절한 장소에서 전화를 걸었습니다. 

myConfirm("Confirm", "Are you sure", "Yes", "No", confirmCallback);

클릭 마스크를 만들고 대화 상자를 사용자 정의하고 중앙을 표시 한 다음 거짓을 반환하면 양식이 제출되지 않습니다.

나중에 사용자가 결정하면 "예"를 누르면 volictCallback 함수를 호출합니다. 다른 한편으로, 제품의 Ajax 기반 페이지는이 정보를 수집하고 포스트 바디를 생성하고 프로토 타입의 Ajax 객체를 사용하여 게시하면 모두 괜찮습니다. ( "아니요"라면 대화 상자와 클릭 마스크가 제거되고 상황이 계속됩니다.)

이 간단한 페이지에는 순수한 HTML 양식이 있는데 다음과 같은 확인 기능이 있습니다.

var confirmCallback = function() {
    document.myForm.submit();
}

또한 OK가 발사되지만 양식이 제출되면 제거 버튼이 이미 클릭되었고 사용자 정의 확인 억제 제출에 의해 거짓이 반환되었습니다. 대신, 이것은 새로운 제출물로 간주되며 제거 버튼이 실제로 클릭되지 않았으므로 W3.org의 HTML 4 표준 섹션 17.13.3의 관점에서 "성공적"으로 간주되지 않습니다. 서버는 데이터를 가져옵니다. 제거 버튼이 없지만 "나는 그것을 얻었지만 당신이 내가 원하는 일을하지 못했습니다"라고 말하면서 다음 페이지를 제공하는 것 외에는 아무것도하지 않습니다.

지금까지 읽은다면 감사합니다. 여기에 내 실제 질문이 있습니다. ConfercalCallback JavaScript 함수에서 크로스 브라우저 방식으로 제거 버튼이 발사되고 "성공적"이되어 나머지 데이터와 함께 제출할 수있는 방법은 무엇입니까?

도움이 되었습니까?

해결책

누른 버튼 인 척하려면 숨겨진 필드가 필요하며 각 버튼에는 이름이 필요하지 않고 대신 숨겨진 필드의 값을 조작하기위한 onclick 이벤트가 필요합니다.

버튼의 이름이 모두 다르면 모든 브라우저에서 DOM에 추가 된 후 필드 이름을 변경할 수 없다고 생각하기 때문에 DOM 메소드를 사용하여 숨겨진 필드를 추가해야 할 수도 있습니다.

JS 없이도이 솔루션이 여전히 작동하도록 해야하는 경우 JS 로직을 조금 더 플레이하거나 (초기 Dom 트리를 더 많은 수정을 수행하려면) 서버 코드를 수정해야 할 수도 있습니다. 당신은 "당신이 확실한"행동을 응답에 넣을 수도 있습니다 ...

다른 팁

제거 버튼이 해당 양식의 제출 버튼이라고 가정하면 가장 쉬운 솔루션은 양식에 ID를 제공하는 것입니다.

<form id="submitForm"...

그런 다음 확인에서 양식 제출을 호출하십시오

document.getElementById("submitForm").submit()

나는 그것이 당신이 요구하는 일을 할 것이라고 생각하지만, 당신이 이미 그 솔루션을 많이 사용했던 것처럼 보이므로 다른 것을 요구한다면 저에게 알려주십시오.

콜백에서 버튼의 onclick 핸들러를 제거한 다음 (확인을 유발) 버튼을 클릭하십시오. 버튼을 클릭하면 양식을 제출하고 버튼이 발생하여 제출물이 양식 데이터와 함께 다시 게시됩니다.

var confirmCallback = function() {
    $('submitButton').stopObserving('click');
    $('submitButton').click();
}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top